Playwright로 파일을 업로드하는 방법

Twitter에서 팔로우 | 구독하기 Newsletter | timdeschryver.dev에 원래 게시되었습니다.


Read the TLDR version on timdeschryver.dev

이 게시물은 Playwright로 파일을 업로드하는 방법을 보여줍니다.
기본을 유지하기 위해 간단한 업로드 입력 요소가 있는 페이지를 가져오고 업로드된 후 파일 이름도 표시해 보겠습니다.

평소와 같이 codegen 도구를 시작하여 시작합니다writing my Playwright test.
Playwright extension for Visual Studio Code을 설치했기 때문에 명령 팔레트를 통해 codegen 도구를 빠르게 시작할 수 있습니다.

파일을 업로드하기 위해 작동하는 codegen 도구를 살펴보겠습니다.



codegen 도구 사용을 마치면 새 테스트 파일과 다음과 같이 생성된 코드가 생성됩니다.
나는 이미 가장 중요한 라인을 강조 표시했습니다.

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {

    // Go to http://127.0.0.1:8080/
    await page.goto('http://127.0.0.1:8080/');

    // Click input[name="file-upload"]
    await page.locator('input[name="file-upload"]').click();

    // Upload fixture.pdf
    await page.locator('input[name="file-upload"]').setInputFiles('fixture.pdf');

    // Click text=fixture.pdf
    await page.locator('text=fixture.pdf').click();

});

생성된 테스트에서 볼 수 있듯이 page.setInputFiles 메서드를 사용하여 하나 이상의 파일을 업로드할 수 있습니다.

지금까지는 좋았지만 테스트를 실행하면 다음과 같은 오류가 발생할 수 있습니다.

npx playwright test

Running 1 test using 1 worker
  1) [chromium] › test-1.spec.ts:3:1 › test ========================================================

    Error: ENOENT: no such file or directory, stat 'C:\Users\timde\dev\playgrounds\playwright-demo\fixture.pdf'

오류는 업로드하려는 파일이 존재하지 않는다고 말합니다.
더 가까이 가면 codegen 도구가 파일 경로가 아닌 업로드된 파일의 파일 이름만 설정한다는 것을 알 수 있습니다.
이로 인해 테스트가 실행되는 동안 파일을 찾을 수 없습니다.

이 문제를 해결하려면 파일에 대한 상대 경로(프로젝트의 루트에서 시작)를 사용하도록 테스트를 변경하십시오.

테스트에 사용하려는 일반 파일의 fixtures 폴더 안에 tests 폴더를 만들고 싶습니다.
테스트에 대한 특정 파일을 테스트 파일 바로 옆에 추가할 수 있으므로 해당 파일이 특정 테스트임을 분명히 알 수 있습니다.

수정된 테스트는 다음과 같습니다.

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {

    // Go to http://127.0.0.1:8080/
    await page.goto('http://127.0.0.1:8080/');

    // Click input[name="file-upload"]
    await page.locator('input[name="file-upload"]').click();

    // Upload fixture.pdf
    await page.locator('input[name="file-upload"]').setInputFiles('./tests/fixtures/fixture.pdf');

    // Click text=fixture.pdf
    await page.locator('text=fixture.pdf').click();

});

이렇게 변경하면 테스트가 통과됩니다.
더 중요한 것은 Playwright로 파일을 업로드하는 방법을 보았습니다.

npx playwright test

Running 1 test using 1 worker

  1 passed (1s)

Twitter에서 팔로우 | 구독하기 Newsletter | timdeschryver.dev에 원래 게시되었습니다.