はじめに
こんばんは。
最近 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)というスナップショットテストもできるみたいなので、今後また試してみます。
現場からは以上です。