Zenn
🎭

Playwrightにallure-playwrightを導入してレポートを見やすくする

2022/05/05に公開
Playwright
E2E
testing
allure
allureplaywright
tech

▮Playwright

E2Eのテストフレームワークである。
https://playwright.dev/

allure-playwrightの仕様は以下を参照する。
https://playwright.dev/docs/test-reporters#third-party-showcase

https://www.npmjs.com/package/allure-playwright

▮前提条件

以下を参考にPlaywright Test for VSCodeを導入済

https://zenn.dev/reflex4qa/articles/e59f77b5c58d15

環境

  • VS code： 1.66.2 (user setup)
  • Node.js: 16.13.0
  • OS: Windows_NT x64 10.0.18363
  • Playwright： Version: 1.21
  • Playwright Test for VSCode： v0.2.3
  • allure： 2.17.2
  • allure-playwright： 2.0.0-beta.16
  • allure-commandline 2.17.2

▮ Bofre After

Before After

▮1. allure-playwrightをインストールする

操作

  1. [ターミナル]以下のコマンドを実行する。
npm i -D allure-playwright

確認

  1. [ターミナル]以下の出力を確認する。
PS C:\Playwright_sample> npm i -D allure-playwright
npm WARN Playwright_sample@1.0.0 No description
npm WARN Playwright_sample@1.0.0 No repository field.

+ allure-playwright@2.0.0-beta.16
added 5 packages from 3 contributors and audited 195 packages in 18.499s

18 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

PS C:\Playwright_sample>

2. allure-playwrightでテストを実行する

操作

  1. [ターミナル]以下のコマンドを実行する。
npx playwright test --reporter=line,allure-playwright

確認

  1. [ターミナル]以下の出力を確認する。
PS C:\Playwright_sample> npx playwright test --reporter=line,allure-playwright

Running 25 tests using 1 worker
  Slow test file: [chromium] › example.spec.ts (1m)
  Consider splitting slow test files to speed up parallel execution

  25 passed (1m)
PS C:\Playwright_sample>
  1. [エクスプローラ]allure-resultsディレクトリが作成することを確認する。

3. allure-commandlineをインストールする。

操作

  1. [ターミナル]以下のコマンドを実行する。
npm i -D allure-commandline

確認

  1. [ターミナル]以下の出力を確認する。
PS C:\Playwright_sample> npm i -D allure-commandline
npm WARN Playwright_sample@1.0.0 No description
npm WARN Playwright_sample@1.0.0 No repository field.

+ allure-commandline@2.17.2
added 1 package and audited 196 packages in 10.294s

18 packages are looking for funding
  run `npm fund` for details
    
found 0 vulnerabilities

PS C:\Playwright_sample>

4. allure-resultsより、テストレポートを作成する

操作

  1. [ターミナル]以下のコマンドを実行する。
npx allure generate ./allure-results --clean

確認

  1. [ターミナル]以下の出力を確認する。
PS C:\Playwright_sample> npx allure generate ./allure-results --clean
Report successfully generated to allure-report
PS C:\Playwright_sample>
  1. [エクスプローラ]allure-reportsディレクトリ作成することを確認する。

5. allureのレポートサーバを立ち上げる。

操作

  1. [ターミナル]以下のコマンドを実行する。
npx allure open ./allure-report

確認

  1. [ブラウザ]以下の出力を確認する。
  2. [ブラウザ]FEATURES BY STORIESのShow allをクリックする。
  3. [ブラウザ]以下の出力を確認する。

今回の変更後のファイル構成

  • 注視すべきは以下である。
    • allure-report
    • allure-results
フォルダー パスの一覧:  ボリューム Windows
ボリューム シリアル番号は 2602-33EF です
C:.
│  .gitignore
│  package-lock.json
│  package.json
│  playwright.config.ts
│  
├─allure-report
│  ...
│  
├─allure-results
│  ... 
├─node_modules
│  ...     
├─playwright-report
│      index.html
│      
└─tests
        example.spec.ts

Discussion