【改訂】はじめての Playwright

はじめに

• この記事は、Playwright をはじめて触る人向けの記事です
• 内容は、そこまで詳細に書かれていないので、詳しい内容を知りたい方は、公式 Docs を参照してください

2022/04/12 加筆。

Playwright とは?

Playwright は、Microsoft が開発した、ブラウザ自動操作テストツールです。
主にE2Eテストで使用するケースが多いです。

Playwright のインストール

yarn add -D @playwright/test
yarn playwright install

実行すると、playwright.config.js が作成される。

絶対に覚えたほうが良い page

ブラウザが表示しているページ全体を指定する。
クリックなどの操作が用意されている。まずは、これを覚えれば、大半のテストは困らない。

page.goto

直アドレスで、ページ遷移する。

page.locator

ページ内にあるDOMの指定が出来る。変数に格納可能。

const error = page.locator(".error-message"); 

page.click

ページ内のボタンなどのDOMをクリックする

page.fill

指定したDOMに、入力することが出来る。

上記のメソッドを使ったサンプル

基本は async/await を使って書く。
(使わないと、エラーが起きる。)

test("ログインボタン押したら、エラーメッセージを出す", async ({ page }) => {
  await page.goto("/login"); // ログインページに行く
  await page.fill('input[name="email"]', "[email protected]"); //メールアドレスを入力
  await page.fill('input[name="password"]', "hogehoge"); //パスワードを入力
  await page.click(".login"); //ログインボタンを押す
  const error = page.locator(".error-message"); //エラーメッセージ表示する DOM を取得して、変数に格納する。
  await expect(error).toHaveText("error"); // エラーメッセージが出ているか確認する
});

基本は、これで大丈夫。

Test Generator

「うぇ、覚えるのがダルいよぉ....」
ここまで、読むとわかるが、結構実装のハードルが高そうだと思う。
だが、そんなことはない。
実は、簡単にテストケースが作れる奥の手がある。それが、Test Generator だ。

まず、以下のコマンドを実行してみる

yarn playwright codegen wikipedia.org

そうすると、ブラウザが立ち上がり、実際に操作すると、テストコードを自動生成してくれる。

ただ、デメリットとしては、以下のものがある。

• 結構いらない判定や処理を作ってしまうので、リファクタリングが必要になる
• テスト前の事前処理(test.beforeEach)など、複雑なテストケースは書けない
• テキストベースでDOMを検知しているので、同じワードがあった場合は、動作が不安定になりやすい
• iframe は検知が難しいので、直接書く必要がある
• Drag and Drop みたいな複雑な操作は出来ないので、直接書いて作成する必要がある
  • (page.dragAndDrop() で対応可能)

テストの実行

以下コマンドを実行する

yarn playwright test

おすすめの書き方

以上を踏まえると、以下のように書くのがおすすめ。

1. Test Generator で実際に操作して、雛形を作成する
2. セレクタやテストケースの設計などをリファクタリングする
3. 最後にテストを実行して問題ないか確認する

最後に

公式 Docs に、何でも書いているので、一読するのがおすすめ。