はじめに
システムの品質向上を考える時にユーザーにサービスを正しく提供できているか?という観点は重要な要素になってきます。
フロントエンド開発におけるテストとしてこれまでJestを使ったユニットテストやReact Testing LibraryによるUIコンポーネントテストをご紹介してきました。
これだけでユーザーにサービスを正しく提供できていると担保できるかというとそうでもありません。
実際は各種バックエンドサービス(API、外部ストレージなど)との連携の上で多くのシステムは成り立っています。
そのため、それらを含めたシステム全体のテストを今回はPlaywrightを使って実装していきます。
今回のゴール
Playwrightを使ってテスト用のコードをGUIを使って実装していきます。
実際のブラウザでテスト用の動作を行っている様子。
その後、テストを行い正常終了することを確認します。
テストケースが増えてきてどのテストで、どんな理由で失敗したかなどわかりやすく確認するレポートのご紹介もしております。
E2Eテストとは
E2Eテスト(エンドツーエンドテスト)とは、アプリケーション全体の流れをユーザー視点でテストする方法です。
ユーザーがシステムをどのように操作するかを再現し、実際の操作に近い環境でシステム全体の挙動を確認することを目的としています。
具体的には、ログイン、データ入力、ページ遷移、データの保存や読み込みといった一連の操作をテストし、それらが意図した通りに動作するかどうかを検証します。
E2Eテストのメリット:
- 実ユーザー視点
ユーザーの体験に近いテストができ、ユーザーにとっての問題を事前に検知しやすくなります。 - システム全体の確認
フロントエンドからバックエンド、そしてデータベースまで含めたシステム全体の動作確認が可能です。 - バグの早期発見
各機能が統合された状態での問題を早期に発見することで、リリース前のクオリティ向上に貢献します。
ただし、E2Eテストは一般的にテストの実行に時間がかかり、環境設定も複雑になる傾向があります。
そのため、必要なケースに絞って適切に管理することが重要です。
Playwrightとは
Playwrightは、Microsoftが開発したオープンソースのエンドツーエンド(E2E)テスト自動化ツールです。
ウェブアプリケーションのテストに特化しており、複数のブラウザ(Chromium、Firefox、WebKitなど)での動作を簡単に確認できるように設計されています。
Playwrightの特徴
-
複数ブラウザ対応
Playwrightは、Chromium(ChromeやEdge)、Firefox、WebKit(Safariのエンジン)など、主要なブラウザをサポートしています。これにより、異なるブラウザ環境でアプリケーションが正しく動作するかを簡単に確認できます。 -
並行テスト実行
Playwrightは、並行してテストを実行する機能があり、大量のテストケースでも高速に実行できるため、開発速度の向上に役立ちます。 -
クロスプラットフォーム
Windows、Mac、Linuxで動作するため、どのOS上でもテストを簡単に実行できます。モバイルブラウザにも対応しているため、デスクトップとモバイルの両方でのテストが可能です。 -
多種多様なAPI
Playwrightは、ページの読み込み完了、ネットワークリクエスト、DOM操作などのイベントを細かく制御できるAPIを提供しており、複雑なユーザーシナリオの再現や、ページ間の遷移、ファイルのアップロード・ダウンロードなども簡単にテストできます。 -
スクリーンショットと動画のキャプチャ
テスト中にスクリーンショットや動画をキャプチャする機能があり、テスト結果の確認やバグ調査をスムーズに行うことができます。
Playwrightのメリット
- 迅速なフィードバック
並行テストやクロスブラウザ対応により、素早くテスト結果を確認できるので、開発スピードの向上に寄与します。 - 信頼性の高さ
ネットワークや画面の状態を制御できるため、特定の条件下でのテストが可能で、エラーの再現性を高められます。 - 簡単なセットアップ
比較的簡単にセットアップでき、デフォルトで様々なブラウザに対応しているため、他のツールに比べて導入コストが低いといえます。
Playwrightはフロントエンド開発者やQAエンジニアがE2Eテストを行うのに便利なツールです。
Playwrightの導入
Playwright公式ドキュメントにインストールの手順がありますのでこちらを参考に進めていきます。
適当なディレクトリで下記のコマンドを実行します。
npm init playwright@latest
すると幾つかの選択肢が登場しますが、基本的にはデフォルトの設定で問題ないのでエンターキーで進めていきインストールします。
- Choose between TypeScript or JavaScript (default is TypeScript)
TypeScriptかJavaScriptのどちらかを選択(デフォルトはTypeScript) - Name of your Tests folder (default is tests or e2e if you already have a tests folder in your project)
Testsフォルダの名前(デフォルトはtests、プロジェクトにtestsフォルダがある場合はe2e) - Add a GitHub Actions workflow to easily run tests on CI
GitHub Actionsワークフローを追加してCI上で簡単にテストを実行(デフォルトはfalse) - Install Playwright browsers (default is true)
Playwrightブラウザをインストール(デフォルトはtrue)
サンプルコードを使ったE2Eテスト
test
フォルダを確認するとサンプルのテストコードが用意されています。
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Expect a title "to contain" a substring.
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
// Click the get started link.
await page.getByRole('link', { name: 'Get started' }).click();
// Expects page to have a heading with the name of Installation.
await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
テストは2つ用意されています。
-
has title
Playwright公式ドキュメントの最初のページを開くとタイトルに「Playwright」というテキストが存在する -
get started link
Playwright公式ドキュメントの最初のページに「Get started」のリンクが存在し、クリックすると「Installation」というタイトルのページに遷移する
既にテストコードが存在していますので早速テストを実行してみます。
npx playwright test
画面のように「6 passed」と表示されたらOKです。
先ほどは2つのテストがあるとご紹介しましたが実際に動かすとテストは6実行されました。
playwright.config.ts
ファイルを開くと下記の記述を確認できます。
/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
Playwrightのprojects
オプションは、異なるテスト環境や設定で同じテストを実行できるようにするための機能です。
例えば、異なるブラウザ(Chrome、Firefox、WebKit)や異なる端末(デスクトップとモバイル)での動作を一度にテストしたい場合、projectsを使うと簡単に切り替えや設定が可能になります。
これによって、複数の環境でのクロスブラウザテストやデバイステストを効率よく行えます。
今回は2つのテストを3つの異なるブラウザ(Chrome、Firefox、WebKit)で実行したので6回テストが実行されました。
テストコードの作成
テストコードは.test.ts
ファイルまたは.spec.ts
ファイルに直接コードを書くことで動作可能ですが、EXCELのマクロ機能のように実際にブラウザを操作してコードを生成する方法もあります。
今回はコードの生成方法を使ってテストコードを書いてみます。
下記のコマンドを実行すると2つの画面が起動します。
npx playwright codegen
実際に操作するブラウザ
ブラウザを操作することで生成されたコードが表示される画面
ブラウザに「https://playwright.dev/」を入力するとPlaywright公式ドキュメントが表示され、操作内容がコードとして表示されます。
次に同じトップ画面のフッター部分にPlaywrightの「GitHub」へのリンクがありますので、目のマークの「assert visibility」で存在することを確認する処理を操作します。
すると操作内容が記録されますので最終的には下記のようなコードが生成されます。
test('test', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page.getByRole('link', { name: 'GitHub', exact: true })).toBeVisible();
});
以上で「Playwright公式ドキュメントの最初のページを開くと、GitHubへのリンクが表示される」というテストコードが完成しました。
テスト名称を少しわかりやすくして、サンプルのテストコードに貼り付けます。
+ test('has github link', async ({ page }) => {
+ await page.goto('https://playwright.dev/');
+ await expect(page.getByRole('link', { name: 'GitHub', exact: true })).toBeVisible();
+ });
テストコード作成のために立ち上げたブラウザは不要になりましたので、ターミナルで「Ctrl + C」で閉じてください。
最後にテストを実行して正常終了することを確認します。
npx playwright test
テストが9件正常終了したらOKです。
テスト結果レポート
これまでテスト結果はターミナルで確認していましたがレポート出力もされています。
これが有用なのはテストが失敗した時になります。
ということでテストが失敗するケースを作ってからレポートを見ていきたいと思います。
先ほど作成したテストケースでテストが失敗するようにを少し修正しました。
test('has github link', async ({ page }) => {
await page.goto('https://playwright.dev/');
- await expect(page.getByRole('link', { name: 'GitHub', exact: true })).toBeVisible();
+ await expect(page.getByRole('link', { name: 'GitHub1', exact: true })).toBeVisible();
});
「GitHub」というリンク名を「GitHub1」と修正することで存在しないリンクを指定するように変えました。
npx playwright test
テストを実行するとテスト失敗のメッセージを確認できます。
(ターミナルでもどこに問題がるか十分確認できるメッセージが表示されていますが、、、)
6件成功し、3件失敗しています。
レポートサーバーについて
ターミナルに「Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.」と表示され、
実際にブラウザで「http://localhost:9323」にアクセスするとテスト結果のレポートが見れます。
これまでテストが全て成功していた時は「Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.」というメッセージは表示されていませんでした。
これはPlaywrightのデフォルトの挙動で、テストが失敗した時はすぐにレポートを確認できるよう自前のHTTPサーバーをローカル環境で立ち上げレポートを見れるようにしています。
では正常終了した時はレポートが見れないのか?というとそんなことはなくテスト終了時に表示されていた下記のコマンドでレポートサーバーを立ち上げレポートを見ることができます。
npx playwright show-report
とは言え全て正常終了している時にテスト内容をそこまで詳しく見ることはないと思いますのでデフォルトの挙動通りで運用は問題ないかと思います。
レポートの内容について
今回は9件のテストなので失敗したテストがどこかすぐ確認できましたが、多くのテストを実施している場合は右上の「Failed」と書いてあるたぶをクリックすると失敗したテストケースのみにフィルタリングされます。
テスト名称、実行ブラウザ、テストに要した時間が記載されています。
試しにchromium
のエラー詳細を確認してみます。
失敗した箇所が22行目で、エラーの内容としては5000ms(5秒間)のタイムアウトとなっています。
PlaywrightではExpect Timeoutがデフォルトで5秒となっております。
expect
での検証(アサーション)が成功するまで待機する時間の上限が決まっており、例えば、非同期処理や状態変化を確認するテストで、特定の条件が満たされるまで待つ際に、どれだけの時間を許容するかを決めます。
具体的にはUIがロードされるのを待つ、データが非同期で取得されるのを待つなど、特定の状態に達するのを待機するテストで役立ちます。
平たく言えば5秒間「GitHub1」というリンク名を探したけど見つからなかったというエラーになります。
レポートについてはPlaywright標準のレポート以外にも様々なサードパーティ製レポートツールが存在しています。
テスト1回分の結果を見たい場合であればPlaywright標準で十分かと思います。
毎日動かしている場合であればこれまでの傾向把握だったり、或いはGitHub上やMicrosoft Teamsにテスト結果を連動したいなど運用負荷を軽減する際には役に立つかと思います。
さいごに
今回はPlaywrightについてご紹介をしつつ導入方法からE2Eテストの実施までご紹介していきました。
テストコードを生成する方法などを見て頂くとイメージつくかと思いますが内部実装がわからない非エンジニア職の方々でも手軽にテストコードを作成しテストを実施できるツールとなっております。
Webサービスにおいては日々システムが変化していく世界ですのでE2Eテストもそれに合わせて変えていく必要があります。
QAチームやPM、ディレクターなども巻き込んでテストの安定運用が実現できたらシステムの安定運用にもつながるのではないかと考えて筆者も日々啓蒙活動をしております。
関連する弊社の支援実績
関連する技術ブログ
JestとTypeScriptで始めるテスト自動化:基本設定から型安全なテストの書き方まで徹底解説
JestとTypeScriptを使ったテスト自動化の基本を学びたい方へ。環境のセットアップ方法、型安全なテストを書くメリット、コードの信頼性を高める実践的なテクニックを初心者向けに丁寧に解説します。テストカバレッジの活用で、品質の高い開発を目指しましょう。
shinagawa-web.com
フロントエンド開発で欠かせないReactのUIコンポーネントのテストをReact Testing Libraryで実装
React Testing Libraryを使って、Reactコンポーネントのテストを行う方法を学びます。本記事では、Next.js環境でのセットアップから、ユーザーインタラクションをシミュレーションしたテストコードの作成までを詳しく解説します。コンポーネントが期待通りに動作するかを確認し、実際のアプリケーションに近い形でのテストを実装しましょう。
shinagawa-web.com
Webアクセシビリティの完全ガイド:Lighthouse / axe による自動テスト、WCAG基準策定、キーボード操作・スクリーンリーダー対応まで
Webアクセシビリティの課題を解決するための包括的なガイド。Lighthouse / axe を活用した自動テストの設定、WCAGガイドラインに基づく評価基準の整備、キーボード操作やスクリーンリーダー対応の改善、カラーコントラストの最適化、ARIAランドマークの導入、フォームやモーダルの操作性向上まで詳しく解説。定期的なアクセシビリティレポートを活用し、継続的な改善を実現する方法も紹介します。
shinagawa-web.com
開発業務の自動化紹介:ETL (Python)、Bot (Slack/Discord)、CI/CD (GitHub Actions)、監視 (Sentry/Datadog) まで徹底解説
開発業務の効率化を加速する自動化テクニックを網羅的に解説。データ処理の自動化(ETLスクリプト)、Slack / Discord Bot による定型業務の効率化、Terraform / Pulumi を活用したインフラ管理、CI/CD の最適化、Sentry / Datadog によるエラーハンドリングなど、多方面にわたる自動化の実践例を紹介します。さらに、Pull Request の自動管理、ログ監視、テスト、警告通知の自動化まで、開発のスピードと品質を向上させるためのベストプラクティスを詳しく解説します。
shinagawa-web.com
フロントエンドのテスト自動化戦略:Jest・Playwright・MSW を活用したユニット・E2E・API テスト最適化
フロントエンド開発において、品質を担保しながら効率的に開発を進めるためには、適切なテストの自動化が不可欠です。本記事では、Jest や Vitest を活用したユニットテストの導入・強化、React Testing Library や Storybook との統合によるコンポーネントテストの最適化、Playwright / Cypress を用いた E2E テストの拡充について詳しく解説します。さらに、Supertest や MSW を活用した API テストの自動化、Faker / GraphQL Mock によるモックデータの整理、CI/CD パイプラインにおける並列実行やキャッシュ活用による最適化など、テストを効果的に運用するための手法を紹介。また、Codecov / SonarQube によるテストカバレッジの可視化や、フィーチャーフラグを考慮したテスト戦略の策定についても解説し、実践的なアプローチを提案します。テストの信頼性と効率を向上させ、開発プロセスを強化したいフロントエンドエンジニア必見の内容です。
shinagawa-web.com
ExpressとMongoDBで簡単にWeb APIを構築する方法【TypeScript対応】
本記事では、MongoDB Atlasを活用してREST APIを構築する方法を、初心者の方にも分かりやすいステップで解説します。プロジェクトの初期設定からMongoDBの接続設定、Expressを使用したルートの作成、さらにTypeScriptを用いた型安全な実装まで、実践的なサンプルコードを交えて丁寧に説明します。
shinagawa-web.com
Express(+TypeScript)入門ガイド: Webアプリケーションを素早く構築する方法
Node.jsでWebアプリケーションを構築するための軽量フレームワーク、Expressの基本的な使い方を解説。シンプルなサーバー設定からルーティング、ミドルウェアの活用方法、TypeScriptでの開発環境構築まで、実践的なコード例とともに学べます。
shinagawa-web.com
React のリファクタリング完全ガイド:モジュール化・レンダリング最適化・設計パターン適用でコードを改善
フロントエンド開発において、可読性が低いコードやパフォーマンスの課題を抱えていませんか?本記事では、React を用いたフロントエンドのリファクタリング手法を具体的なコード例とともに解説します。命名規則の統一や関数分割による可読性向上、共通処理のモジュール化によるコードの整理、関心の分離に基づいたコンポーネント設計の最適化を実践。また、useMemo / useCallback / React.memo を活用したレンダリングの最適化、Promise.all や useQuery の適切な適用による非同期処理の最適化など、パフォーマンス改善にも焦点を当てます。さらに、クリーンアーキテクチャやリポジトリパターンの導入、TypeScript による型安全性の強化、依存関係の整理まで幅広くカバー。リファクタリングを計画的に進める方法も紹介し、スムーズな適用を支援します。より読みやすく、保守しやすいコードへと進化させるための実践的なアプローチをご紹介します。
shinagawa-web.com
弊社の技術支援サービス
無駄なコストを削減し、投資対効果を最大化する
クラウド費用の高騰、不要なSaaSの乱立、開発工数の増加――これらの課題に悩んでいませんか?本サービスでは、クラウドコストの最適化、開発効率向上、技術選定の最適化 を通じて、単なるコスト削減ではなく、ROIを最大化する最適解 をご提案します。
shinagawa-web.com
最新技術の導入・検証を支援するPoCサービス
Remix、React Server Components、TypeScript移行、クラウドサービス比較、マイクロサービス、サーバーレス、デザインシステムなど、最新技術のPoC(概念実証)を通じて、最適な技術選定と導入を支援します。貴社の開発課題に合わせた検証・実装で、ビジネスの成長を加速させます。
shinagawa-web.com
開発生産性を最大化するための支援サービス
開発チームの生産性向上、コードの品質管理、インフラの最適化まで、様々な側面からサポートします。コードベースのリファクタリングから、テスト自動化、オンボーディング強化まで、プロジェクトの成功に必要なすべての支援を提供。御社の開発現場が効率的に機能するように、技術的な障害を取り除き、スムーズな開発を実現します。
shinagawa-web.com
開発品質向上支援 – 効率的で安定したプロダクトを実現
フロントエンドからバックエンド、データベースまで、開発プロセス全体を最適化し、安定したプロダクト作りをサポートします。コードレビューの仕組み、型定義の強化、E2Eテスト環境の構築など、開発の各ステップにおけるベストプラクティスを導入することで、より効率的でバグの少ない、そしてユーザー満足度の高いサービス提供を支援します。
shinagawa-web.com
Webアプリのセキュリティ強化支援
Webアプリの脆弱性対策からインフラのセキュリティ強化まで、包括的なセキュリティ支援を提供。OWASP Top 10対策、JWT認証の最適化、APIのアクセス制御、依存パッケージの監査、セキュアコーディングの標準化など、実践的なアプローチで開発現場の安全性を向上させます。
shinagawa-web.com
目次
お問い合わせ