はじめに
業務でContact Form7を利用した問い合わせフォームの作成・内容の変更をすることがあり、内容の変更に伴う動作の検証を行うにあたって、テストフレームワークとしてPlaywrightを使用してみたところ、使いやすかったのでPlaywrightによるテスト作成の簡単な手順を書きます。
今回はフォームは何でも良いので、Google Formで作成したものを利用します。
Playwrightとは
Microsoftによって開発され、2020年1月にリリースされたWebアプリケーション用のテストフレームワークです。
有名なテストフレームワークとしては他にも、SeleniumやPuppeterなどがあるようです。
Playwrightのインストール方法
Node.jsのパッケージ管理をするツールでPlaywrightをインストールします。
ここではbunを利用しますが、npmやyarnでも大丈夫です。
$ bun create playwright
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ 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 'npx playwright install')? (Y/n) · true
色々聞かれますが、全部Enterを押して問題ないです。
作成後にちゃんと作られているか確認してみます。
$ ls
node_modules package.json tests
package-lock.json playwright.config.ts tests-examples
testsディレクトリの中に入っている、example.spec.tsを変更することでテストを作成できます。
お問い合わせフォームの用意
本題ではないので省略します。
Google Formで作成した例で進めます。
example.spec.tsの編集
まずは簡単な、タイトルをチェックするだけのテストを書いてみます。
import { test, expect } from '@playwright/test';
test('check title', async ({ page }) => {
await page.goto('https://forms.gle/xxxxxxxxxxxx');
await expect(page).toHaveTitle('自己紹介');
});
Playwrightの文法は調べて書くこともできますが、codegenを利用して書いてもらうこともできます。
コンソールで、npx playwright codegenを実行すると、ウインドウが2つ開きます。
左のウインドウでテストしたい操作を行うと、自動で右ウインドウにコードが生成されます。
自動でコードが生成されるので、必要そうな行をexample.spec.tsに追加します。
完成したコードはこちらになります。
import { test, expect } from '@playwright/test';
test('check title', async ({ page }) => {
await page.goto('https://forms.gle/zWiKjVh9eJCc83gG7');
await expect(page).toHaveTitle('自己紹介');
});
test('お問い合わせフォーム送信', async ({ page }) => {
await page.goto('https://forms.gle/zWiKjVh9eJCc83gG7');
await page.getByLabel('名前は何ですか').click();
await page.getByLabel('名前は何ですか').fill('wkani');
await page.getByLabel('東京').click();
await page.getByRole('button', { name: '送信' }).click();
});
テストの実行
テストの実行は、npx playwright test --uiで実行できます。
--uiはなくても実行できますが、つけるとGUIツールとして操作できるので、最初はこちらの方が実際の画面遷移などがわかりやすいので良いと思いました。
緑の三角マークを押すとテストが実行され、エラーが起きないと緑のチェックマークが付きます。
以上の手順で、サーバやWordPressの設定変更などを行ったりした際、問い合わせフォームがちゃんと動いているかのテストを簡単に行うことができます。