はじめに
プロトタイプ開発やアジャイル開発で
「画面の変更があって開発したから実際の画面キャプチャの素材を採取したい！」
場面ってありますよね。
そんな場面に備えて自動化ツール「Playwright」を使い
画面キャプチャーを採取できるようにしてみました。
ローカル環境で開発中の画面イメージを
ボタンひとつでまとめて採取しちゃいましょう📷
前提
・Playwrightが動かせる環境になっていること
・VS CodeにPlaywrightの拡張が導入済みであること
・ブラウザでキャプチャ対象のページを開けること
変更を適用する
Playwrightをインストールした時点でのソースに下記を加えていきます。
ファイル構成
インストール時点でのファイル構成は部分的に記載しています。
★のついているファイル・ディレクトリを新規作成してください。
playwright
└ node_modules/
└ playwright-report/
└ screenshots/ ★ディレクトリを新規作成
└ test-results/
└ tests/
└ example.spec.ts
└ screenshots.spec.ts ★ファイルを新規作成
└ .gitignore
└ config.ts ★ファイルを新規作成
└ package.json
└ package-lock.json
└ playwright.config.ts
screenshots.spec.ts
import { test, expect } from '@playwright/test';
import {config} from "../config";
const timestamp = new Date().toISOString().replace(/[-:]/g, '').replace(/\..+/, '');
test.use(config.initialize);
/**
* ログイン不要画面のスクリーンショットテスト
*/
test('Guests Screen Shots ', async ({ page }) => {
const screens = config.roles.guests.screens;
let counter = 1;
for (const screenName in screens) {
const screen = screens[screenName];
await page.goto(config.apiUrl + screen.path);// 画面へ遷移
if(screen.operate){
screen.operate(page); // 画面固有の操作があれば実行
}
// スクリーンショット取得
// インデックス番号付きで保存
await page.screenshot({ path: `screenshots/${timestamp}/guests/${counter.toString().padStart( 4, '0')}_${screen.name}.png`, fullPage: true });
counter++;
}
});
/**
* ロール系画面のスクリーンショットテスト
*/
test('Authorized Screen Shots ', async ({ page }) => {
const screensByRoles = config.roles;
delete screensByRoles.guests;
// 各ロールごとに処理
for (const roleName in screensByRoles) {
const screens = screensByRoles[roleName].screens;
const auth = config.roles[roleName].auth;
// ログイン処理
await page.goto(config.apiUrl + auth.loginEndpoint);
await auth.login(page);
let counter = 1;
for (const screenName in screens) {
const screen = screens[screenName];
await page.goto(config.apiUrl + screen.path);// 画面へ遷移
if(screen.operate){
await screen.operate(page); // 画面固有の操作があれば実行
}
// スクリーンショット取得
// インデックス番号付きで保存
await page.screenshot({ path: `screenshots/${timestamp}/authorized/${roleName}/${counter.toString().padStart( 4, '0')}_${screen.name}.png`, fullPage: true });
counter++;
}
}
});
config.ts
export const config = {
apiUrl: "https://localhost",
initialize: {
viewport: { width: 1280, height: 720 }, // ブラウザの可視エリアサイズ
deviceScaleFactor: 1, // デバイスのピクセル比率、大きくするほど高画質になる
hasTouch: false,
},
roles: {
guests:{
screens:[
{name:'ログイン',path:'/login', operate: function async (page:any) {}},
],
},
admin: {
/**
* 管理者権限でログインし、スクリーンショットを取得する
*/
auth: {
// ログイン画面のパス
loginEndpoint: "/login",
// ログイン情報
login: async (page:any) => {
// ログイン画面で行う操作を記述する
// fillでは画面項目を特定し、値を入力する
await page.fill(`input[name="email"]`, "adminyourpassword@example.com"); // メールアドレス
await page.fill(`input[name="password"]`, "adminyourpassword"); // パスワード
// 送信ボタンをクリックしてログイン
await page.click('button[type="submit"]');
},
},
screens: [
{name:'顧客一覧',path:'/customers'},
{name:'顧客一覧',path:'/customers'},
{name:'顧客編集',path:'/customers/1/edit',operate: function async (page:any) {
// 画面固有の操作があればここに記述
}},
],
},
}
}
実行してみる
VS Codeの左側にある「テスト」を選択し、実際にテスト実行してみましょう🖐️
実行後はscreenshotsのディレクトリ配下に、guests, adminの権限ごとに
キャプチャーを行った画像が保存されています。
さいごに
一度config.tsファイルに画面情報を定義しておけば、
ほぼ自動で画面キャプチャを生成できるため採取用に便利です。
難点は一度config.tsファイルに定義しないといけない点です。
セレクタやクリックイベント等が複雑な場合は頑張って定義してみてください。