こんにちは。

突然ですが、フロントエンドのテストってやっていますか？

単体テスト、E2Eテスト、その他いろいろありますが、私自身あまりテストとは馴染みがありませんでした。

というのも私が元々HTMLのマークアップから始めた人間ですのでテストという概念すら最初は知らなかったのです。

ですが、最近は静的なWebサイトだけでなくネイティブのアプリやWebアプリに関わっていることでテストの重要性をとても感じているのです。

そこで今回はE2Eテストに焦点を当てて、改めて環境を整えてみようと思います。

今回使用するライブラリはMicrosoft社によって作られ最近目にすることも多くなったPlaywrightを使用してみたいと思います。

かつてのCypressなど有名どころよりもどうやら動作が速いらしいのです。

Playwright

ドキュメントを見てみると一つのAPIで複数のブラウザのテストをできるみたいですね。

あとはとにかく速いとのこと。

最近のモダンな環境ではこれ一択になってそうですね。

Microsoftが作っているということで、VScodeとも相性が良さそうです。

Fast and reliable end-to-end testing for modern web apps | Playwright

環境

今回私は以下の環境で試しています。

適宜コマンド等は自身の環境に合わせてください。

よほどの違いがなければ動くはず...

Node.js
- v20.11.1 LTS
TypeScript
- v5.2.2
Playwright
- v1.42.1

インストール

それではやっていきましょう。

テスト用にまずはプロジェクトを作成します。

今回はVite + TypeScriptを使用します。

pnpm create vite playwright-test --template vanilla-ts

プロジェクトが作成できたら早速Playwrightを導入しましょう。

pnpm create playwright

上記のコマンドを実行すると対話形式で設定をしていきますのでご自身の環境に合わせて設定してください。

今回はすべてデフォルトでやってみます。

? Where to put your end-to-end tests? > tests
? Add a GitHub Actions workflow? (y/N) > false
? Install Playwright browsers (can be done manually via 'pnpm exec playwright install')? (Y/n) > true

インストールが完了したら以下のファイル群が追加されていると思います。

playwright.config.ts
package.json
package-lock.json
tests/
  example.spec.ts
tests-examples/
  demo-todo-app.spec.ts

最初のテスト

サンプルのテストがありますのでとりあえず一度実行してみましょう。

pnpm exec playwright test

テストが成功すれば以下の内容が出力されます。

Running 6 tests using 4 workers
  6 passed (7.9s)

To open last HTML report run:

  pnpm exec playwright show-report

これで初めてのテストが完了しました！

今度は一つ失敗させて見ましょう。

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(/Microsoft/); // ここを変更 
});  
  
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();  
});

変更したらもう一度テストを走らせて見ましょう。

エラー文が表示されてレポートが自動で起動したかと思います。

分かりやすい...

レポートの表示

テストが完了した時に、レポートを作成することができます。

pnpm exec playwright show-report

こんな感じでレポートが表示されます。

めちゃくちゃ便利ですね。

UIモード

さらにPlaywrightにはUIモードという物が実装されていて、実際に画面を触りながらどこでテストが失敗しているのかなどの情報をGUIで確認することができます。

これはすごく便利で初心者の私でも直感的に触って実装することができました。

UIモードで立ち上げるには以下のコマンドです。

pnpm exec playwright test --ui

テストコードを書く際はこのUIモードを使用して、サクッとテストを走らせたい場合はCLIを使用してという使い分けができます。

その他細かな使用方法

特定のファイルのみをテストする

これまで書いてきたテストはすべてのファイルをテストするようになっていますが、任意のファイルのみをテストするには以下のコマンドです。

pnpm exec playwright test [ファイル名]

こちらのコマンドではファイルのパスを入力することで特定のファイルのみテストを実行できます。

特定のブラウザのみでテストをする

デフォルトではChromium、firefox、webkitの3つのブラウザで実行されます。

普段はそのまま3つのブラウザでやるけど、今回だけは特定のブラウザのみでテストしたいという場合もあると思います。

そのときは以下のコマンドです。

pnpm exec playwright test --project=chromium

こちらでchromium一つだけでテストを実行することができます。

もし普段から3つでなくてもOKという場合はconfigファイルから変更もできます。

まとめ

今回は初めてのE2Eテストというコンセプトでまずはテスト環境を作成して初めてのテストを通すところまで実施しました。

まだまだ奥が深く、設定ファイルの内容だったり、さらにはモックを使ってテストを行ったりなど、できることはたくさんあります。

また随時学習したら記事にしていきたいと思っていますので、そのときはまたご覧ください。

参考

Installation | Playwright

NPM

【Playwright】E2EテストをするためにPlaywrightを使ってみた

【Biome】PrettierとESLintをまとめて使える？Biome試してみた

【husky + lint-staged】コミット前にコードをチェックしてコードエラーを発見してみた