🎭

Playwrightでトレース(trace)を取得する

2022/04/20に公開

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
スクリーンショット
トレースの中身
トレースのサンプル		サンプル

▮ 取得されるトレースの仕様

以下の情報が取得できる。
- DOMのスナップショット
- ネットワークのログ
- クリックされた位置を赤点で表示
- zipで保存

▮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',
  },

変更後

trace: 'on-first-retry',をtrace: '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',
  },

確認

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

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>

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

npx playwright show-report

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

サンプル

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

注視は以下である。

data
trace
trace.zip

フォルダー パスの一覧:  ボリューム Windows
ボリューム シリアル番号は 2602-33EF です
C:.
│  .gitignore
│  package-lock.json
│  package.json
│  playwright.config.ts
│  │          
├─playwright-report
│  │  index.html
│  │  
│  ├─data
│  │      0e963e330edede2e0f6a43d6d34824470daba666.zip
│  │      1edc7dcb5ee2dddaacce405b164a5476a52d8339.zip
│  │      3313a2f80ec8e0dc12551a3a7326ae2060d3b893.zip
│  │      4191f6c33f6b5a6be77011a3dd305d6cd0313db5.zip
│  │      556028761814e1cf0e28f23fd018a21242d73ab2.zip
│  │      5780b1b7d9548051b21ed96ee0aa4b4ffea6c1e0.zip
│  │      5b87ee4b2160b5050db84f629214ffaa4c8d0c1f.zip
│  │      602fa40228b1c9f708ea6ee944b80430612780a4.zip
│  │      620c036897ecf7a5b7ffbc0115bcc59403980bae.zip
│  │      819af11a771430f74210b86595b5411df5baedee.zip
│  │      8558d6b4e204525e29be14d82d59e1f9c2a68109.zip
│  │      8efcedb3a76033d88962ae766567c5871773e826.zip
│  │      98707d218087579279bdb1fcc7ac61316cc46e51.zip
│  │      98c2a8d417795a85f79439cf0024098563e8d0e1.zip
│  │      a746e228521cda05025a3ab75a3849d551fa7d51.zip
│  │      a8bbeb4dff7d9d50cd4199abd078bfc0722f9c53.zip
│  │      c43811992c994cc429ac03d96a51a47023c2983e.zip
│  │      cce29f3bebe5175fbd68ceb6b667b086372ca495.zip
│  │      cfa6a33557cd0287f5daca0fa03d082f17d22c8b.zip
│  │      d69bbe34dba7930ceafe1711a3406409351b898a.zip
│  │      def14e44222b241003504b814a34682979634ef3.zip
│  │      e525979184517dd9d71691c7642819417b93e8af.zip
│  │      e64ee8c2aaa9a07b40f59db29680ff5c3e483851.zip
│  │      e68fa2e4f1c18b0c2ded28b20983a930fc62e48d.zip
│  │      f94131c66a7290a302f0605405e7872861aa53ed.zip
│  │      
│  └─trace
│          codicon.dcd00fb4.ttf
│          icon-16x16.png
│          icon-192x192.png
│          icon-256x256.png
│          icon-32x32.png
│          icon-384x384.png
│          icon-512x512.png
│          index.html
│          main.a5d7e729.css
│          main.ce7ea3d1.js
│          sw.bundle.js
│          
├─test-results
│  ├─example-Clear-completed-button-should-be-hidden-when-there-are-no-items-that-are-completed-chromium
│  │      trace.zip
│  │      
│  ├─example-Clear-completed-button-should-display-the-correct-text-chromium
│  │      trace.zip
│  │      
│  ├─example-Clear-completed-button-should-remove-completed-items-when-clicked-chromium
│  │      trace.zip
│  │      
│  ├─example-Counter-should-display-the-current-number-of-todo-items-chromium
│  │      trace.zip
│  │      
│  ├─example-Editing-should-cancel-edits-on-escape-chromium
│  │      trace.zip
│  │      
│  ├─example-Editing-should-hide-other-controls-when-editing-chromium
│  │      trace.zip
│  │      
│  ├─example-Editing-should-remove-the-item-if-an-empty-text-string-was-entered-chromium
│  │      trace.zip
│  │      
│  ├─example-Editing-should-save-edits-on-blur-chromium
│  │      trace.zip
│  │      
│  ├─example-Editing-should-trim-entered-text-chromium
│  │      trace.zip
│  │      
│  ├─example-Item-should-allow-me-to-edit-an-item-chromium
│  │      trace.zip
│  │      
│  ├─example-Item-should-allow-me-to-mark-items-as-complete-chromium
│  │      trace.zip
│  │      
│  ├─example-Item-should-allow-me-to-un-mark-items-as-complete-chromium
│  │      trace.zip
│  │      
│  ├─example-Mark-all-as-completed-complete-all-che-c0382-d-update-state-when-items-are-completed-cleared-chromium
│  │      trace.zip
│  │      
│  ├─example-Mark-all-as-completed-should-allow-me-to-clear-the-complete-state-of-all-items-chromium
│  │      trace.zip
│  │      
│  ├─example-Mark-all-as-completed-should-allow-me-to-mark-all-items-as-completed-chromium
│  │      trace.zip
│  │      
│  ├─example-New-Todo-should-allow-me-to-add-todo-items-chromium
│  │      trace.zip
│  │      
│  ├─example-New-Todo-should-append-new-items-to-the-bottom-of-the-list-chromium
│  │      trace.zip
│  │      
│  ├─example-New-Todo-should-clear-text-input-field-when-an-item-is-added-chromium
│  │      trace.zip
│  │      
│  ├─example-New-Todo-should-show-main-and-footer-when-items-added-chromium
│  │      trace.zip
│  │      
│  ├─example-Persistence-should-persist-its-data-chromium
│  │      trace.zip
│  │      
│  ├─example-Routing-should-allow-me-to-display-active-items-chromium
│  │      trace.zip
│  │      
│  ├─example-Routing-should-allow-me-to-display-all-items-chromium
│  │      trace.zip
│  │      
│  ├─example-Routing-should-allow-me-to-display-completed-items-chromium
│  │      trace.zip
│  │      
│  ├─example-Routing-should-highlight-the-currently-applied-filter-chromium
│  │      trace.zip
│  │      
│  └─example-Routing-should-respect-the-back-button-chromium
│          trace.zip
│          
└─tests
        example.spec.ts

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

▮Playwright

▮前提条件

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

環境

▮ Bofre After

▮ 取得されるトレースの仕様

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

操作

変更前

変更後

確認

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

Discussion