🌊
自動テストでplaywrightを使ってみた
playwrightとは
すでに注目されているライブラリではあるのですが、最近開発チームで導入したためまとめてみました。
まだまだ導入したばかりで勉強中です。
導入理由
元々Seleniumでテストを書いていたのですが、APIエラー時のテストのみ別のライブラリで実装してみようという話になっていました。
playwrightには下記のような特徴や利点があり、選択するに至りました。
- Chrome、Safari、Firefoxといった色々なブラウザでE2Eが実行できる
- 並行でテストが実行されるため実行時間の短縮になる
- Microsoftが作っている
- puppeteerと書き味が似ているとあり実装コストが低そう （puppeteer開発経験者がいるため）
導入方法
Getting startedを読んで導入します。
テストの構成はplaywright.config.jsで行います。クロスブラウザでテストしたいときもMultiple browsersを参考に設定する必要があります。
よく使うコマンド
書いた後に公式でまとまっていることに気づいてしまった・・・。
実装するときに覚えておきたいこと
コードの自動生成
codegenが実行されブラウザが立ち上がるので、テストの手順を再現するとテストのコードを生成してくれるすぐれものです。
デバイスをシュミレートした状態で自動生成することもできます。
これはすごい！
デバックツール
InspectorというGUIツールが立ち上がり、デバックが容易にできます。
一時的に処理を止めて、ブラウザの状態など確認することができます。
他にもデバックの仕方が詳しく載っています！
Auto-waiting
要素が確認できるまで自動待機してから要求されたアクションを実行するようになっています。
確認事項はアクションごとに違うためAuto-waitingを参考に。
Timeoutの概念もあり、時間が経っても要素が確認できない場合はTimeoutErrorが発生する。
わざわざ要素を待つような実装を書かなくて良くなっているのがよいですね。
導入時に参考にしたリンク集
Discussion