🎭

Playwrightでテスト実行を動画に撮る

2022/04/17に公開

Playwright

E2E

testing

tech

▮Playwright

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

動画を撮るための設定は以下を参照する。

▮前提条件

以下を参考に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

▮ Bofre After

	Before	After
スクリーンショット

▮ 撮影される動画の仕様

webm形式である。
test('', ) 単位で撮影する。
test-resultsディレクトリが作成されてそこに保存する。
playwright-reportディレクトリには、dataディレクトリが作成されて、test('', ) に紐づけたファイルで保存する。

▮1. playwright.config.tsのuse:を変更する

操作

[エクスプローラ]playwright.config.tsを開く。
[テキストエディタ]以下の通りに、コードを 変更後 に変更する。

変更前

playwright.config.ts

 /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',
  },

変更後

video: 'on',を追加する。

playwright.config.ts

 /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
    actionTimeout: 0,
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://localhost:3000',

    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'on-first-retry',

    /* 動画を撮る */
    video: 'on',
  },

TIPS：撮影された動画を遅く見る場合には、以下の追加で対処できる。

playwright.config.ts

    /* 操作スピードを遅くする */
    launchOptions: {
      slowMo: 1000, // 操作前一秒待つ
    },

確認

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

npx playwright test

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

PS C:\Playwright_sample> npx playwright test

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

  25 passed (1m)

To open last HTML report run:

  npx playwright show-report

PS C:\Playwright_sample>

※ 以下のエラーが発生した場合には、playwright-reportがすでに存在していることが原因である。

Error in reporter Error: EPERM: operation not permitted, mkdir 'C:\Playwright_sample\playwright-report'
    at Object.mkdirSync (fs.js:921:3)
    at new HtmlBuilder (C:\Playwright_sample\node_modules\@playwright\test\lib\reporters\html.js:188:17)
    at HtmlReporter.onEnd (C:\Playwright_sample\node_modules\@playwright\test\lib\reporters\html.js:96:21)
    at Multiplexer.onEnd (C:\Playwright_sample\node_modules\@playwright\test\lib\reporters\multiplexer.js:74:45)
    at Runner.runAllTests (C:\Playwright_sample\node_modules\@playwright\test\lib\runner.js:204:5)
    at runTests (C:\Playwright_sample\node_modules\@playwright\test\lib\cli.js:194:18)
    at Command.<anonymous> (C:\Playwright_sample\node_modules\@playwright\test\lib\cli.js:83:7) {
  errno: -4048,
  syscall: 'mkdir',
  code: 'EPERM',
  path: 'C:\\Playwright_sample\\playwright-report'
}

その場合には、以下のコマンドを再度実行する。

npx playwright test

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

npx playwright show-report

[ブラウザ]ブラウザが起動して、テスト結果の表示を確認する。
[ブラウザ]New Todo › should allow me to add todo itemsをクリックする。
[ブラウザ]videosが追加したことを確認する。

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

注視は以下である。

data
test-results

C:\Playwright_sample
フォルダー パスの一覧:  ボリューム Windows
ボリューム シリアル番号は 2602-33EF です
C:.
│  .gitignore
│  package-lock.json
│  package.json
│  playwright.config.ts
├─node_modules
│  │  ...
├─playwright-report
│  │  index.html
│  │  
│  └─data
│          1a0a03652658a6c71ae36e66d578b7f5633e6499.webm
│          20223c3a345bceb8844a27d5d29adee865985fd3.webm
│          213b029205936c3d4dc5fcc60842969e4c35f3c9.webm
│          30b6cefba321bf177a06245baa20ffcbfdb8fc2e.webm
│          31eb643f7d03aa6cbcd285fb8fd9765873031ff9.webm
│          332ce194d2abe611c8e047df00a8d2a219f836d3.webm
│          3dd04bcc33840661aefb7fda6d3064bd68b04de1.webm
│          43623d93483163a9d700b55a6c4c64317f21ada4.webm
│          527564c616ee67856ec0eaea044e49990542254c.webm
│          5b0e7ad728eb574ef3a001d48add88adf9d85ec8.webm
│          64d123123bf9d41d2cf3b693e72470e8b3a7288b.webm
│          6b077493f5c599a64dae95956945afd5f5f77cee.webm
│          8709994891b75d3dd0931f10de63afd528b5553b.webm
│          895d269557881240fe5d1a839d2245ae5dc0b4ec.webm
│          a4bb2dc874641e8c312ae7bc40b3b508e42eef03.webm
│          a8c9c084892c91ca5d99ff9f14fc004ede4b20f2.webm
│          ab4e14ac074f432ddcef2ff6e94c5263a7cd5e83.webm
│          ab7f5aea9b0cd5b6a2f72f14bdd90febe9c80a18.webm
│          abd4652f4fd85366a0528c65499d56fe358f702d.webm
│          b06139a338a4ef9b882b628c3c6f07cb2b4e6426.webm
│          b7bd12919885d8a8eff662a0774b0434aa5c7b32.webm
│          b8e9064ed8509d33a87d83674e5bfc3c22a34359.webm
│          bc0b9a5bd640d1f6225b2d0b86762d7d61b67c84.webm
│          da65732d65e2ffce5cc5dacd82a92f81fc330c2b.webm
│          e1573d4289ba82e44c6cfc3d9afbe823c74120df.webm
│          
├─test-results
│  ├─example-Clear-completed-button-should-be-hidden-when-there-are-no-items-that-are-completed-chromium
│  │      video.webm
│  │      
│  ├─example-Clear-completed-button-should-display-the-correct-text-chromium
│  │      video.webm
│  │      
│  ├─example-Clear-completed-button-should-remove-completed-items-when-clicked-chromium
│  │      video.webm
│  │      
│  ├─example-Counter-should-display-the-current-number-of-todo-items-chromium
│  │      video.webm
│  │      
│  ├─example-Editing-should-cancel-edits-on-escape-chromium
│  │      video.webm
│  │      
│  ├─example-Editing-should-hide-other-controls-when-editing-chromium
│  │      video.webm
│  │      
│  ├─example-Editing-should-remove-the-item-if-an-empty-text-string-was-entered-chromium
│  │      video.webm
│  │      
│  ├─example-Editing-should-save-edits-on-blur-chromium
│  │      video.webm
│  │      
│  ├─example-Editing-should-trim-entered-text-chromium
│  │      video.webm
│  │      
│  ├─example-Item-should-allow-me-to-edit-an-item-chromium
│  │      video.webm
│  │      
│  ├─example-Item-should-allow-me-to-mark-items-as-complete-chromium
│  │      video.webm
│  │      
│  ├─example-Item-should-allow-me-to-un-mark-items-as-complete-chromium
│  │      video.webm
│  │      
│  ├─example-Mark-all-as-completed-complete-all-che-c0382-d-update-state-when-items-are-completed-cleared-chromium
│  │      video.webm
│  │      
│  ├─example-Mark-all-as-completed-should-allow-me-to-clear-the-complete-state-of-all-items-chromium
│  │      video.webm
│  │      
│  ├─example-Mark-all-as-completed-should-allow-me-to-mark-all-items-as-completed-chromium
│  │      video.webm
│  │      
│  ├─example-New-Todo-should-allow-me-to-add-todo-items-chromium
│  │      video.webm
│  │      
│  ├─example-New-Todo-should-append-new-items-to-the-bottom-of-the-list-chromium
│  │      video.webm
│  │      
│  ├─example-New-Todo-should-clear-text-input-field-when-an-item-is-added-chromium
│  │      video.webm
│  │      
│  ├─example-New-Todo-should-show-main-and-footer-when-items-added-chromium
│  │      video.webm
│  │      
│  ├─example-Persistence-should-persist-its-data-chromium
│  │      video.webm
│  │      
│  ├─example-Routing-should-allow-me-to-display-active-items-chromium
│  │      video.webm
│  │      
│  ├─example-Routing-should-allow-me-to-display-all-items-chromium
│  │      video.webm
│  │      
│  ├─example-Routing-should-allow-me-to-display-completed-items-chromium
│  │      video.webm
│  │      
│  ├─example-Routing-should-highlight-the-currently-applied-filter-chromium
│  │      video.webm
│  │      
│  └─example-Routing-should-respect-the-back-button-chromium
│          video.webm
│          
└─tests
        example.spec.ts

※node_modulesは多いので省略する。

▮Playwright

▮前提条件

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

環境

▮ Bofre After

▮ 撮影される動画の仕様

▮1. playwright.config.tsのuse:を変更する

操作

変更前

変更後

確認

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

Discussion