AngularアプリをPlaywrightテストしてカバレッジを計測する（webpack + istanbul編）

$ ng new NgPlaywrightCoverageIstanbul
$ cd NgPlaywrightCoverageIstanbul
$ ng g c page1
$ ng g c page2

<p>page1 works!</p>
<button (click)="doSomethingOnPage1()">do something on page1</button>
<p id="result">{{ message }}</p>

import { Component } from '@angular/core';

@Component({
    selector: 'app-page1',
    templateUrl: './page1.component.html',
    styleUrls: ['./page1.component.scss'],
})
export class Page1Component {
    message = '';

    doSomethingOnPage1() {
        this.message = 'something on page1 done.';
    }
}

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';

const routes: Routes = [
    { path: 'page1', component: Page1Component },
    { path: 'page2', component: Page2Component },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

<p><a routerLink="page1">page1</a></p>
<p><a routerLink="page2">page2</a></p>

<router-outlet></router-outlet>

% npx ng serve --open
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.35 MB | 
polyfills.js          | polyfills     | 332.10 kB | 
styles.css, styles.js | styles        | 229.84 kB | 
main.js               | main          |  12.25 kB | 
runtime.js            | runtime       |   6.55 kB | 

                      | Initial Total |   2.92 MB

Build at: 2024-08-03T09:21:05.618Z - Hash: ba3e31f983dd4052 - Time: 1953ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

$ npm init playwright@latest
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
? Where to put your end-to-end tests? ・ e2e
? Add a GitHub Actions workflow? (y/N) ・ false
? Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) ・ true
Installing Playwright Test (npm install --save-dev @playwright/test)…

added 4 packages, and audited 1026 packages in 3s

（snip）

import { test, expect } from '@playwright/test';

test('page1 test', async ({ page }) => {
    await page.goto('http://localhost:4200/');
    await page.getByRole('link', { name: 'page1' }).click();
    await page.getByRole('button', { name: 'do something on page1' }).click();
    await expect(page.locator('#result')).toHaveText(
        'something on page1 done.'
    );
});

test('page2 test', async ({ page }) => {
    await page.goto('http://localhost:4200/');
    await page.getByRole('link', { name: 'page2' }).click();
    await page.getByRole('button', { name: 'do something on page2' }).click();
    await expect(page.locator('#result')).toHaveText(
        'something on page2 done.'
    );
});

% npx playwright test --project chromium

Running 2 tests using 2 workers
  2 passed (963ms)

To open last HTML report run:

  npx playwright show-report

$ npm install ngx-build-plus@16 -D // 使っているAngularのバージョンに合わせる
$ npm install babel-plugin-istanbul -D

            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                         ↓（変更）
                    "builder": "ngx-build-plus:browser”,

                  （中略）

                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",
                         ↓（変更）
                    "builder": "ngx-build-plus:dev-server",

module.exports = {
    module: {
        rules: [
            {
                test: /\.(ts)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        plugins: ["babel-plugin-istanbul"],
                    },
                },
                enforce: "post",
                include: require("path").join(__dirname, "src"),
                exclude: [/node_modules/, /(ngfactory|ngstyle)\.js/],
            },
        ],
    },
};

% npx ng serve --extra-webpack-config coverage.webpack.js
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.35 MB | 
polyfills.js          | polyfills     | 332.10 kB | 
styles.css, styles.js | styles        | 229.84 kB | 
main.js               | main          |  56.07 kB | 
runtime.js            | runtime       |   6.55 kB | 

                      | Initial Total |   2.96 MB

Build at: 2024-08-03T10:04:14.744Z - Hash: ba8e7e111aef8481 - Time: 1047ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

// ng serve
main.js               | main          |  12.25 kB | 

// ng serve --extra-webpack-config coverage-webpack.js
main.js               | main          |  56.07 kB | 

import { test as baseTest } from '@playwright/test';
import * as crypto from 'crypto';
import * as fs from 'fs';
import * as path from 'path';

// nyc（istanbulのCLI）がカバレッジ集計対象とするデフォルトディレクトリに出力（/.nyc_output）
const istanbulCLIOutput = path.join(process.cwd(), '.nyc_output');

// 1testケース毎のファイル名ランダムパート
const generateUUID = () => crypto.randomBytes(16).toString('hex');

// playwrightのtest関数を拡張してexport
export const test = baseTest.extend({
    context: async ({ context }, use) => {
        await context.addInitScript(() => {
            window.addEventListener('beforeunload', () =>
                (window as any).collectIstanbulCoverage(
                    JSON.stringify((window as any)['__coverage__'])
                )
            );
        });
        await fs.promises.mkdir(istanbulCLIOutput, { recursive: true });
        await context.exposeFunction(
            'collectIstanbulCoverage',
            (coverageJSON: string) => {
                if (coverageJSON) {
                    fs.writeFileSync(
                        path.join(
                            istanbulCLIOutput,
                            `playwright_coverage_${generateUUID()}.json`
                        ),
                        coverageJSON
                    );
                }
            }
        );
        await use(context);
        for (const page of context.pages()) {
            await page.evaluate(() =>
                (window as any).collectIstanbulCoverage(
                    JSON.stringify((window as any)['__coverage__'])
                )
            );
        }
    },
});

export const expect = test.expect;

// import { test, expect } from '@playwright/test';
import { test, expect } from './base-fixture';

$ npx playwright test --project chromium

% ls .nyc_output 
playwright_coverage_b57d16104864848d5bae043151d19e1c.json	
playwright_coverage_b8b4823a9c3d88da6d943bcb94a57cd8.json

% npm i -D nyc source-map-support ts-node @istanbuljs/nyc-config-typescript

{
    "extends": "@istanbuljs/nyc-config-typescript",
    "all": true,
    "report-dir": "coverage-e2e",
    "exclude": ["**/coverage/**", "**/*.spec.ts"],
    "reporter": ["html", "lcov", "text-summary", "text"]
}

% npx nyc report  

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

/* istanbul ignore next */
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

    "fnMap": {
      "0": {                         ← playwrightのlcov
        "name": "(anonymous_40)",    ← constructor（モジュール内で40番目の関数）
        "decl": {
          "start": {
            "line": 103,
            "column": 4
          },
          "end": {
            "line": 103,
            "column": null
          }
        },

(snip)

      "16": {                       ← jestのlcov
        "name": "(anonymous_0)",    ← constructor（単体ファイルで0番目の関数）
        "decl": {
          "start": {
            "line": 103,
            "column": 4
          },
          "end": {
            "line": 103,
            "column": null
          }
        },