소개

Playwright와 같은 엔드투엔드 테스트 프레임워크로 작업할 때 네트워크 요청을 처리하는 것은 종종 복잡한 작업입니다. 외부 API에 의존하는 테스트는 느리고 일관성이 없어 불필요한 결함이 발생할 수 있습니다. 한 테스트 실행에서 성공한 네트워크 호출은 느리거나 신뢰할 수 없는 서버로 인해 다음 테스트에서는 실패하여 결과가 일관되지 않을 수 있습니다. 이 문제를 해결하기 위해 개발자는 모의 네트워크 요청에 의존하는 경우가 많으며 이로 인해 모의 관리라는 또 다른 과제가 발생합니다.

복잡한 모의 전략을 설정하지 않고도 캐싱을 처리하고 네트워크 응답을 재사용하는 자동화된 방법이 있다면 좋지 않을까요? 기존 접근 방식을 조사하고 소개하고 싶은 도구를 개발했습니다. 파일 시스템에서 네트워크 요청을 캐싱하여 이러한 정확한 문제를 해결하여 더 빠르고 안정적인 Playwright 테스트를 가능하게 합니다.

테스트 중 네트워크 요청 문제

네트워크 요청은 테스트 실행에서 가장 느린 부분인 경우가 많습니다. 여러 테스트 모음을 실행할 때 외부 API를 반복적으로 쿼리하면 테스트 기간이 크게 늘어날 수 있습니다. 또한 실제 API는 불안정할 수 있으며 가끔 시간 초과가 발생하여 테스트가 취약하고 신뢰할 수 없게 됩니다.

이 문제를 완화하는 일반적인 접근 방식은 API 응답을 모의하는 것입니다. 모의 작업은 유용하지만 수동 개입이 필요합니다. 모의 응답을 신중하게 구성하고 업데이트를 유지하며 모든 잠재적인 네트워크 시나리오가 처리되는지 확인해야 합니다. 이는 API가 발전하거나 테스트 사례가 변경됨에 따라 유지 관리에 큰 부담이 될 수 있습니다. Playwright는 네트워크 트래픽 캡처 및 재생을 위해 HAR 파일을 지원하지만 HAR 작업은 지루할 수 있으며 즉시 응답을 수정하기 위한 유연성이 부족합니다.

극작가 네트워크 캐시를 입력하세요

playwright-network-cache는 Playwright 테스트에서 네트워크 응답을 캐싱하는 프로세스를 간소화하여 수동 모의 파일이나 엄격한 HAR 파일이 필요하지 않도록 설계되었습니다. 이 라이브러리를 사용하면 첫 번째 테스트 실행 중에 네트워크 응답이 파일 시스템에 자동으로 저장되고 후속 실행에서 재사용될 수 있어 테스트 실행 속도가 크게 향상됩니다. 또한 응답 내용은 명확하고 정리된 폴더 구조로 저장되므로 필요에 따라 쉽게 확인하고 수정할 수 있습니다.

문제를 해결하는 방법

1. 자동 캐싱: 테스트가 처음 실행될 때 라이브러리가 자동으로 네트워크 응답을 캐시합니다. 즉, 테스트는 향후 실행에서 외부 API가 응답할 때까지 기다릴 필요가 없습니다. 캐시된 데이터가 대신 사용되므로 더 빠르고 안정적인 테스트가 가능합니다.

2. 동적 수정: 특정 테스트 사례에 대한 응답을 조정해야 합니까? playwright-network-cache를 사용하면 캐시된 응답을 동적으로 수정할 수 있습니다. 상태 코드, 헤더 또는 응답 본문을 변경하려는 경우 라이브러리는 별도의 모의를 수동으로 유지 관리하지 않고도 캐시된 데이터를 즉시 조정할 수 있는 옵션을 제공합니다.

3. 유연한 구조: 캐싱 시스템은 호스트 이름, 요청 방법 및 URL 경로를 기반으로 파일을 구성하므로 캐시된 데이터를 쉽게 탐색하고 관리할 수 있습니다. 더 복잡한 경우에는 요청 쿼리 매개변수, 요청 본문 또는 기타 사용자 정의 필드별로 캐시 파일을 분할하여 데이터 저장 및 재사용 방법에 있어 완전한 유연성을 보장할 수도 있습니다.

4. 속도 향상: 캐시된 응답을 재사용하면 테스트가 더 이상 네트워크 호출이 완료될 때까지 기다릴 필요가 없으므로 테스트 속도가 훨씬 빨라집니다. 이는 대규모 테스트 스위트로 작업하거나 속도가 중요한 CI 환경에서 테스트를 실행할 때 특히 유용합니다.

5. 더 이상 모의 지옥은 없습니다: 모의를 수동으로 유지하는 것은 잊어버리세요. 라이브러리는 캐싱부터 재생, 심지어 응답 수정까지 모든 것을 처리합니다. 더 이상 각 테스트 시나리오에 대한 모의 응답을 수동으로 만들 필요가 없으며 테스트 로직에 더 집중할 수 있습니다.

6. HAR 복잡성 없음: HAR 파일은 네트워크 상호 작용을 기록하고 재생하는 데 유용할 수 있지만, 특히 응답을 수정해야 할 때 빠르게 번거로워집니다. playwright-network-cache는 개별 응답을 간단한 JSON 파일로 관리할 수 있게 하여 HAR보다 더 깔끔하고 유연한 대안을 제공합니다.

예

API에서 고양이 목록을 가져오는 애플리케이션을 테스트한다고 상상해 보세요. 캐싱이 없으면 테스트를 실행할 때마다 API에 대한 실시간 요청이 필요하므로 테스트에 지연 시간과 잠재적 실패 지점이 추가됩니다.

playwright-network-cache를 사용하면 API 응답을 쉽게 캐시할 수 있습니다.

test('test', async ({ page, cacheRoute }) => {
  await cacheRoute.GET('https://example.com/api/cats');
  // Perform usual test actions...
});

처음 실행 시 응답은 다음과 같은 구조로 .network-cache 디렉터리에 캐시됩니다.

.network-cache
└── example.com
    └── api-cats
        └── GET
            ├── headers.json
            └── body.json

이후 실행에서는 캐시된 응답이 재사용되므로 테스트 속도가 빨라지고 실제 API를 실행할 필요가 없습니다.

특정 테스트 요구에 맞게 캐시된 응답을 수정할 수 있습니다.

test('test', async ({ page, cacheRoute }) => {
  await cacheRoute.GET('https://example.com/api/cats', {
    modify: async (route, response) => {
      const json = await response.json();
      json[0].name = 'Kitty-1';
      await route.fulfill({ json });
    }
  });
  // Perform usual test actions...
});

cacheRoute 변수를 테스트에서 사용하려면 다른 Playwright 픽스처처럼 인스턴스화하세요.

// fixtures.js
import { test as base } from '@playwright/test';
import { CacheRoute } from 'playwright-network-cache';

export const test = base.extend({
  cacheRoute: async ({ page }, use) => {
    const cacheRoute = new CacheRoute(page, { /* cache options */ });
    await use(cacheRoute);
  },
});

라이브러리 문서에는 다른 많은 예제와 사용 사례가 있습니다.

단순한 캐싱 그 이상

playwright-network-cache는 단지 캐싱에 관한 것이 아닙니다. 다음과 같은 고급 기능을 제공합니다.

• 응답 수정: 사용자 정의 기능을 사용하여 캐시된 응답의 데이터를 동적으로 조정합니다.
• 상태 코드 처리: 오류를 포함한 특정 HTTP 상태 코드를 기반으로 응답을 캐시합니다.
• 유연한 디렉터리 구조: 캐시 파일이 저장되는 방법과 위치를 사용자 정의하여 필요에 맞게 캐싱 전략을 맞춤화할 수 있습니다.
• 캐시 비활성화 또는 업데이트: 특정 테스트에 대한 캐싱을 일시적으로 비활성화하거나 필요할 때 캐시를 강제로 업데이트합니다.

이러한 강력한 기능을 사용하면 테스트에서 네트워크 요청이 관리되는 방식을 세밀하게 제어할 수 있습니다.

요약

Playwright 테스트를 더 빠르고 안정적으로 만들고 싶다면 playwright-network-cache를 사용해 보세요. 파일 시스템에서 네트워크 응답을 캐싱하고 동적 수정을 허용함으로써 수동 모의가 필요 없으며 HAR 파일에 대한 유연하고 사용하기 쉬운 대안을 제공합니다.

읽어주셔서 감사합니다 ❤️