playwrightとは
nodeで使用できるテスト自動化ツール。
seleniumを使ったことがあれば、まさにそんな感じ。
自動でブラウザを起動して、コードで選択した要素をポチポチ自動実行して、ページ遷移したり、値を期待値と比較したりできる。
他にもキャプチャ機能があり、初回に自動で撮影したキャプチャと、次回実行時に取得したキャプチャの差分があれば教えてくれる。
有料ツールと言われても文句言えない程度には活躍する。
ただ、1つでも変化があると以降のテストは実行されず、多数の画面遷移を伴うテストなどは不向き。ソースコードも共通化せずつらつら書く感じになるので、保守性も乏しい。
ゴールデンシナリオなど、主要なシナリオをリグレッションする目的で使用する。それだけでも、主要なフレームワークやパッケージのバージョンアップ時の影響調査などに非常に便利。
基本操作
DOM操作
DOM はセレクタを指定することで取得する。
ロケーターに取得した値を格納し、変数として使用できる。
以下では基本的にロケーターを使用した例を記載するが、メソッドの引数に直接セレクタを指定しても実行は可能。
セレクタを直接指定
await page.click("[セレクタ]");ロケーターを使用
const title = page.locator("[セレクタ]");
title.click();要素の取得（ロケーター）
page.locator("[セレクタ]");
const elm = page.locator("[セレクタ]");文字列で検索して取得
const elm = page.locator("text=expText");テキスト入力
fill("test");クリック
await page.click("[セレクタ]");locator に対しても実行できる。
const elm = page.locator("expText");
elm.click();ブラウジング
ブラウザを起動
page = await browser.newPage();起動したブラウザは、以降 page という変数で操作できる。
ページ遷移
page.goto([URL]);URL の取得
page.url();待機
await page.waitForTimeout(10000);引数はミリ秒で指定。上記では 10 秒となる。
要素が表示されるまで待機
page.waitForSelector("［セレクタ］");検証
テキストの一致
await expect(locator).toHaveText("expText");部分一致
await expect(locator).toHaveText(/expText/);引数は正規表現。または以下。
await expect(locator).toContainText("expText");表示／非表示
await expect(locator).toBeVisible();
await expect(locator).not.toBeVisible();URL の検証
expect(page).toHaveURL(/.*\/mmn\/mmn1.*/);引数は正規表現。スラッシュはエスケープしている。
最初と最後をスラッシュでくくるのは JS の仕様。
デバイス関連
キー入力
await page.keyboard.type("Philadelphia");マウス操作
ポインタ移動
await page.mouse.move(100, 100);スクロール
await page.mouse.wheel(0, 12000);スクリーンショットを取得する
await page.screenshot({ path: "example.png" });セレクタ
JavaScript の基礎なので省略。
できるだけ、一意である ID で取得しましょう。
画面をどれだけ保守的に作り込んできたかが、こういったところで試されます。
フォーム部品にはちゃんとIDを振っていますか？CSSはできるだけルールを決めて使用していますか？
テストの実行
npm testUI モードで起動
npm test --ui※ test コマンドをカスタムしている場合は、
npm test -- --uiとする。
便利な機能なのだが、ページ遷移を挟むとレンダリングがおかしくなり、通常では出ないエラーが発生することがある。
デバッグ
デバッグオプションを使用してテストを起動すれば、デバッグモードで実行される。
npm test --debugtest コマンドをカスタムしている場合は以下。
npm test -- --debugデバッグモードは以下の機能がある。
ブラウザが起動し、実際にどういった挙動をしているのか確認できる。
インスペクターウィンドウが起動し、ソースコード上のどこで停止しているのかを確認できる。
インスペクターウィンドウは開発者コンソールのような見た目をしているが、ここでブレークポイントを設定することはできない。
ソースコードに以下を記載することで、実行が一時停止するようになる。
await page.pause();一時停止した後、インスペクターウィンドウで再生アイコンをクリックすれば、テストが再開する。
設定
アップグレード
npm install -D @playwright/test@latestバージョン確認
npx playwright --version念のため以下も実行する。
npm ls @playwright/testここでバージョンが上がっていなければ、package-lock.json を削除して再度 npm install する。
【インシデント】
■ デバッグモードで起動したところエラー
Error: browserType.launch: Executable doesn't exist at C:\Users\%UserProfile%\AppData\Local\ms-playwright\chromium-1194\chrome-win\chrome.exeⅽhrome.exe が見つからない。以下を実行する。
npx playwright install
コメント