Zenn
🎭

Playwrightでテスト対象のブラウザを設定する

2022/04/17に公開
Playwright
E2E
testing
tech

▮Playwright

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

▮前提条件

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

▮Bofre After

Before After
スクリーンショット
テスト対象ブラウザ chromium、firefox、webkit chromium

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

操作

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

変更前

playwright.config.ts
  /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },

    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
      },
    },

    {
      name: 'webkit',
      use: {
        ...devices['Desktop Safari'],
      },
    },

    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: {
    //     ...devices['Pixel 5'],
    //   },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: {
    //     ...devices['iPhone 12'],
    //   },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: {
    //     channel: 'msedge',
    //   },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: {
    //     channel: 'chrome',
    //   },
    // },
  ],

変更後

playwright.config.ts
 /* Configure projects for major browsers */
  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    /* 'firefox'をテストしない */
    // {
    //   name: 'firefox',
    //   use: {
    //     ...devices['Desktop Firefox'],
    //   },
    // },
    /* 'webkit'をテストしない */
    // {
    //   name: 'webkit',
    //   use: {
    //     ...devices['Desktop Safari'],
    //   },
    // },

    /* Test against mobile viewports. */
    // {
    //   name: 'Mobile Chrome',
    //   use: {
    //     ...devices['Pixel 5'],
    //   },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: {
    //     ...devices['iPhone 12'],
    //   },
    // },

    /* Test against branded browsers. */
    // {
    //   name: 'Microsoft Edge',
    //   use: {
    //     channel: 'msedge',
    //   },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: {
    //     channel: 'chrome',
    //   },
    // },
  ],

確認

  1. [ターミナル]以下のコマンドを実行する。
npx playwright test
  1. [ターミナル]以下の出力を確認する。
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
  1. [ターミナル]以下のコマンドを実行する。
npx playwright show-report

  1. [ブラウザ]ブラウザが起動して、テスト結果の表示を確認する。

  2. [ブラウザ]New Todo › should allow me to add todo itemsをクリックする。

  3. [ブラウザ]Chromiumのみでテストが実行したことを確認する。

Discussion