- ブログ
Playwrightを使って、Vue.jsのUIテストを試す
2025.09.05 Fri
こんにちは、Vueリーダーのhasselです。
実装や修正の際につきまとう画面テストを面倒に感じることはないでしょうか？
今回、その課題を解消するためにPlaywrightを導入したので使い方をご紹介します。
PlaywrightはVueドキュメントのE2Eテストで推奨事項に掲載されているサービスの１つです。Chromium、WebKit、Firefoxなど複数ブラウザをサポートしています。
また、テストコードを画面キャプチャするように作成してくれます。
セットアップ
1. Visual Studio Code（以降vscodeと呼びます） を使い環境構築します
下記、拡張機能をインストールします
Playwright Test for VSCode
2. コマンドパレットから下記を実行します（cmd + shift + p）
Test: Install Playwrightまた、下記コマンドを実行します(ctrl + @)
npm init playwright@latest3. ターミナルにこのようなメッセージが表示されたら完了です
Visit https://playwright.dev/docs/intro for more information. ✨
Happy hacking! 🎭テストコード作成
1. vscodeのサイドメニューに追加されているフラスコのアイコンをクリックします
次に「PLAYWRIGHT ＞ Record new」をクリックします
2. クリックすると「test-1.spec.ts」ファイルとウィンドウが作成されます
3. 作成されたウィンドウのアドレスバーにテストする画面のリンクを入力します
今回はテスト用に作成したプロジェクトを使用します
リンクを入力し「Enter」キーを押すと、下記コードが追加されています
このように、ウィンドウの操作からテストコードが生成されます
await page.goto('http://localhost:3000/');
4. プロジェクトには「ユーザ新規登録」画面を用意しています
その画面を使い、バリデーションエラーや入力操作していきます
こちらが生成されたテストコードです
また、以下のようなことをしています
- getByRole〜
項目を指定し入力やクリック操作を行います - expect〜
文言や項目が表示されているかなどをチェックします
import { test, expect } from '@playwright/test';
test('test', async ({ page }) => {
// テスト画面へ遷移
await page.goto('http://localhost:3000/');
// ユーザ新規登録画面へ遷移
await page.getByRole('link', { name: 'ユーザ 新規登録' }).click();
await page.waitForURL('http://localhost:3000/about');
// 未入力で保存ボタンを押下しバリデーションエラー表示・表示確認
await page.waitForTimeout(1000);
await page.getByRole('button', { name: '保存' }).click();
await expect(page.getByText('ユーザ名が正しくありません')).toBeVisible();
await expect(page.getByText('メールアドレスが正しくありません')).toBeVisible();
await expect(page.getByText('パスワードには8文字以上入力してください')).toBeVisible();
// ユーザ情報を保存
await page.getByRole('textbox', { name: 'ユーザ名' }).click();
await page.getByRole('textbox', { name: 'ユーザ名' }).fill('山田 太郎');
await page.getByRole('textbox', { name: 'メールアドレス' }).click();
await page.getByRole('textbox', { name: 'メールアドレス' }).fill('test@example.com');
await page.getByRole('textbox', { name: 'パスワード' }).click();
await page.getByRole('textbox', { name: 'パスワード' }).fill('Abc123456');
await page.getByRole('textbox', { name: 'パスワード' }).press('Tab');
await page.getByRole('button', { name: '保存' }).click();
// トップ画面に遷移後、新規登録したユーザ情報が一覧表示されているか確認
await page.waitForURL('http://localhost:3000/');
await expect(page.locator('tbody')).toContainText('山田 太郎');
await expect(page.locator('tbody')).toContainText('test@example.com');
});
5. 作成したテストコードを編集したい場合は「PLAYWRIGHT ＞ Record at cursor」をクリックします
「PLAYWRIGHT ＞ Record new」と同じ操作で編集が行えます
テストコード実行
1. 作成したテストコードを実行します
フラスコのアイコンから「テスト エクスプローラー」を開くと作成したテストコードが表示されます
各項目をホバーすると「実行」「デバッグ実行」のアイコンが表示され、クリックして実行できます
2. 実行後しばらくするとテスト結果が表示されます
テストが失敗した箇所はハイライトして表示されます
今回は、「ユーザ名が正しくありません」が表示されずタイムアウトと表示されています
Received: <element(s) not found>
エラー原因を修正して再テストすると、すべてのテストが成功します
4. コマンドからテストする方法もあります
こちらは並行して複数プラットフォーム（chromium・firefox・webkit）で実行します
テスト後は自動でレポート画面が開きます。失敗しているテストをクリックすることで
失敗原因の詳細が表示されます
npx playwright test
まとめ
以上がテストコード作成から実行までの流れです。
また、機能が充実しているのでドキュメントを参照してみてください
テストをしていて失敗したことですが、並行して登録テストを行うと唐突に
データが増えたように見えます。
その影響で、テストが失敗になることもあるので注意が必要です。
最後まで見ていただきありがとうございました。
特に、フロントエンド（Vue.js、Typescript）が得意で、社内メンバーからは、Vueリーダーという愛称で呼ばれております。
休みの日には、ジャンル問わずUnityでゲームを作っています。