안녕하세요. 2024년도 벌써 절반이 지났네요!
요즘 Playwright 관련 내용을 많이 기록하고 있는 것 같네요 ㅎㅎ
이번에는 Playwright를 사용하면서 불편했던 점 1가지를 공유드리려고 합니다.
1. test id를 활용한 DOM element 검색
Playwright는 테스트를 보다 쉽게 지원하기 위해서 test id를 활용한 DOM element 검색을 지원합니다.
다음과 같이 config 파일을 수정하는 것으로 테스트에 사용할 test-id 속성 이름을 변경할 수도 있습니다.
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
testIdAttribute: 'data-pw'
}
});
2. 부분문자열로 검색이 되지 않는 불편함
test id를 이용해서 DOM element를 찾으면 테스트가 훨씬 편해질 줄 알았는데 한가지 불편함이 있었습니다.
바로 부분 문자열을 활용한 검색이 안된다는 것이죠 ㅜㅠ
다음과 같은 html이 있을 때, test id가 "test-case-"으로 시작하는 element들을 한번에 찾고 싶으면 어떻게 해야 할까요?
<div data-test-id="test-case-1">테스트 케이스 1</div>
<div data-test-id="test-case-2">테스트 케이스 2</div>
<div data-test-id="test-case-3">테스트 케이스 3</div>
...
getByLabel, getByText 같은 함수를 사용한다면 "test-case-"를 인자로 넘기는 것으로 간단하게 찾을 수 있습니다.
// getByLabel 사용 예시
let testCaseList = await page.getByLabel("test-case-").all();
// getByText 사용 예시
let testCaseList = await page.getByText("test-case-").all();
하지만 getByTestId는 부분문자열로 검색이 안되서 regex를 사용해야만 합니다...
let testCaseList = await page.getByTestId(/test-case-(\d+)/).all();
test id의 형식을 안다면 regex를 작성하는 것도 큰 어려움은 아니겠지만
regex보다는 부분문자열을 사용하는 것이 접근성이 좋다고 생각하는 입장에서 상당히 불편하더라고요 흠흠
+++
저는 regex 사용에 익숙하지 않아서 테스트하면서 만들곤 합니다.
그 때마다 온라인 regex 에디터인 https://regex101.com/ 를 활용하는데 많이 편하더라고요!
혹시 regex 만들 때 꿀팁이 있으실까요?
+ 번외) getByTestId가 부분문자열로 검색이 안되는 이유
getByLabel, getByText는 부분문자열로 찾을 수 있는데 getByTestId는 왜 안되는 걸까요?
한번 Playwright 코드를 직접 찾아봤습니다.
Page 객체의 getByTestId 메소드를 거쳐서
Frame 객체의 getByTestId 메소드를 거쳐서
getByTestIdSelector 함수를 보면 escapeForAttributeSelector 함수에 testId와 true를 인자로 넘기는 것을 확인할 수 있습니다.
testId를 넘기는 것은 당연한데 뒤에 boolean 값은 무슨 용도일까요?
escapeForAttributeSelector 함수를 보면 주어진 값과 정확하게 비교할지 결정하는 exact 파라미터라는 것을 알 수 있습니다.
그냥 Playwright 구현이 그렇네요...?
혹시나 getByTestId가 부분문자열을 이용한 검색을 허용하지 않는 것에 대해서 이슈가 없나 찾아봤는데 아니나 다를까 있더라고요!
그런데 getByTestId가 regex를 이용하면 여러 개의 element를 찾을 수 있어서 해당 이슈가 올해 2월에 닫혔습니다 ㅋㅋㅋ
우선순위에서 많이 밀린 느낌이네용 ㅋㅋㅋ
이렇게 첫번째 Playwright 불편한 점 공유를 마치겠습니다.
'유용한 툴 > 테스트 자동화' 카테고리의 다른 글
Playwright 스크립트에서 API 응답을 이용하여 테스트 케이스를 동적으로 생성하기 - Playwright 불편한 점 #1 (0) | 2024.06.30 |
---|---|
Playwright를 활용한 시뮬레이션 작업 - 짧게 짧게 끊어서! (0) | 2024.06.23 |
테스트 자동화 툴 조사 - 이렇게 Playwright를 도입하게 되었습니다. (0) | 2024.05.22 |