npm install
npm test

npm i -D babel-plugin-istanbul

今、我々は指示する必要がありますbabel このプラグインを使用するには.詳細はフレームワークによって異なるかもしれませんが、次のために.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テストカバレッジの拡張子を使用してテストを書く

コードが計装されているので、コードカバレッジを測定する準備が整いました.このためには、この脚本プラグインをインストールする必要があります.

npm i -D playwright-test-coverage

このパッケージの輸出は脚本家のために上映するtest and 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");

  // ...
});

あなたが既存の脚本テストをするならば、単にトップの近くで以下の置き換えにおいて落してください

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

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

ステップ3：メジャーコードカバレッジ

最後に、コードカバレッジを測定する準備が整いました.
次を起動します.イスタンブールコマンドラインツールを使用したJS devサーバnyc - コードカバレッジ測定を有効にします.

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 |
----------|---------|----------|---------|---------|-------------------

包む

うまくいけば、あなたは今、次のためのコードカバレッジを測定する方法のいくつかの理解を持っている.James(または任意のバベルベースのアプリ)PlayWrightテストを実行しているとき.
ここでデモ用の完全なソースコードをチェックアウトできます.

アニシキー / PlayWrightテストカバレッジ

PlayWrightテストカバレッジ

の使用例playwright-test-coverage - エーPlaywright end - to - endテストを実行してからコード範囲を収集する拡張.

用途

NPMインストール
NPMテスト
コードカバレッジはcoverage/ フォルダ.

サンプル

許可

MIT
View on GitHub
拡張モジュールはここで入手できます.

アニシキー / 脚本テスト報道

コードカバレッジを測定するPlayWrightテストを拡張する

脚本テスト報道

エーPlaywright end - to - endテストを実行してからコード範囲を収集する拡張.コードが計装されていると仮定しますbabel-plugin-istanbul ビルド処理中.

必要条件

PlayWrightテストフレームワーク

babel-plugin-istanbul プラグイン

nyc 実行テスト

NPM I - D @ playwright/テストバベルプラグインイスタンブールニューヨーク

インストール

NPM I - D脚本テスト報道

用途

いつものようにあなたの脚本のテストを書くrequire test and expect このパッケージから次のようにします.
//テスト/foo京大理
const { test,expect } = require(“playwright testカバレッジ”);
//テストを使用し、通常通りに期待する
テスト(基本テスト)、async ({ page })=>
ページを待つ.後藤」https://playwright.dev/);
ページのタイトル.ロケーター('. Navbarstricer - inner . navbarstra - lt 'タイトル)
期待を待つtohavetext (' playwright ');
));
次に、あなたのフロントエンドのソースコードを使用してカバレッジの楽器babel-plugin-istanbul プラグイン.
最後にnyc …
View on GitHub
乾杯!