Playwright 코드 단계에서 대상 요소를 스크린샷에 포함하는 방법

Playwright 코드 스텝을 실행할 때 대상 요소가 화면 밖(스크롤이 필요한 위치)에 있으면 테스트 결과 스크린샷에 포함되지 않을 수 있어요.

대상 요소가 뷰포트(표시 영역)에 들어올 때까지 명시적으로 스크롤을 실행하면 이 문제를 해결할 수 있습니다.

샘플 코드

다음은 요소의 텍스트를 검증할 때 대상 요소가 표시 영역에 들어올 때까지 스크롤하는 샘플 코드예요. 'foo'나 'target' 및 코드 내용은 검증하려는 내용에 따라 적절히 변경해 주십시오.

// 1. 먼저 요소를 특정합니다
const target = page.getByRole("heading", {
  name: "foo"
});

// 2. 대상 요소가 표시 영역에 들어올 때까지 스크롤합니다
await target.scrollIntoViewIfNeeded();

// 3. 요소의 텍스트를 검증합니다
await expect(target).toContainText("foo", {
  useInnerText: true
});

코드 해설

1. 요소 식별: getByRole 등을 사용하여 조작하거나 검증하려는 요소를 정의합니다.

2. 스크롤 실행: scrollIntoViewIfNeeded()를 호출하면 요소가 현재 보이지 않는 경우에만 Playwright가 해당 위치까지 자동으로 스크롤합니다.

3. 검증: 요소가 화면 안에 있는 상태에서 검증을 수행합니다.