見出し画像

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

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

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

Playwrightとは

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

  • テストコード自動生成

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

  • スクショ撮影

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

Playwrightを選んだ理由

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

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

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

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

環境構築

Node.js インストール

LTS版をインストールする

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の設定で心が折れそうになったこともあり、精神的な負担が少ないのはありがたいです。

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


この記事が気に入ったらサポートをしてみませんか?