【Playwright】Test GeneratorでAssertion（一部）のコードを自動生成できるようになった
はじめに
先日、Playwright v1.40.0 がリリースされました🎉
中でも Test Generator のアップデートが便利そうだったので試してみました。
Test Generator とは
ブラウザ上での操作をもとにテストコードを自動生成してくれる機能です。
下記のキャプチャでは『Record』を有効にした後、いくつかのリンクをクリックしています。
画面右側を見てみると、対応する操作のコードが自動生成されていることが分かります。
他にもボタンクリック、テキスト入力など一通りの操作に対応するテストコードも自動生成が可能です。
今回のアップデートで何が変わった？
これまでも操作系のコードは自動生成できていたものの、意図した状態になっているかの検証（Assertion）は手動で書く必要がありました。ですが、v1.40.0 から Assertion （一部）も自動生成できるようになりました🙌
提案された issue への反応を見る限り、待ち望んでいた人は多そうですね。
今回の Test Generator のアップデートでサポートされた Assertion は次の通りです。
- expect(locator).toBeVisible()
- expect(locator).toHaveValue(value)
- expect(locator).toContainText(text)
実際に試してみる
v1.40.0 から『Record』をクリックすると、下記のようなメニューバーが表示されるようになりました。このメニューバーに Assetion が追加されています。
以降、追加された Assertion を1つずつ試していきます。
なお、今回は Playwright の公式ドキュメントを対象にテストを書いていきます。
toBeVisible
toBeVisible を使用することで 特定の要素が表示されているか 検証できます。
今回は 公式ドキュメントの右上にある検索窓が表示されているか 検証するコードを生成してみます。
生成されたコードがこちらです。
await expect(page.getByLabel('Search')).toBeVisible();
toContainText
toContainText を使用することで 特定の要素のtextが意図した値になっているか 検証できます。
今回は 公式ドキュメントのトップページに「Playwright enables reliable end-to-end testing for modern web apps.」 が表示されているか 検証するコードを生成してみます。
生成されたコードがこちらです。
await expect(page.locator('h1')).toContainText('Playwright enables reliable end-to-end testing for modern web apps.');
toHaveValue
toHaveValue を使用することで input要素のvalue属性が指定した値になっているか 検証できます。
今回は 公式ドキュメントの検索窓に意図した値が設定されているか 検証するコードを生成してみます。なお、検証できる状態にするため、事前にテキストを入力します。（あまり良い例ではありませんが...）
生成されたコードがこちらです。
await expect(page.getByPlaceholder('Search docs')).toHaveValue('Assertions');
おわりに
今回は Test Generatorを使って Assertion のコードを自動生成してみました。
試してみてけっこう便利そうと感じたので、実務でも積極的に活用していきたいです💪
この流れで他の Assertion もサポートされると嬉しい...!
Discussion