Playwright HTML 보고서에 메타데이터 표시: 전체 가이드

Playwright는 강력한 테스트 프레임워크이지만 HTML 보고서는 복잡한 프로젝트의 기본으로 느껴질 수 있습니다. 커밋 메시지, 작성자 세부 정보, CI 빌드 링크 등의 메타데이터를 보고서 헤더에 바로 표시하면 좋지 않을까요? 이를 달성하는 방법과 Playwright의 역량에 대한 더 깊은 통찰력은 다음과 같습니다.

극작가 메타데이터 이해

Playwright 문서에는 구성을 위한 메타데이터 필드가 언급되어 있습니다.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  metadata: 'acceptance tests',
});

작성 시점(Playwright v1.49)에는 다음과 같이 명시되어 있습니다.

JSON으로 직렬화된 테스트 보고서에 직접 포함될 메타데이터

하지만 문제가 있습니다. 이 구성을 추가하면 보고서에 메타데이터가 표시되지 않습니다. TypeScript를 사용하는 경우 제공된 예제에 대한 오류도 표시됩니다.

'문자열' 유형은 '메타데이터' 유형에 할당할 수 없습니다.

분명히 문서는 오래되었지만 보고서의 메타데이터는 실제로 가능합니다.

실제 메타데이터 구성

Playwright의 소스 코드를 자세히 살펴본 후 HTML 보고서에서 지원하는 실제 필드를 발견했습니다.

export type Metainfo = {
  'revision.id'?: string;
  'revision.author'?: string;
  'revision.email'?: string;
  'revision.subject'?: string;
  'revision.timestamp'?: number | Date;
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number;
};

이 필드만 표시할 수 있습니다. playwright.config.ts에서 구성해 보겠습니다.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
  metadata: {
    'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
    'revision.author': 'John Smith',
    'revision.email': 'john.smith@gmail.com',
    'revision.subject': 'Acceptance tests',
    'revision.timestamp': Date.now(),
    'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
    'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
    'timestamp': Date.now(),
  },
});

테스트를 실행한 후 HTML 보고서 헤더에 이 메타데이터가 보기 좋게 표시됩니다.

메타데이터 채우기 자동화

메타데이터 필드를 수동으로 채우는 것은 특히 CI/CD 파이프라인과 같은 동적 환경에서는 실용적이지 않습니다. 이 프로세스를 자동화하면 수동 작업 없이도 정확하고 일관된 메타데이터가 보장됩니다.

타사 패키지

프로세스를 자동화하려면 Git 커밋 정보를 추출하는 타사 패키지를 활용할 수 있습니다. 이는 간단한 접근 방식이므로 더 흥미로운 두 번째 옵션으로 넘어가겠습니다.

극작가의 숨겨진 플러그인 시스템 활용

Playwright에 대한 가장 흥미로운 발견 중 하나는 숨겨진 플러그인 시스템입니다. 공식적으로 문서화되지는 않았지만 사용자 정의 플러그인을 통해 Playwright의 기능을 확장하는 방법을 제공합니다.

극작가 자체의 시험대를 보면서 이런 통찰을 얻었습니다. Playwright는 플러그인을 정의할 수 있는 숨겨진 구성 필드 "@playwright/test"를 지원합니다.

다음은 gitCommitInfo 플러그인을 활성화하는 예입니다.

import { defineConfig } from '@playwright/test';
import { gitCommitInfo } from 'playwright/lib/plugins';

export default defineConfig({
  reporter: 'html',
  // @ts-expect-error
  '@playwright/test': { 
    plugins: [gitCommitInfo()] 
  },
});

gitCommitInfo 플러그인은 무엇을 합니까?

이 플러그인은 Git 커밋 세부 정보를 추출하고 다음을 포함하여 HTML 보고서의 메타데이터 필드를 채웁니다.

• 해시 커밋
• 커밋 메시지
• 저자 이름 및 이메일
• 타임스탬프

또한 CI/CD 환경에서 실행되는 경우 플러그인은 GITHUB_SHA 또는 CI_COMMIT_SHA와 같은 표준 환경 변수를 사용하여 필드를 자동으로 채울 수 있습니다.

플러그인을 활성화하고 테스트를 실행한 후 자동으로 채워진 메타데이터가 포함된 다음 보고서를 받았습니다.

기타 플러그인

Playwright에 다른 숨겨진 플러그인이 있는지 궁금합니다.
플러그인 디렉토리에는 webServerPlugin이라는 플러그인이 하나만 더 있습니다. 테스트를 실행할 때 내장된 웹 서버를 시작하고 중지할 수 있습니다. 실제로 config.webServer 옵션을 정의하면 이 플러그인이 내부적으로 사용됩니다. 따라서 플러그인 시스템은 Playwright 내부적으로 사용되지만 공개적으로 사용하도록 문서화되지는 않았습니다.

플러그인 시스템은 이전 버전의 Playwright에 도입되었으나, 어느 시점에서 숨겨져 있었습니다. 아쉽게도 현재로서는 공개할 계획이 없습니다.

메타데이터에 대한 사용자 정의 함수 사용

플러그인을 사용하지 않고 메타데이터를 자동으로 채우려면 맞춤 기능을 사용하면 됩니다. gitCommitInfo 플러그인의 gitStatusFromCLI() 함수를 조정하여 독립적으로 사용할 수 있게 만들었습니다.

import { defineConfig } from '@playwright/test';

export default defineConfig({
  metadata: 'acceptance tests',
});

Playwright 구성에서 메타데이터를 채우는 기능 사용:

export type Metainfo = {
  'revision.id'?: string;
  'revision.author'?: string;
  'revision.email'?: string;
  'revision.subject'?: string;
  'revision.timestamp'?: number | Date;
  'revision.link'?: string;
  'ci.link'?: string;
  'timestamp'?: number;
};

테스트를 실행한 후 메타데이터가 채워진 동일한 HTML 보고서를 얻었습니다.

이 접근 방식을 사용하면 내부 Playwright 기능에 의존하지 않고 메타데이터 자동화를 완벽하게 제어할 수 있습니다.

병렬 테스트 최적화

모든 것이 좋아 보이지만 위 코드에는 성능 문제가 있습니다. 무엇이 문제인지 짐작할 수 있나요?

극작가는 근로자를 대상으로 테스트를 진행합니다. 각 작업자가 시작되면 Playwright 구성을 가져옵니다. Playwright 구성이 과도한 작업(예: Git 데이터 가져오기)을 수행하면 작업자 속도가 느려집니다. 또한 명령을 여러 번 실행하면 동일한 결과가 반환되므로 의미가 없습니다.

메인 워커에서만 메타데이터 기능을 실행하여 최적화할 수 있습니다. 기본 작업자는 빈 TEST_WORKER_INDEX 환경 변수로 감지할 수 있습니다:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: 'html',
  metadata: {
    'revision.id': 'adcb0c51debdbe96a6a836e2ead9d40a859f6438',
    'revision.author': 'John Smith',
    'revision.email': 'john.smith@gmail.com',
    'revision.subject': 'Acceptance tests',
    'revision.timestamp': Date.now(),
    'revision.link': 'https://github.com/microsoft/playwright/pull/12734',
    'ci.link': 'https://github.com/microsoft/playwright/actions/workflows/tests_primary.yml',
    'timestamp': Date.now(),
  },
});

이렇게 하면 성능에 영향을 주지 않고 메타데이터가 효율적으로 채워집니다.

---

결론

잘 문서화되어 있지는 않지만 Playwright HTML 보고서에 메타데이터를 추가하는 것이 가능합니다. 메타데이터를 수동으로 구성하거나, 숨겨진 플러그인 시스템을 활용하거나, 맞춤형 솔루션을 구현할 수 있습니다.

주요 시사점:

• 메타데이터 필드는 특정 키(revision.id, ci.link 등)로 제한됩니다.
• Playwright의 숨겨진 플러그인이나 사용자 정의 스크립트를 사용하여 메타데이터를 자동화하세요.
• 메인 워커에서만 메타데이터 로직을 실행하여 병렬 테스트에 최적화하세요.

기사에 대한 조사를 바탕으로 Playwright 저장소에 풀 요청을 열어 메타데이터 필드에 대한 문서 개선을 제안했습니다.

Playwright 보고서에 메타데이터를 추가해 보셨나요? 여러분의 경험이나 어려움을 댓글로 공유해주세요!

위 내용은 Playwright HTML 보고서에 메타데이터 표시: 전체 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!