13日目: playwright を探訪

業務では selenium を使うことが多いのだが、安定性が高そうな playwright が気になっている。

ググって発見したフューチャー技術ブログさんにて、ちょうどよい全7回の連載記事があったので、そちらを参考にしながら探訪してみる。

future-architect.github.io

今回は hello-playwright ディレクトリを作って、イチから playwright を触ってみる。

セットアップ

$ mkdir hello-playwright && cd $_
$ npm init -y
$ git init
$ git add .
$ git commit -m "Initial commit"

playwright をインストール。ウィザードが表示されるが素直に true やら false やらのおすすめに乗っかる。

$ npm init playwright@latest

しばらく待つとインストールが完了する☕

codegen に触れる

playwright には codegen というコマンドがあり、ブラウザでの操作をコードに変換してくれる。

$ npx playwright codegen https://playwright.dev/

こんな感じの画面が立ち上がる。

要素は選択することができて、Chrome の developer tools のインスペクタのようにクリックすると、もう1つのウィンドウにレコーディングされる。

たとえば画面中の「GET STARTED」をクリックすると...

テストコードもコピーできるので、そのまま貼り付ければ動くコードになるので本当に便利そう(ゆえにコードジェネレータなのね、すごい)

テスト実行

codegen で生成されたコードを貼り付けて、適当な expectation を付与してテスト実行してみる。

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

test('test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
});

...とそのまえに npm init で生成されたテストを一通り動かしてみたい。

素のディレクトリ作成から始めたので、TypeScript もセットアップされていないため、 npm init typescript@latest でセットアップ(知っていたわけではなくて、適当にこれでいけるんじゃないかなと思ったら、実際にセットアップできてしまった)

環境ができたのでテストを実行してみる。

$ npx playwright test tests/example.spec.ts

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

To open last HTML report run:

  npx playwright show-report

テストがパスしたので、レポートを確認してみることに。

顧客が本当に欲しかったもの感がすごいにじみ出ている。

エラーレポートを CI で確認できたら、CI 固有の振る舞いなども確認できてよさそうだ。これはしびれる!

今回はフィーチャー技術ブログさん1日目の記事を参考に、基本的な使い方を学んでみたが、明日は一気に最後まで学んでみたくなった。

future-architect.github.io

やっぱりウェブ技術って楽しいなあ。