E2Eテスト環境を構築するコストは大きいので、ブラウザ環境を貸してくれるBrowserStackを試してみた。今回は、E2EフレームワークはPlaywright、コードはTypeScriptにしている。
BrowserStackを利用する
BrowserStackはWebだけでなくモバイルアプリ環境も提供してくれる有名なサービス。サービスの詳細はBrowserStack：テスト自動化有料ツールの決定版が詳しい。
Googleアカウントで新規登録すればすぐに利用可能。マニュアルでテストするならLive環境を操作できるし、今回のように自動テストを動かしたいならAutomate環境を利用できる。
ドキュメントも揃っていて、フレームワークと言語を選択するだけでサンプルコードなども入手可能。さすがにTypeScriptはなかったが、NodeJSのドキュメントが参考になった。
E2EテストをTypeScriptで書いていく
Playwright ＋ TypeScriptのサンプルは少ないが、Building a Simple Playwright Typescript Framework and Connecting it to BrowserStackがまさにドンピシャな解説をしてくれていた。
サンプルコードはGitHub上にあげておく。
GitHub: https://github.com/daipresents/playwright
BrowserStackとつなぐための認証方法は Profile画面にある。上記のように表示されるはずなのでこちらを.env ファイルなどに設定する。
よく使うアサーションやロケーターはドキュメントを見ればばっちりわかる。みんな大好きCapabilitiesは相変わらず大量にあるので探すのがしんどい。Webとモバイルで設定が異なるのが辛み。
テストコードは以下のようになる。
// browserstack.sample.spec.ts https://github.com/daipresents/playwright-browserstack/blob/main/tests/browserstack.sample.spec.ts
// BrowserStack実行の場合は以下を使う
import { expect } from '@playwright/test';
import { test } from '../browserstack';
// ローカルで動かす場合は以下を使う
//import { test, expect } from '@playwright/test';
test('ブログを開いてメニューページを開く', async ({ page }) => {
// Base URLを開く
await page.goto('/');
// タイトルが表示されているか確認
await expect(page.getByRole('link', { name: '旅と子育てとアジャイルコーチのブログ「世界」' })).toBeVisible();
// メニューをクリック
await page.locator('#menu-item-32293').getByRole('link', { name: 'アジャイル' }).click();
// 見出しにタグが表示されているか確認
await expect(page.getByRole('heading', { name: 'タグ: アジャイル' }).locator('span')).toBeVisible();
});browserstack.tsに接続設定を書けば、
import { expect } from '@playwright/test';
import { test } from '../browserstack';と書くだけでOKなのがすばらしい。
実行後はテスト動画が自動で撮影され、テストの実行結果も上記のように整理して表示してくれる。
テスト実行環境、テスト実行結果をBrowserStackにまかせられるので、開発者はテストの設計とテストコードの作成だけに集中できる。
ただし、実行環境が海外なのでi18nが動いて英語が表示されたり、ページを開くだけでも時間がかかったり、クラウドならではの課題もある。
旅と子育てとアジャイルコーチのブログ「世界」 