npm install
npm test

npm i -D babel-plugin-istanbul

이제 이 플러그인을 사용하도록 지시babel해야 합니다. 세부사항은 프레임워크에 따라 다를 수 있지만 Next.js 앱의 경우 루트 폴더에 babel.config.js라는 파일을 생성합니다.

// babel.config.js
const plugins = [];

// Instrument for code coverage in development mode
if (process.env.NODE_ENV === "development") {
  console.log(
    "Detected development environment. Instrumenting code for coverage."
  );
  plugins.push("istanbul");
}

module.exports = {
  presets: ["next/babel"],
  plugins,
};

이는 개발 모드에서만 코드를 계측합니다. 실행할 때next dev . 계측이 프로덕션 코드를 어지럽히는 것을 원하지 않기 때문에 좋습니다.

2단계: playwright-test-coverage 확장 프로그램을 사용하여 테스트 작성

이제 코드가 계측되었으므로 코드 검사를 측정할 준비가 되었습니다. 이를 위해서는 이 Playwright 플러그인을 설치해야 합니다.

npm i -D playwright-test-coverage

이 패키지는 코드 적용 범위 측정을 올바르게 처리하는 Playwright의 test 및 expect 메서드에 대한 재정의를 내보냅니다.

// tests/app.spec.js
const { test, expect } = require("playwright-test-coverage");

test("basic test", async ({ page }) => {
  // Use Playwright as usual
  await page.goto("http://localhost:3000");
  await expect(title).toHaveText("Title");

  // ...
});

기존 Playwright 테스트가 있는 경우 상단 근처에 다음 대체 항목을 드롭하기만 하면 됩니다.

// Replace this:
const { test, expect } = require("@playwright/test");

// With this:
const { test, expect } = require("playwright-test-coverage");

3단계: 코드 커버리지 측정

마지막으로 코드 검사를 측정할 준비가 되었습니다.

코드 적용 범위 측정을 가능하게 하는 Istanbul 명령줄 도구nyc를 사용하여 Next.js 개발 서버를 시작합니다.

npx nyc next dev

그런 다음 다른 터미널 창에서 평소와 같이 극작가 테스트를 실행합니다.

npx playwright test

모든 것이 순조롭게 진행되면 다음과 유사한 코드 검사 보고서가 표시됩니다.

Running 1 test using 1 worker

  ✓  tests/app.spec.js:5:1 › basic test (1s)


  1 passed (2s)
----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s
----------|---------|----------|---------|---------|-------------------
All files |     100 |      100 |     100 |     100 |
 index.js |     100 |      100 |     100 |     100 |
----------|---------|----------|---------|---------|-------------------

마무리

이제 Playwright 테스트를 실행할 때 Next.js(또는 Babel 기반) 앱의 코드 범위를 측정하는 방법을 어느 정도 이해하셨기를 바랍니다.

여기에서 데모의 전체 소스 코드를 확인할 수 있습니다.

아니쉬크니 / 극작가-테스트-커버리지-데모

극작가 테스트 커버리지 데모

playwright-test-coverage - 종단 간 테스트 실행에서 코드 적용 범위를 수집하는 Playwright 확장의 사용법을 보여줍니다.

용법

npm install
npm test

코드 커버리지는 coverage/ 폴더에 생성되어야 합니다.

견본

특허

MIT


View on GitHub


확장 코드는 여기에서 사용할 수 있으며 기여/문제는 환영합니다.

아니쉬크니 / 극작가 테스트 범위

Playwright 테스트를 확장하여 코드 커버리지 측정

극작가 테스트 범위

종단 간 테스트 실행에서 코드 검사를 수집하는 확장Playwright입니다. 빌드 프로세스 중에 코드가 babel-plugin-istanbul으로 계측되었다고 가정합니다.

전제 조건

극작가 테스트 프레임워크

babel-plugin-istanbul 플러그인

nyc 테스트 실행용

npm i -D @playwright/test babel-plugin-istanbul nyc

설치

npm i -D playwright-test-coverage

용법

다음과 같이 이 패키지에서 require test 및 expect를 제외하고 평소대로 Playwright 테스트를 작성합니다.

// tests/foo.spec.js
const { test, expect } = require("playwright-test-coverage");

// Use test and expect as usual
test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

그런 다음 babel-plugin-istanbul 플러그인을 사용하여 적용 범위에 대한 프런트 엔드 소스 코드를 계측합니다.
마지막으로 nyc를 통해 서버를 실행합니다.

View on GitHub

건배!