この記事では、Playwrightを使ってさまざまなブラウザやデバイスでの動作確認を自動化する手法を紹介する。クロスブラウザおよびデバイス別テストは、ユーザーエクスペリエンスの一貫性を保ち、問題を早期に検出するために役立つ。これらのテストを効率的に行うための設定方法と、実際のテストシナリオを具体的なコード例を交えて解説する。
公式ドキュメント
クロスブラウザやデバイス別テストの重要性
各ブラウザやデバイスは、それぞれ固有のレンダリングエンジンやユーザーインターフェース特性を持っており、同じウェブサイトでも表示や動作に違いが生じることがある。
| ブラウザ/デバイス | レンダリングエンジン |
|---|---|
| Google Chrome | Blink (Chromium) |
| Microsoft Edge | Blink (Chromium) |
| Safari (macOS) | WebKit |
| Firefox | Gecko |
また、デスクトップPC、タブレット、スマートフォンでは、画面サイズや操作方法が異なるため、ユーザーのインタラクションに与える影響も異なる。
そのため、クロスブラウザおよびデバイス別テストを通じて、すべての環境で一貫した動作を確保することが重要になる。
Playwrightでのクロスブラウザテストの設定
サポートされているブラウザ
Playwrightは、Chromium、Firefox、WebKitといった主要なブラウザエンジンをサポートしている。これらは、デフォルトで有効になっているので特に変更する必要はない。
もし、E2Eテストの方針で特定のブラウザをサポート対象外にする場合は、コメントアウトする必要がある。
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
{
name: 'firefox',
use: { ...devices['Desktop Firefox'] },
},
{
name: 'webkit',
use: { ...devices['Desktop Safari'] },
},
],
});
テスト実行
実際に、jsonplaceholderからデータを取得し、画面に一覧が表示されるかをテストする。
HTML（Vue） pages/test/playwright/events.vue
<template>
<v-container>
<h1>Posts</h1>
<v-divider class="my-4" />
<ul>
<li v-for="post in posts" :key="post.id">
{{ post.title }}
</li>
</ul>
</v-container>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
type Post = {
userId: number;
id: number;
title: string;
body: string;
};
const posts = ref<Post[]>([]);
const fetchData = async () => {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
posts.value = await response.json();
} catch (error) {
console.error(error);
}
};
onMounted(() => {
fetchData();
});
</script>
tests/events.spec.ts
import { test, expect } from "@playwright/test";
test("waitForResponse", async ({ page }) => {
// ページに遷移
await page.goto("http://localhost:3000/test/playwright/events");
// 最初の API リクエストが完了するのを待つ
await page.waitForResponse("https://jsonplaceholder.typicode.com/posts");
// API からのデータが正しく表示されているか確認する
const postTitles = await page.locator("ul > li").allTextContents();
// 少なくとも1件以上の表示があること
expect(postTitles.length).toBeGreaterThan(0);
// 1件目の投稿タイトルに特定の文字列が含まれていること
expect(postTitles[0]).toContain("sunt aut facere repellat provident occaecati");
});実行する。
$ npx playwright test tests/events.spec.ts
Running 3 tests using 3 workers
3 passed (5.7s)
To open last HTML report run:
npx playwright show-reportテストが成功したので、レポートをみる。
$ npx playwright show-reportブラウザ別にテストが成功していることがわかる。
Playwrightでのデバイス別テストの設定方法
Playwrightは、さまざまなデバイスをエミュレートしてテストを実行する機能も提供している。たとえば、iPhoneやPixelなどのモバイルデバイスをシミュレートすることで、特定のデバイスでの表示や操作性を確認できる。
playwright.config.tsに以下を追記する。
{
name: "Mobile Chrome",
use: { ...devices["Pixel 6"] },
},
{
name: "Mobile Safari",
use: { ...devices["iPhone 12"] },
},この設定により、iPhone 12とPixel 6をエミュレートしてテストを行うことができる。
上記と同じテストを実行する。
$ npx playwright test tests/events.spec.ts
Running 5 tests using 4 workers
5 passed (7.4s)
To open last HTML report run:
npx playwright show-report
結果を確認する。
新たに追加したモバイルデバイスでのテストが成功していることがわかる。
デバイスエミュレーションの際に、ビューポートサイズやユーザーエージェントをカスタマイズすることで、さまざまなデバイスや環境をシミュレートすることができる。
詳しくは、以下の公式ドキュメントを参照してほしい。
テストケースに限定してモバイル検証を行う
テストファイルの最初に以下の記述をする。
import { test, expect, devices } from "@playwright/test";
test.use({
...devices["iPhone 12"],
});
test("waitForResponse", async ({ page }) => {
// ページに遷移
....テストを実行する。
$ npx playwright test --ui tests/events.spec.tsUIモードで、モバイル表示で確認ができる。
特定のテストファイルだけ、異なるデバイスで検証したい場合や、実際の動きを目視で確認したい場合などは、このやり方がいいかもしれない。
まとめ
Playwrightを活用したクロスブラウザおよびデバイス別テストは、ユーザーエクスペリエンスの一貫性を確保し、開発プロセスにおける問題の早期発見を促進するために重要。本記事で紹介した手法を活用して、さまざまな環境でのテストを積極的に実施し、より信頼性の高いウェブサイトを提供していこう。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント