Playwight E2E test ブラウザ操作を自動化したい

TL;DR

playwright使ってブラウザ操作を自動化しつつE2Eテストしてみたら、めっちゃ簡単。

前提

node -v
# Node 20x以上がインストールされていること

セットアップ

playwrightをセットアップする。
今回、速度重視でJavascriptを選択。

npm init playwright@latest
# 以下のように対話していく
✔ Do you want to use TypeScript or JavaScript? · JavaScript
✔ 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) · false

コードファイルや設定ファイルなどいろいろ出来上がる。

利用

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - ./tests/example.spec.js - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.js - Demo Todo App end-to-end tests
  - ./playwright.config.js - Playwright Test configuration

UIモードで利用してみる

npx playwright test --ui

UIが出てくるので、緑色の再生ボタンを押す

全てグリーンで成功する。
has titleのテストの中身をみると、ちゃんとタイトルにPlaywrightが含まれるため、成功している。