経緯
ある日、「遷移図を書きたいから、各画面のスクリーンショットを簡単に取れるやり方はないか？」と相談を受けました。Webサイトの画面数が多いと、手作業でのスクリーンショット取得は地味に面倒です。
PlaywrightでE2Eテストを導入していたので、そこで簡単に取れたはずと思ってやったらとても簡単に出来ました。この記事では、Playwrightを活用してスクリーンショットを取得する具体的な方法を解説します。
やり方
特定のタイミングで撮る (page.screenshot())
該当テストケース毎に表示領域のみスクリーンショットを撮る場合の書き方は以下の通り。
xxx.spec.ts
import { Page } from '@playwright/test';
test('テストケース名', async () => {
// E2Eテスト内容
await page.screenshot({ path: 'test-results/screenshot1.png' });
});
フルページで撮りたい場合はこのように書く。
xxx.spec.ts
import { Page } from '@playwright/test';
test('テストケース名', async () => {
// E2Eテスト内容
await page.screenshot({ path: 'test-results/screenshot.png2', fullPage: true });
});
全テストケースで自動取得する (TestOptions)
全テストケースで撮りたい場合はこのように書く。
必要箇所毎に書くのも大変だったのでこちらを採用した。
playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
screenshot: {
mode: 'on',
fullPage: true,
},
},
});
出力ディレクトリを変える場合はこのようにする。
デフォルトは、test-resultsディレクトリに出力される。
前章「Page」で書かれている出力ディレクトリとは異なることに注意。
playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
outputDir: './test-results/screenshot',
use: {
screenshot: {
mode: 'on',
fullPage: true,
},
},
});
まとめ
今後の拡張とか特に制限が無いのであれば、TestOptionsで設定してしまうのが手軽で良いなと思いました。見ていただいた方の参考になれば。
参考資料
Discussion