Playwright 고급 기능: 네트워크 상황 모사부터 접근성 테스트까지

Playwright 고급 기능: 네트워크 상황 모사부터 접근성 테스트까지

안녕하세요! 이전 편에서는 로그인 시나리오나 스크린샷 기능 등을 예제로 살펴보았는데요.
이번 편에서는 네트워크 상황 모사(Throttling), 접근성(A11y) 테스트, 권한 설정 등 좀 더 고급스러운 기능들을 살펴보겠습니다.

---

1. 네트워크 상황 모사(Throttling)

사용자 환경은 항상 빠른 인터넷만 있는 게 아니죠.
지하철이나 외곽 지역 등 네트워크 속도가 느린 환경에서 웹 페이지가 정상적으로 동작하는지 사전에 확인하는 것은 매우 중요합니다.

const { devices } = require('@playwright/test');

test('느린 네트워크 환경 테스트', async ({ browser }) => {
  const context = await browser.newContext({
    // 실제로는 프록시나 route API를 통해 네트워크 지연을 세밀하게 설정 가능
    userAgent: devices['iPhone 12'].userAgent,
  });

  const page = await context.newPage();
  // 예: 실제로는 route를 걸어서 throttling을 구현하거나,
  //     프록시 설정으로 느린 네트워크를 흉내낼 수 있음

  await page.goto('https://example.com/slow-page');

  // 페이지 로딩 확인
  await page.waitForSelector('.slow-content');
  // 느린 속도에서도 정상적으로 표시되는지 점검
});

• 느린 3G 등 극단적인 환경을 재현해 로딩 속도, 에러 발생 여부, UI 표시 지연 등을 사전에 파악할 수 있습니다.
• 실제 프로젝트에선 프록시 설정, route API 등을 활용하여 더욱 세밀하게 관리하실 수 있어요.

---

2. 접근성(A11y) 테스트

최근 웹 서비스 개발에서 접근성은 빼놓을 수 없는 중요한 부분입니다.
Playwright는 페이지의 접근성 트리(Accessibility Tree)를 직접 확인할 수 있는 기능을 제공해, 스크린 리더가 요소를 어떻게 인식하는지 점검할 수 있습니다.

test('접근성 테스트', async ({ page }) => {
  await page.goto('https://example.com');

  // 접근성 스냅샷을 생성
  const snapshot = await page.accessibility.snapshot();
  console.log(snapshot);

  // 필요하다면 특정 요소가 접근성 트리에 존재하는지 검증 가능
  // 예: snapshot.children 등 트리 구조를 직접 탐색
});

• ARIA 속성이 제대로 붙어 있는지, role이나 name이 명확히 지정됐는지 등 접근성 이슈를 미리 발견할 수 있어요.
• 시각장애인을 위한 스크린 리더 환경도 체크할 수 있으므로, UX 품질을 한 단계 높여줍니다.

---

3. 권한 설정(Geolocation 등)

위치 정보를 요청하거나, 알림(permission)을 요구하는 웹 앱을 자동화하려면 권한 설정이 필요합니다.

test('위치 기반 서비스 테스트', async ({ browser }) => {
  const context = await browser.newContext({
    geolocation: { latitude: 37.5665, longitude: 126.9780 }, // 서울 예시
    permissions: ['geolocation'], // 위치 권한 허용
  });
  const page = await context.newPage();

  await page.goto('https://example.com/location-based');

  // 페이지가 현재 위치(서울)를 바탕으로 올바른 정보를 표시하는지 확인
  const locationText = await page.textContent('.location-info');
  expect(locationText).toContain('Seoul');
});

• geolocation과 permissions 옵션을 지정해, 해당 테스트 세션에서만 특정 권한을 허용한 상태로 수행할 수 있습니다.
• 알림(Notifications), 마이크·카메라 권한 등도 유사한 방식으로 다뤄보실 수 있습니다.

---

4. 정리

• 네트워크 상황 모사: 다양한 인터넷 속도를 미리 재현해본다면, 사용자 경험의 폭을 넓힐 수 있습니다.
• 접근성(A11y) 테스트: 스크린 리더와의 호환성, ARIA 속성 점검으로 웹 서비스 품질을 한층 높일 수 있습니다.
• 권한 설정: 위치, 알림 등 권한을 필요한 시점에 자동화해 테스트 범위를 넓힐 수 있습니다.

다음 편에서는 Playwright를 CI/CD 파이프라인에 연동해 자동화 테스트를 팀원과 공유하고, 코드 품질을 지속적으로 관리하는 방법을 알아볼 예정이니 계속 관심 가져주세요!