🎈 링크이동 테스트
페이지 이동은 다음과 같이 4가지 종류가 존재한다.
- _self : 현재 탭에서의 이동
- _blank : 새 탭에서의 이동
- _parent : 부모 항목에서의 이동
- _top : 최상위 항목에서의 이동
<a target="_self">현재 탭에서의 이동</>
<a target="_blank">새 탭에서의 이동</>
<a target="_parent">부모 항목에서의 이동</>
<a target="_top">최상위 항목에서의 이동</>
4가지 중 다음 두 가지 경우에 대해서 정상적으로 페이지 이동이 되었는 지 확인하는 테스트를 작성해보려고 한다.
- _self
- _blank
1️⃣ 현재 탭에서의 이동
현재 페이지의 URL에 대한 정보는 page 컨텍스트에 저장되어 있다.
아래와 같이 url 메서드를 호출하면 현재 url을 반환해준다.
page.url()
그래서 page를 활용해서 현재 탭에서 주소가 정상적으로 이동되었는지를 검증할 수 있다. 검증시에는 toHaveURL를 사용하면 된다.
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>
<a href="https://www.naver.com">이동</a>
</body>
</html>test('현재 탭에서 링크 이동한다.', async ({ page }) => {
await page.goto('');
await page.getByRole('link').click();
console.log(page.url());
await expect(page).toHaveURL('<https://www.naver.com>');
});
2️⃣ 새 탭에서의 이동
page는 현재 탭에서의 정보를 담고 있다. 새탭으로 주소를 이동하게 되면 기존 page 픽스처에서는 새 탭에서의 정보를 알 수 없다.
이 경우에는 context(브라우저 컨텍스트) 픽스처를 활용해야 한다. 페이지는 브라우저 컨텍스트 내에서 관리가 된다. 하나의 브라우저 컨텍스트에서는 다수의 페이지를 관리할 수 있다. 즉 새탭에서의 이동을 통해 생성된 페이지는 context를 통해서 가져올 수 있다.
waitForEvent는 이벤트가 실행될 때까지 기다리는 메서드이다. Promise를 반환한다.
아래와 같이 페이지 이벤트가 실행될때까지 기다린 후 만들어진 page를 통해 주소를 확인하면 된다.
context.waitForEvent('page');
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>
<a href="https://www.naver.com">이동</a>
</body>
</html>import { test, expect } from '@playwright/test'
test('새 탭에서 링크 이동한다.', async ({ page, context }) => {
await page.goto('');
const pagePromise = context.waitForEvent('page');
await page.getByRole('link').click();
const newPage = await pagePromise;
console.log('현재탭' + page.url());
console.log('새탭' + newPage.url());
await expect(newPage).toHaveURL('<https://www.naver.com>');
});- 콘솔을 확인해보면 현재탭에서는 기존 주소가 그대로이고,
- 새탭에서는 이동된 주소를 확인할 수 있다.
위의 코드를 보고 아래처럼 코드를 구성해도 되지않을까 생각했었다. 코드도 한줄 짧아지고 실제로 코드를 실행해보면 패스하기도 했다.
await page.goto('<http://localhost:5501>');
await page.getByRole('link').click();
const newPage = await context.waitForEvent('page');
하지만 링크를 클릭한 후에 이벤트를 기다리는 메서드를 호출하기 때문에, 이벤트를 놓칠 가능성이 존재한다. 그래서 확실하게 하게 위해서는 이벤트 발생전에 리스너를 설정하는 것이 좋다.
'테스트 > 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.31 |
