playwrightでE2Eテスト

はじめに

こんばんは。

最近 playwright というテストツールを使って E2Eテストを触っています。

設定はとてもかんたんだったので、備忘録として残しておきます。

playwright.dev

本番

install

playwrightのインストール

$ npm i -D @playwright/test

ブラウザのインストール

$ npx playwright install --with-deps ← chrome, safari, firefox
$ npx playwright install msedge        ← microsoft edge

テストコード

import { test, expect } from '@playwright/test'

test.describe('ユーザープロフィールページ', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto(`/user/1`)
  })

  test('名前が表示されている', async ({ page }) => {
    const name = await page.locator(`.profile-block .name`)
    await expect(name).toContainText('kojirock')
  })

  test('名前が変更できる', async ({ page }) => {
    const name = await page.locator(`.profile-block .name`)
    await page.fill(".name-form", 'kojirock-edit')
    await page.click('.save-button')
    await page.waitForTimeout(1000) // 雑に1秒まつ

    const name = await page.locator(`.profile-block .name`)
    await expect(name).toContainText('kojirock-edit')
  })
})

実行

$ playwright test

Running 8 tests using 1 worker
········

  8 passed (1m)
Done in 30.10s.

テストが2個なのになんで8回実行されているのかは 設定ファイルを見ればわかります。

設定ファイル(project部分のみ抜粋)

  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
    {
      name: 'webkit',
      use: {
        ...devices['Desktop Safari'],
      },
    },
    {
      name: 'Microsoft Edge',
      use: {
        channel: 'msedge',
      },
    },
    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
      },
    },
  ]

ブラウザ4種類でテストケース2個を実行しているから 4 * 2で8回実行されているという感じです。

設定ファイルは他にも細かに設定できます。

1. テスト実行時に同時にサーバを立ち上げたいとき

  webServer: {
    command: 'yarn dev', ← 任意のコマンド
    url: 'http://localhost:3300', ← 任意のURL
    reuseExistingServer: !process.env.CI,
  }

2. テスト実行時にログイン状態にしたい

  globalSetup: './global-setup',
  use: {
    storageState: './cache/storageState.json',
  },

import { chromium, FullConfig } from '@playwright/test'

async function globalSetup(config: FullConfig): Promise<void> {
  const browser = await chromium.launch()
  const page = await browser.newPage()

  await page.goto('http://localhost:3300/login')
  await page.fill("input[name='email']", 'example@example.com')
  await page.fill("input[name='password']", 'passwordpassword')
  await Promise.all([page.waitForNavigation(), page.click('.button')])

  await page.context().storageState({ path: '.cache/storageState.json' })
  await browser.close()
}

export default globalSetup

終わりに

なかなか楽しいです。

CIで実行するときや、VRT(Visual Regression Testing)というスナップショットテストもできるみたいなので、今後また試してみます。

現場からは以上です。