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

10329 ワード

テキストリンク

▮Playwright

E2Eのテストフレームワークである。

allure-playwrightの仕様は以下を参照する。

▮前提条件

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

環境

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をインストールする

操作

[ターミナル]以下のコマンドを実行する。

npm i -D allure-playwright

確認

[ターミナル]以下の出力を確認する。

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でテストを実行する

操作

[ターミナル]以下のコマンドを実行する。

npx playwright test --reporter=line,allure-playwright

確認

[ターミナル]以下の出力を確認する。

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>

[エクスプローラ]allure-resultsディレクトリが作成することを確認する。

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

操作

[ターミナル]以下のコマンドを実行する。

npm i -D allure-commandline

確認

[ターミナル]以下の出力を確認する。

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より、テストレポートを作成する

操作

[ターミナル]以下のコマンドを実行する。

npx allure generate ./allure-results --clean

確認

[ターミナル]以下の出力を確認する。

PS C:\Playwright_sample> npx allure generate ./allure-results --clean
Report successfully generated to allure-report
PS C:\Playwright_sample>

[エクスプローラ]allure-reportsディレクトリ作成することを確認する。

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

操作

[ターミナル]以下のコマンドを実行する。

npx allure open ./allure-report

確認

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

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

注視すべきは以下である。
- 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

Author And Source

この問題について(Playwrightにallure-playwrightを導入してレポートを見やすくする), 我々は、より多くの情報をここで見つけました https://zenn.dev/reflex4qa/articles/01029546ab6e0e

著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。

Collection and Share based on the CC protocol

React で配列のソートや絞り込みをしたいあなたへ〜型パズルを添えて〜

thread・mutexについての覚書