Playwright 스크립트에서 API 응답을 이용하여 테스트 케이스를 동적으로 생성하기 - Playwright 불편한 점 #1

안녕하세요. 여름 잘 보내고 있으신가요?

저는 집에서 날벌레가 많이 보여서 힘든 나날을 보내고 있습니다 흑흑

 

이번에는 Playwright를 사용하면서 겪었던 불편한 점을 기록하려고 합니다.

---

1. 문제 현상

저는 시뮬레이션 작업에 Playwright를 사용하고 있었습니다.

시뮬레이션 작업의 입력값은 수시로 바뀔 수 있는데 이 때마다 매번 스크립트를 수정하는 것이 여간 불편한 것이 아니었습니다.

 

이런 불편함을 해소하기 위해서 서버에서 데이터를 조회하는 방식으로 스크립트를 수정해서 이를 자동화 시키려고 했습니다.

 

아래 코드와 식으로 해결하려고 했는데 테스트 케이스를 찾을 수 없다는 에러가 발생하는 것입니다;;;

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

test.describe('test-async-function', async () => {
    let data = await fetch('http://test-server');
    for(let num=0; num < data.numOfCase; num++) {
    	test(`테스트 ${num}`, async ({ page }, testInfo) => {
        	// test scripts
            // ...
            // ...
        });
    }
})

test 함수가 있는데 왜 못 찾죠?

 

2. 원인

fetch 함수를 사용하면서부터 문제가 발생했으니 Playwright와 fetch 관련 이슈를 찾다보니 관련 내용을 찾을 수 있었습니다!

• 참고 이슈: https://github.com/microsoft/playwright/issues/9636

github issue 내용을 간단하게 설명해드리면 다음과 같습니다.

2.1. github 이슈에서 설명한 원인

• Playwright는 맨 처음에 테스트 디렉토리를 순회하면서 테스트 케이스들을 수집하고,
• 그 다음에 각각의 테스트 케이스들을 실행합니다.
• 하지만 가장 상위 테스트 케이스의 body 함수가 async 함수이면 테스트 케이스 수집 과정에서 누락됨

※ 조금 더 찾아본 원인

직접적인 원인을 알아보고 싶어서 playwright의 test.describe 함수를 살펴봤습니다.
- 참고 링크: https://github.com/microsoft/playwright/blob/9bc45ea2fc69ec1109581d36c6a5a4cf2300ee9f/packages/playwright/src/common/testType.ts#L168

테스트 케이스의 body 함수를 실행하는 test.describe

describe 함수를 살펴보니 github 이슈에서 설명한 것처럼 body 함수를 실행하고 있더라고요.

describe 함수는 synchronous 함수이기 때문에 body 함수가 async 함수일 경우에는 내부에 작성된 테스트 케이스 함수가 실행되더라도 적용되지 않는 것이었습니다...

2.2. github 이슈에서 제안하는 조치 방법

• 테스트를 여러 개 만들지 말고 여러 개의 스텝으로 만들기
  • https://playwright.dev/docs/api/class-test#test-step
• global setup 함수를 이용해서 테스트 케이스가 실행되기 전 서버로부터 데이터를 조회하고 파일로 저장하여 테스트 케이스에서 사용하기 
  • https://playwright.dev/docs/test-configuration#global-setup-and-teardown

github 이슈!

 

3. sync fetch를 이용한 데이터 조회

저는 아쉽게도 github 이슈에서 알려준 방법으로 문제를 해결할 수 없었습니다. 그래서 다른 방법을 찾아야만 했습니다 ㅜㅠ

 

다행히 방법을 찾을 수 있었습니다.

 

테스트의 body 함수만 async가 아니기만 하면 되었기에  sync-fetch 모듈을 이용해서 테스트 케이스를 수정하면 되는 것이었죠!

• https://www.npmjs.com/package/sync-fetch

import { test } from '@playwright/test';
import _fetch from 'sync-fetch';

test.describe('test-sync-function', () => {
    let data = _fetch('http://test-server');
    // test scripts
    // ...
    // ...
})

---

데이터 조회를 통한 테스트 케이스 실행은 정말 간단한 작업일 줄 알았는데 생각보다 시간을 소요해서 살짝 당황스러웠던 경험입니다.

 

Playwright를 사용하시는 분들 중에 비슷한 이슈를 겪는 분들께 도움이 되면 좋겠네요!