@playwright/test Tips集
aokikenセッションを再利用する
管理画面側の操作を行いたい場合に、毎回コード側でログインするのは時間がかかる
そういった場合にはstorageStateを利用すると便利
以下のコマンドを実行し、ログイン完了後にブラウザを閉じるとstate.jsonが生成される
CIでE2Eテストを実行するときなんかは、globalSetupでログインしたいユーザー毎にstorageStateで利用するデータを作るのがよさそう
$ npx playwright open https://zenn.dev --save-storage=state.json
storageStateで利用する
import {test} from '@playwright/test'
test.use({
storageState: 'state.json'
})
test('zenn', async ({page}) => {
await page.goto('https://zenn.dev/')
await page.pause()
})
playwright codegenで利用する
codegenするときにも便利
$ npx playwright codegen https://zenn.dev --load-storage=state.json
関連記事
aokikenconsole errorを検出する
test(`pageerrorの検出テスト`, async ({ page }) => {
const pageErrors = []
page.on('pageerror', exception => pageErrors.push(exception))
await page.goto('https://zenn.dev/')
expect(pageErrors).toMatchObject([])
})
関連記事
aokikenいろんなテストコード見てみたい
https://playwright.dev/ を見てて、どう使うんだろうとか思うことがあったら https://github.com/microsoft/playwright/find/main でspec.tsとか検索するとヒットすることがある
aokikenとりあえず動かしてみる
$ yarn create playwright
いくつかの回答済ませると以下のファイルが追加されるのでe2eとかdirectory作って置いて試すのが良いと思う
playwright.config.ts
package.json
yarn.lock
tests/
example.spec.ts
tests-examples/
demo-todo-app.spec.ts
$ npx playwright test
playwright.config.tsのtestDirをtests-examplesに書き換えるとそちらのテストも試す事ができる
以下サンプルレポート
関連記事
aokikenHTML Reporter
playwright.config.tsを修正する必要があるが、以下のオプションを追加するとレポートがリッチになる
毎回生成されると容量を食うので使い所は限られているが、知っておくと便利かもしれない
video: 'on'
webmのフォーマットで記録される
どこかにホスティングしててもiPhoneでは見れないので悲しい
await page.pause()
で停止していても記録してくれる
trace: 'on'
testコードの実行毎にconsoleにlogが出ていたか、どういう通信が行われていたのかなどを詳細に確認することができる
レポート結果をS3にcp, syncし、CloudFront経由でアクセスする
Lambda@Edge を使って OpenID Connect認証すればセキュアにアクセスすることができる
CIで実行した際や、ローカル実行し、結果を共有するのに便利
関連記事
aokikenVisual Regression Testing
playwrightのドキュメントタイトルはVisual comparisonsとある
ピクセルマッチで差分がないか検証してくれる
import { test, expect } from '@playwright/test';
test('example test', async ({ page }) => {
await page.goto('https://zenn.dev/');
await expect(page).toHaveScreenshot({fullPage: true, scale: 'device', animations: 'disabled'})
});
fullPageでのスクリーンショットは画面幅を操作して取得しているのか、CSS Media QueryとCSS animationの組み合わせ次第では実行ごとに差分が生まれてFlakyなテストになり得たりする
ciで実行する場合には日本語フォントを入れる必要があったり、local実行と併用する場合にはdockerで同じ環境用意してあげるなど工夫がいる
要素単位で検証する
import { test, expect } from '@playwright/test';
test('example test', async ({ page }) => {
await page.goto('https://zenn.dev/');
await expect(page.locator('[class^="AppHeader_header__"]')).toHaveScreenshot({scale: 'device', animations: 'disabled'})
});
fullPageで取りづらい場合がある際には要素単位で検証することを検討してみる
関連記事
aokikenroute.fulfillを使ってresponseを書き換える
未実装のAPIや、ビジュアルリグレッションテストの際に、responseをコントロールすることで開発に役立てられる
await page.route('**/xhr_endpoint', route => route.fulfill({ path: 'mock_data.json' }));
関連記事
aokiken実行環境に応じてconfigを切り替える
ci用とか、調査用にvideoやtraceをonにしたものとか
$ npx playwright test -c playwright.ci.config.ts
$ npx playwright test -c playwright.trace.config.ts
import config from './playwright.config'
import { PlaywrightTestConfig } from '@playwright/test'
export default {
...config,
use: {
...config.use,
video: 'on',
trace: 'on',
}
} as PlaywrightTestConfig
関連記事
aokikenheadedで実行する
$ npx playwright test --headed
$ PWDEBUG=console npx playwright test
debugで実行する
ステップ実行することができる
$ npx playwright test --debug
$ PWDEBUG=1 npx playwright test
headed, debugどちらも await page.pause()が使えるようになる
関連記事
aokikenセレクターを指定する際の工夫
codegen, recordで生成したらText selectorで作られる
CSS Modulesなどhash値がついたclassなどは
await page.locator('[class^="UserMenu_name"]')
のようにすれば取得することが可能
playwright-inspector
Exploreを選択し、要素にclickするとセレクターを取得することができる
Exploreのinputに指定したいセレクターを書き込むと検証することもできる
関連記事
aokikenリリースを追いかける
slackで以下のコマンドから拾っている
/feed https://github.com/microsoft/playwright/releases.atom
youtubeチャンネル
YouTubeのvideoIDが不正です マイナーバージョンアップ以上を目処に更新している
aokiken任意のJavaScriptを実行する
const href = await page.evaluate(() => document.location.href);
関連記事
aokikenネットワークエラーをを検出する
page.on('requestfailed', request => {
console.log();
});
test(`pageerrorの検出テスト`, async ({ page }) => {
const requestfaileds = []
page.on('requestfailed', request => requestfaileds.push(`${request.url()} ${request.failure().errorText}`))
await page.goto('https://zenn.dev/')
expect(requestfaileds).toMatchObject([])
})
関連記事