Playwright でE2E テストを体験してみる - Tansan Kenta テックブログ

こんにちは、本日はデプロイなどするとき、テストはユーザ体験を下げないためにも重要ですよね。
僕自身インフラエンジニアなので、こういうテストをしたことがなかったので、手始めにplaywright を使ってみたいなと思ったので、インストールから試してみます。

今回の目的
環境
Playwright をインストール
1. install-deps をインストールしていく
簡単なテストを書いてみる
1. タイトルがあるかを確認してみる
2. ページ遷移してみる
まとめ
参考サイト

今回の目的

ローカルでのplaywright インストールから簡単なテストを実行してみることです。

環境

WSL2
Windows 11

Playwright をインストール

まずはインストールから初めていきます。最初は対話形式で進めていきます。

npm init playwright@latest

Need to install the following packages:
create-playwright@1.17.136
Ok to proceed? (y) y


> npx
> create-playwright

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript  // Javascript かTypeScript を選択する
✔ Where to put your end-to-end tests? · tests // E2E テストの置き場のディレクトリ作成
✔ Add a GitHub Actions workflow? (y/N) · false  // GitHub Actions workflow 使いますか？
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true //GUI 使いますか？

// os のdependency をインストールしますか
✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')? (y/N) · false　

Initializing NPM project (npm init -y)…
Wrote to /home/kentaindeed/pj/e2e-test/package.json:

{
  "name": "e2e-test",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

最後にHappy hacking と表示されたら、インストール完了です。

次に GUI のものをインストールしようと思ったら、、何故か依存関係がないといわれたので、インストールしていきます。

install-deps をインストールしていく

これをインストールしてくださいと言われたので、言われるがままに入れていきます。

╔══════════════════════════════════════════════════════╗
║ Host system is missing dependencies to run browsers. ║
║ Please install them with the following command:      ║
║                                                      ║
║     sudo npx playwright install-deps                 ║
║                                                      ║
║ Alternatively, use apt:                              ║
║     sudo apt-get install libnspr4\                   ║
║         libnss3                                      ║
║                                                      ║
║ <3 Playwright Team                                   ║
╚══════════════════════════════════════════════════════╝

npx で入れていきます。エラーなくインストールされたらとりあえずオッケーです。

npx playwright install-deps

もう一回GUI を立ち上げると

npx playwright test --ui

こんな画面の表示がでてきたら、GUI の立ち上げに成功です。

それでは、簡単なテストを書いてみます。

簡単なテストを書いてみる

タイトルがあるかを確認してみる

まずはURL に対して、タイトルを取得するテストします。元から、example のテストページがありますが、それとは別のファイルを作成してみます。

blog.spec.ts という名前でファイルを作成してみます。下記のコードを書いてみます。

import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://blog.dev-tansanken.com/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Tansan Kenta テックブログ/);
});

blog.spec.ts という名前でディレクトリが作成されるようになり、下記のような形になります。再生ボタンのようなのを押すとテストが実行されるようになります。失敗すると Errors のところにログも出力されるので、troubleshooting にも便利です。

次にページ遷移のテストをかいていきます。

ページ遷移してみる

簡単なページ遷移のやり方ですが、以下になります。このサイトでは、対象は a tag の中にある title に対してクリック操作が発生するようになっています。

test('ページ遷移のテスト', async ({ page }) => {
  await page.goto('https://blog.dev-tansanken.com/');

  // "詳細を見る" というテキストのボタンをクリック（必要に応じて修正）
  await page.click('a[title="EventBridge スケジューラでCloudWatch LogsをS3に定期出力"]');
  // 遷移先のURLをフルURLで検証
  await expect(page).toHaveURL('https://blog.dev-tansanken.com/eventbridge-scheduler-cloudwatch-logs-s3/');
});