Playwrightに挑戦 【第1回】環境構築編

Autify、MagicPodときたらmablと行きたいところですが、先にPlaywrightを触ることにしました。

かつてSeleniumのテスト自動化経験(実装,運用,メンテ)で高まった自己肯定感も業務から離れて地の底に落ち…環境構築とコーディング要素を含むツールを無事に使えるようになるのかやっていきたいと思います。

Playwrightとは

Fast and reliable end-to-end testing for modern web apps | Playwright

Microsoftが提供しているE2E自動テスト自動化フレームワークとなり、標準で以下のような便利な機能があります。

• テストコード自動生成

• Auto waiting(要素が現れるまで一定時間待ってくれる)

• スクショ撮影

• 複数ブラウザ対応(Edge,Chrome,Firefox,Safari)

Playwrightを選んだ理由

cypress vs playwright vs puppeteer vs selenium-webdriver vs testcafe | npm trends

• 2023年頃からダウンロード数が伸びていて勢いがある

• テストコード自動生成機能がある

• テスト実行スピードがCypressと比較すると速いらしい

• 困ったらPlaywrightを使ったことがある同僚に質問できそう

環境構築

Node.js インストール

LTS版をインストールする

Node.js — Run JavaScript Everywhere

Playwright インストール

1. Playwrightの作業用フォルダを用意する

2. ターミナルで操作1の作業用フォルダに移動する

3. 以下のコマンド実行する

npm init playwright@latest

インストール中の確認事項と私の選択肢

• Ok to proceed?　→　Yes

• Do you want to use TypeScript or JavaScript?　→　JavaScript

• Where to put your end-to-end tests?　→　tests

• Add a GitHub Actions workflow?　→　No

• Install Playwright browsers　→　Yes

4.ターミナルにHappy hacking!と表示されたらインストール成功
   作業用フォルダに設定ファイルなどが生成される

テスト実行のお試し

以下のコマンドを実行する
testsフォルダ配下にある「example.spec.js」が実行される

npx playwright test

最後に

環境構築は沼にはまることなく無事に終わりました。
SeleniumはIDEの設定で心が折れそうになったこともあり、精神的な負担が少ないのはありがたいです。

少し間が空くかもかもしれませんが、次回は自動テストの実装をやっていきたいと思います。