要約
テスト自動化の学習として、Node.jsとPlaywrightを使ったテスト環境を構築した際、安定性重視のLTSバージョンの重要性を実感した失敗談をお伝えします。
初めに
この記事では、Playwrightのセットアップ方法とNode.jsのバージョンによるトラブルを経験した備忘録を紹介します。
Playwrightを試してみたい方や、Node.jsのバージョン管理に興味のある方の参考になれば幸いです。
作業環境
| OS | Node.js | npm | nvm |
|---|---|---|---|
| Windows10 | v20.15.1 | v10.8.2 | v1.1.12 |
OS, Node.js, npmは開発していたとき(2024年8月)のものです。nvm(nvm for windows)は後日実装しました。
環境構築
1. ディレクトリの作成
任意の場所に新しいフォルダを作成します。
2. Node.jsのインストール
公式サイトからLTS版をダウンロードしてください。
nvmを使ったバージョン管理もおすすめですが、Windowsでは少し工夫が必要です。こちらも別の機会に詳しく触れたいと思います。
3. CLIの起動
PowerShellやGit Bash（要インストール）を使用。
4. Playwrightのセットアップ
以下のコマンドを実行してPlaywrightをインストールします。
npm init playwright@latest
必要に応じて、dotenvなどのライブラリも追加しましょう。
プロジェクト構成の確認
正常に作成されていれば、1のディレクトリ下に、以下のディレクトリ・ファイルを確認できます：
node_modulestests/example.spec.tspackage.jsonpackage-lock.json-
playwright.config.ts
など
ここまで完了すれば、example.spec.tsをそのまま実行する準備が整います。
Playwright設定ファイルの基本
playwright.config.tsでテストに関する各種オプションを指定できます。以下が主要な設定項目です：
- testDir：テストファイル保存ディレクトリ
- retries：テスト失敗時の再試行回数
- workers：並列実行の最大スレッド数
- timeout：テスト全体や個別のタイムアウト時間
より詳細な設定については、公式ドキュメントを参照してください。
トラブル
最新(Current)のNode.js（当時はバージョン22.11.0）でPlaywrightを使おうとした際にエラーが発生しました。
PlaywrightはLTS版（長期サポート版）での動作を前提としているようで、最新版では動作しないこともあるようです。が、この原因特定にかなりの時間を浪費してしまいました。過去に別のPC環境で成功していたことも原因でしょう。
LTS版（Node.js 20.15.1）に戻したところエラーが解消され、無事動作しました。
学んだこと
- Node.jsにはLTS版とCurrent版があり、特にテストツールを利用する際は安定性のあるLTS版を使用することが推奨されるようだ
2.nvmを使ってNode.jsのバージョンを切り替えると、バージョンごとの柔軟な対応が可能となるので導入しておく。
まとめ
PlaywrightとNode.jsを使ったテスト環境の構築には、LTS版を利用したり、nvmでバージョン管理することで安定した開発を始められます。
安定性と効率を両立するために、特に制約のない場合はLTS版を使用しましょう、というお話でした。
ご意見、ご指摘お待ちしております。
最後に
以下は、最初に作成したGmailログイン用のサンプルコードです（2段階認証は無効）。
import { test, page } from '@playwright/test';
import dotenv from 'dotenv';
dotenv.config();
const user = process.env.GMAIL_USER ?? '';
const password = process.env.GMAIL_PASS ?? '';
test('Gmailログインする @demo', async() =>{
await page.goto('https://accounts.google.com/signin/v2/identifier');
await page.fill('#identifierId', user);
await page.click('button:has-text("Next")');
await page.fill('#password > div.aCsJod.oJeWuf > div > div.Xb9hP > input', password);
await page.click('button:has-text("Next")');
await page.waitForTimeout(2000);
await expect(page.locator('#gs_lc50 > input:nth-child(1)').toBeVisible();
});
参考にしたサイト(公式ページ)
https://playwright.dev/docs/api/class-testoptions
https://playwright.dev/docs/input
https://playwright.dev/docs/api/class-locatorassertions
https://playwright.dev/docs/api/class-page
https://playwright.dev/docs/intro