🎈 테스트의 타이틀은 실행전 결정되어야 한다.
테스트에 사용될 값을 랜덤하게 생성 하여 테스트해야하는 경우가 있었다. 그래서 랜덤값을 생성 후 파라미터 테스트로 진행하였다.
타이틀은 중복되면 안되기 때문에 랜덤값을 타이틀에 추가해보았다. 아래와 같이 랜덤하게 생성 된 값을 타이틀에서 활용하고 있다. 테스트 리포트에서 어떤 값으로 테스트했는지도 타이틀로 확인해보고 싶었기 때문에 괜찮은 선택이라 생각하였다.
import { test, expect } from '@playwright/test'
Array.from({ length: 10 }, () => Math.random())
.forEach((i) => {
test(`${i} * ${i}`, async ({ page }) => {
expect(i * i).toBe(i ** 2);
});
})
하지만 테스트 실행 후 아래와 같은 경고 문구를 확인할 수 있었다.
Test not found in the worker process. Make sure test title does not change.
기존에 파라미터 테스트를 진행해본적이 있었고 이때도 타이틀에 파라미터값을 활용했었기 때문에 처음에는 위의 문장을 보고도 왜 실패하는지 이해할 수 없었다. 테스트를 실행할 시점에는 이미 랜덤값은 모두 생성된 상태이고 테스트진행중에는 변경되지 않을것이라고 생각했기 때문이다.
아직 동작원리는 잘 모르지만 테스트의 타이틀에는 다음과 같이 정의할 수 있을 것 같다.
- Math.random과 같은 런타임에 결정되는 값을 타이틀에 사용할 수 없다.
- 테스트가 실행되기 전 타이틀이 결정되어야 한다.
✨ 랜덤 값을 사용해야한다면 파라미터 테스트가 아닌 테스트 내부에서 사용해야하며, 커스텀 메시지를 활용해서 랜덤값을 출력하는 것도 한가지 방법이다.
📯 화면에 보이는 요소만 가져오기
화면을 구상하다면 특정 요소에 대한 복제본을 생성하는 경우가 존재한다. 그런 경우 Role과 텍스트가 모두 일치해서 하나의 요소만 선택하기가 어렵다. 이때 보통 복제본은 none으로 처리하고 특정상황에서만 보이게하는 경우가 많다. 이 점을 활용해서 화면에 보이는 요소만 선택하도록 할 수 있다.
page.locator('visible=true')
아래와 같이 버튼이 2개 존재한다. locator를 통해서 버튼을 찾는 경우 button.click() 에서 오류가 발생한다. 그 이유는 버튼이 2개 존재하기 때문이다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>전송</button>
<button style="display: none;">전송</button>
</body>
</html>import { test, expect } from '@playwright/test'
test('test', async ({ page }) => {
await page.goto('http://127.0.0.1:5501/index.html');
const button = page.locator('button');
await button.click();
});
이러한 경우 화면에 보이는 요소만 찾도록 추가하면 된다. 정상적으로 작동하는 것을 확인할 수 있다.
import { test } from '@playwright/test'
test('test', async ({ page }) => {
await page.goto('http://127.0.0.1:5501/index.html');
const button = page.locator('button').locator('visible=true');
await button.click();
});
위와 같이 getByRole을 사용할 수 있는 경우에는 visible=ture를 사용하지 않아도 된다. 자동적으로 보이는 요소에서만 찾아준다.
import { test, expect } from '@playwright/test'
test('test', async ({ page }) => {
await page.goto('http://127.0.0.1:5501/index.html');
const button = page.getByRole('button')
await button.click();
});✨ getByRole은 대상이 하나밖에 없더라도 none 처리 되어 있는 경우 찾지 못한다. 항상 화면에 보이는 요소만 찾는다.
'테스트 > Playwright' 카테고리의 다른 글
| [Playwright] 드래그 앤 드랍 (0) | 2025.03.24 |
|---|---|
| [Playwright] 스텝 사용하기 (0) | 2025.03.02 |
| [Playwright] Select 테스트 (0) | 2025.03.01 |
| [Playwright] Locator의 메서드 (0) | 2025.02.08 |
| [Playwright] 링크 이동 테스트 (0) | 2025.01.25 |
