Playwright의 한계와 해결책

Playwright 사용 시 발생하는 일반적인 문제

Playwright를 사용하면서 자주 발생하는 문제와 그 원인 및 해결 방법에 대해 설명하겠습니다.

1. Playwright 설치 문제

• 문제: Playwright 설치 시 네트워크 환경 문제로 브라우저가 제대로 다운로드되지 않음.
• 원인: 방화벽, 프록시, 네트워크 속도 제한 등이 다운로드를 차단.
• 해결 방법
  1. PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 환경 변수를 설정한 뒤, 브라우저를 수동으로 설치.
  2. VPN을 사용하거나 프록시 설정을 변경하여 설치.

2. 브라우저 자동 실행 오류

• 문제: Playwright가 브라우저를 실행하지 못하거나, 실행 중 오류가 발생.
• 원인
  • Playwright와 브라우저 버전 간 불일치.
  • 잘못된 Playwright 버전 사용.
• 해결 방법
  1. Playwright와 브라우저를 최신 버전으로 업데이트: npx playwright install.
  2. 의존성 파일을 재설치: npm install 및 playwright install.

3. 타임아웃 문제

• 문제: 특정 테스트 단계가 타임아웃으로 인해 실패.
• 원인
  • 느린 네트워크 응답 또는 DOM 요소가 예상 시간 내에 로드되지 않음.
• 해결 방법

테스트에 충분한 타임아웃 설정

await page.click('selector', { timeout: 10000 });

waitFor 메서드를 활용해 특정 상태를 기다림:

await page.waitForSelector('selector');

4. CSS 선택자 또는 XPath 문제

• 문제: 잘못된 선택자로 인해 Playwright가 요소를 찾지 못함.
• 원인
  • 선택자가 변경되었거나, 잘못 정의된 경우.
• 해결 방법
  1. 브라우저 개발자 도구를 사용해 정확한 선택자 확인.
  2. 선택자가 동적으로 생성될 경우, 더 안정적인 속성 사용 (예: data-testid).

5. 헤드리스 모드와 UI 모드 간 동작 차이

• 문제: 헤드리스 모드에서 테스트가 실패하지만, UI 모드에서는 성공.
• 원인
  • 헤드리스 모드에서 렌더링이 약간 다르게 작동.
  • Viewport 크기나 화면 스크롤 차이.
• 해결 방법

테스트에서 동일한 Viewport와 옵션을 설정

const browser = await playwright.chromium.launch({
  headless: false,  // 동일한 모드 사용
  viewport: { width: 1280, height: 720 }
});

page.screenshot()으로 상태를 캡처해 디버깅.

6. 동적 페이지 로딩 문제

• 문제: AJAX로 로드되는 콘텐츠가 예상 시간에 표시되지 않음.
• 원인
  • 요소가 페이지 로드 후 동적으로 추가.
• 해결 방법

네트워크 요청을 기다리기

await page.waitForResponse('https://api.example.com/data');

특정 DOM 상태를 확인하기

await page.waitForSelector('div.dynamic-content');

7. 파일 업로드 문제

• 문제: Playwright가 파일 업로드를 제대로 처리하지 못함.
• 원인
  • 파일 업로드 입력 요소의 동작 차이.
• 해결 방법

const [fileChooser] = await Promise.all([
  page.waitForEvent('filechooser'),
  page.click('input[type="file"]'),
]);
await fileChooser.setFiles('path/to/file.txt');

8. 동시성 문제

• 문제: 여러 테스트가 동시에 실행될 때 리소스 충돌 발생.
• 원인
  • 같은 브라우저나 세션을 공유하여 간섭 발생.
• 해결 방법

각 테스트가 별도 브라우저 컨텍스트를 사용하도록 설정

const context = await browser.newContext();
const page = await context.newPage();

테스트 병렬화를 제한 (Playwright Config 파일에서 설정 가능).

9. 스크린샷 및 비디오 기록 실패

• 문제: 디버깅을 위해 스크린샷이나 비디오 기록을 활성화했지만 저장되지 않음.
• 원인
  • 잘못된 경로나 옵션 설정.
• 해결 방법

await page.screenshot({ path: 'screenshot.png' });

Playwright Config에서 비디오 기록 활성화

use: {
  video: 'on',
}

10. 권한 또는 인증 문제

• 문제: 테스트 중 카메라, 마이크 등 권한 요청 처리 실패.
• 원인
  • 브라우저 권한 기본값으로 인해 요청이 무시됨.
• 해결 방법

const context = await browser.newContext({
  permissions: ['camera', 'microphone']
});

추가 팁

• 디버깅: DEBUG=pw:* 환경 변수를 설정하면 Playwright 내부 로그를 확인할 수 있음.
• 최신 문서 확인: Playwright 공식 문서를 주기적으로 참조하여 최신 API와 문제 해결 가이드를 확인.

이런 일반적인 문제를 이해하고 사전에 준비하면 Playwright를 더 안정적으로 사용할 수 있습니다.

문제 해결을 위한 팁과 트릭

Playwright를 사용할 때 효율적으로 문제를 해결하고 디버깅할 수 있는 몇 가지 팁과 트릭을 정리했습니다. 이를 활용하면 테스트 작성 및 유지보수가 더욱 수월해질 것입니다.

1. 디버깅에 유용한 Playwright 옵션

UI를 활성화한 테스트 실행

테스트 실패 원인을 파악하기 위해 브라우저를 직접 열어보는 것이 중요합니다. headless 모드를 끄고 실행하면 브라우저 동작을 시각적으로 확인할 수 있습니다.

const browser = await playwright.chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();

Slow Motion 모드

빠르게 진행되는 테스트 동작을 천천히 확인하고 싶을 때 유용합니다.

const browser = await playwright.chromium.launch({
  headless: false,
  slowMo: 100 // 100ms씩 지연
});

디버그 로깅 활성화

DEBUG=pw:* 환경 변수를 설정하여 Playwright의 내부 로그를 확인할 수 있습니다.

DEBUG=pw:* npx playwright test

2. 스크린샷과 비디오를 활용한 문제 추적

실패 시 스크린샷 저장

테스트 실패 시 화면 캡처를 저장해 디버깅에 활용하세요.

await page.screenshot({ path: 'screenshot.png' });

비디오 기록 활성화

Playwright 설정 파일에서 비디오 기록을 활성화하면 테스트 과정을 검토하기 쉽습니다.

// playwright.config.ts
use: {
  video: 'retain-on-failure', // 실패 시에만 비디오 저장
}

3. waitFor 메서드의 적극적인 활용

Playwright는 매우 빠르게 실행되기 때문에 동적 콘텐츠가 제대로 로드되지 않아 오류가 발생할 수 있습니다. 적절한 waitFor 메서드를 사용해 로딩이 완료될 때까지 기다려야 합니다.

DOM 요소 대기

await page.waitForSelector('selector');

네트워크 요청 대기

await page.waitForResponse(response => response.url().includes('api.example.com') && response.status() === 200);

특정 조건 대기

await page.waitForFunction(() => document.title === 'Expected Title');

4. Playwright Inspector 사용

• Playwright는 테스트를 디버깅할 수 있는 Inspector를 제공합니다.

npx playwright test --debug

• 이 모드를 활성화하면 테스트 실행 중 브라우저를 일시정지하고, 각 단계에서 상태를 점검하거나 코드를 수정할 수 있습니다.

5. 코드 재사용과 유지보수성 향상

Custom Helpers 작성

자주 사용하는 작업(예: 로그인, 페이지 이동 등)을 Helper 함수로 정의해 재사용성을 높입니다.

async function login(page, username, password) {
  await page.fill('#username', username);
  await page.fill('#password', password);
  await page.click('#login');
}

테스트 데이터 분리

테스트 데이터를 코드에서 분리하여 관리하면 유연성이 높아집니다. JSON 파일을 사용하여 테스트 데이터를 읽을 수 있습니다.

const testData = require('./testData.json');
await page.fill('#username', testData.username);

6. 병렬 실행과 동시성 관리

병렬 실행 설정

테스트를 병렬로 실행하여 시간을 절약할 수 있습니다. Playwright 설정 파일에서 병렬 작업 수를 지정합니다.

// playwright.config.ts
workers: 4, // 동시에 4개의 테스트 실행

테스트 간 리소스 충돌 방지

각 테스트가 별도의 브라우저 컨텍스트를 사용하도록 설정하세요.

const context = await browser.newContext();
const page = await context.newPage();

7. 네트워크 요청 모니터링 및 조작

요청 차단

테스트 중 특정 네트워크 요청을 차단해 다양한 시나리오를 테스트할 수 있습니다.

await page.route('**/*.{png,jpg}', route => route.abort());

요청 모의(mock)

API 응답을 모의하여 테스트의 안정성을 높일 수 있습니다.

await page.route('https://api.example.com/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ data: 'mock data' })
  });
});

8. 환경 변수 활용

테스트에서 다양한 환경(개발, QA, 프로덕션 등)을 처리하려면 환경 변수를 활용하세요.

const baseUrl = process.env.BASE_URL || 'http://localhost:3000';
await page.goto(baseUrl);

9. 테스트 시각화 및 보고

Allure 리포트 통합

테스트 결과를 시각적으로 확인할 수 있는 리포트 도구를 활용하세요.

npm install --save-dev @playwright/test allure-playwright

Playwright 설정 파일에 Allure를 추가하면 리포트를 생성할 수 있습니다.

다양한 View 제공

• 이슈 추적 툴과 연계하여 테스트 진행 상황을 관리하거나, Jenkins, GitHub Actions 같은 CI/CD 도구와 통합해 상태를 공유합니다.

10. Playwright 공식 도구 적극 활용

• Codegen: Playwright에서 제공하는 자동 코드 생성 기능을 사용해 빠르게 테스트를 작성할 수 있습니다.

npx playwright codegen

• Trace Viewer: 테스트 실행 시 Trace 파일을 생성하여 실행 과정을 검토할 수 있습니다.

npx playwright test --trace on

위 팁과 트릭을 적절히 조합하여 Playwright 사용의 효율성을 극대화할 수 있습니다.

커뮤니티와 문서 활용

Playwright를 효과적으로 활용하려면 커뮤니티와 문서를 적극적으로 사용하는 것이 중요합니다. Playwright는 활발한 커뮤니티와 정교한 공식 문서를 제공하므로, 이를 통해 문제를 해결하거나 테스트 자동화 기술을 더 깊이 이해할 수 있습니다.

공식 문서 활용

Playwright의 공식 문서는 매우 체계적이고 풍부한 정보를 제공하므로, 사용자가 필요로 하는 거의 모든 정보를 찾을 수 있습니다.

공식 문서 주요 섹션

1. Getting Started: Playwright 설치 및 기본 사용법.
   • 링크: Getting Started
   • 테스트 설정과 기본 API 사용법을 빠르게 배울 수 있습니다.
2. Core Concepts: Playwright의 주요 개념(브라우저, 페이지, 요소 조작 등).
   • 링크: Core Concepts
   • Playwright의 구조와 작동 방식을 이해하는 데 유용합니다.
3. API Reference: 모든 Playwright 메서드와 옵션에 대한 세부 정보.
   • 링크: API Reference
   • 특정 기능이나 메서드의 사용 방법을 찾을 때 참고.
4. Guides: 다양한 상황에 맞는 예제와 모범 사례.
   • 링크: Playwright Guides
   • 성능 테스트, CI/CD 통합, 비디오 기록 등 고급 주제를 다룹니다.

활용 팁

• 특정 에러 메시지가 나왔을 때, 에러와 관련된 키워드를 공식 문서에서 검색하세요.
• 공식 문서에서 제공하는 예제를 코드에 직접 복사하고 테스트해 보며 실습하세요.