웹 애플리케이션을 개발하면서 효율적인 성능을 위해 무한 스크롤 또는 가상화(Virtualization) 처리를 사용하는 경우가 많습니다. 이와 같은 가상화된 DOM 요소는 실제 브라우저 DOM에 즉시 렌더링되지 않아 테스트가 까다로울 수 있습니다. 이 글에서는 Playwright를 사용해 Virtual DOM 요소에 접근하고 스크롤하는 방법을 소개합니다.
Virtual DOM 스크롤 문제 이해하기
일반적으로 Playwright에서는 scrollIntoViewIfNeeded() 메서드를 통해 원하는 DOM 요소가 뷰포트에 보이도록 스크롤합니다. 하지만 Virtual DOM과 같은 경우, 원하는 요소가 실제 DOM에 존재하지 않을 수 있어 이를 직접 스크롤하는 방식이 필요합니다.
예를 들어, 아래의 코드는 test-domC라는 요소를 스크롤하려고 하지만, 가상화된 상태로 인해 DOM에 존재하지 않아 바로 접근할 수 없습니다.
test("virtual DOM Scroll", async ({ page }) => {
await page.getByTestId("test-domC").scrollIntoViewIfNeeded();
});이 경우, test-domC 요소가 나타날 수 있도록 스크롤을 조정해 줄 필요가 있습니다.
Playwright로 Virtual DOM 스크롤 테스트하기
가상화된 DOM에서는 먼저 상위 요소들이 로드될 수 있도록 순차적으로 스크롤을 진행해야 합니다. 아래 코드처럼 필요한 요소들이 순서대로 보일 수 있도록 scrollIntoViewIfNeeded()를 연속적으로 호출하여 test-domC가 나타나도록 합니다.
test("virtual DOM Scroll", async ({ page }) => {
await page.getByTestId("test-domA").scrollIntoViewIfNeeded();
await page.getByTestId("test-domB").scrollIntoViewIfNeeded();
await page.getByTestId("test-domC").scrollIntoViewIfNeeded();
});이렇게 하면 test-domC 요소가 Virtual DOM에 의해 렌더링되지 않은 상태라도, 스크롤을 통해 접근할 수 있게 됩니다.
Flaky 현상을 방지하는 toBeVisible 활용법
Playwright 테스트에서 scrollIntoViewIfNeeded()만 사용하는 경우, 간헐적인 Flaky 테스트가 발생할 수 있습니다. 이러한 문제를 방지하기 위해, 요소가 보이는지 확인하는 toBeVisible() 메서드를 추가적으로 사용하면 도움이 됩니다.
Playwright 공식 문서에서도 toBeVisible()을 사용하면 요소가 확실히 보이는지 확인할 수 있어 Flaky 현상을 방지할 수 있다고 권장하고 있습니다. scrollIntoViewIfNeeded()로 스크롤을 이동한 후, toBeVisible()로 요소 가시성을 확인하는 방식입니다.
아래는 이를 적용한 예제 코드입니다:
import { expect } from "@playwright/test";
test("virtual DOM Scroll with Visibility Check", async ({ page }) => {
await page.getByTestId("test-domA").scrollIntoViewIfNeeded();
await expect(page.getByTestId("test-domA")).toBeVisible();
await page.getByTestId("test-domB").scrollIntoViewIfNeeded();
await expect(page.getByTestId("test-domB")).toBeVisible();
await page.getByTestId("test-domC").scrollIntoViewIfNeeded();
await expect(page.getByTestId("test-domC")).toBeVisible();
});위의 코드에서 각 요소를 scrollIntoViewIfNeeded()로 스크롤한 뒤, toBeVisible()로 가시성을 확인하여 테스트의 신뢰성을 높였습니다.
정리
Playwright를 사용하여 Virtual DOM을 테스트할 때는 아래와 같은 절차를 따르면 좋습니다:
- 순차적인 스크롤: 목표 요소가 가상화된 상태라면 상위 요소들을 순서대로 스크롤하여 접근 가능하도록 합니다.
- 가시성 검증:
toBeVisible()메서드를 사용해 요소가 화면에 보이는지 확인하여 Flaky 현상을 방지합니다.
이를 통해 Virtual DOM 요소에 대한 테스트를 더욱 안정적이고 신뢰성 있게 진행할 수 있습니다.
