🎈 Select Locator 탐색
select 태그에 대한 Locator를 탐색할 때는 getByRole('combobox')를 사용하면 편하게 탐색할 수 있다. option을 선택할 때는 selectOption 함수를 사용한다.
<!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>
<select name="select" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>test('Select', async ({ page }) => {
await page.goto('http://127.0.0.1:5500/index.html');
await page.getByRole('combobox').selectOption('2');
await expect(page.getByRole('combobox')).toHaveValue('2');
});
📯 Option의 순서 확인
일반적인 경우는 아니지만, Option을 동적으로 생성하는 경우 Option이 순서대로 생성되었는지를 확인하고 싶은 경우가 있다.
그때는 아래와 같이 page.getByRole('option') Locator를 통해서 텍스트 출력 순서를 확인해볼 수 있다.
test('Option', async ({ page }) => {
await page.goto('<http://127.0.0.1:5500/index.html>');
await expect(page.getByRole('option')).toHaveText(['1', '2', '3']);
});
사용자에게 보여지는 텍스트에 대한 테스트는 위의 코드로 확인이 가능하다.
추가로 option의 텍스트와 value가 다른 경우가 있을 수 있다. 일반적인 상황에서는 이 정도까지 테스트를 하는 경우는 드물긴 하지만, 최근 이 부분이 문제가 되어 테스트 코드를 작성해야하는 경우가 생겼다.
toHaveValue, toHaveValues 는 <input>, <textarea>, <select> 와 같은 폼 요소에서만 작동이 가능하다. option의 value는 직접 toHaveAttribute를 통해서 테스트 할 수 있다.
test('Option toHaveAttribute', async ({ page }) => {
await page.goto('<http://127.0.0.1:5500/index.html>');
let count = 1;
for (const option of await page.getByRole('option').all()) {
await expect(option).toHaveAttribute('value', (count++).toString())
}
});'테스트 > Playwright' 카테고리의 다른 글
| [Playwright] 드래그 앤 드랍 (0) | 2025.03.24 |
|---|---|
| [Playwright] 스텝 사용하기 (0) | 2025.03.02 |
| [Playwright] Locator의 메서드 (0) | 2025.02.08 |
| [Playwright] 유의사항 (0) | 2025.01.31 |
| [Playwright] 링크 이동 테스트 (0) | 2025.01.25 |
