マイグレーションガイド
旧E2E Test(puppeteer)からマイグレーションを行うユーザ向けの案内ページです。
旧E2EとFrontTesterの互換性
旧E2EからFrontTesterでの改修項目をまとめます。
試験ディレクトリ構成、ファイル内容
旧E2Eと同じディレクトリ構成、ファイル内容になっており、旧E2E資材のまま実行が可能になります。
そのため、新たな改修は不要となります。
GUI
SDK Labから FrontTester をデプロイする設定を投入すると、SDK Portalの起動設定が変更され自動的にFront Testerと
連携します。
既存のSDKPortalのE2ETest画面がそのまま利用でき、E2ETest機能の試験実行エンジンが FrontTester に変更されます。
+E2ETest画面の使い勝手に変更はありません。
API
EndpointやbodyなどAPI仕様は変わっていません。
responseも旧E2Eに準拠して作成されているため、外部からAPIによる試験実行も旧E2Eと変わりなく可能であり、新たに改修の必要はありません。
state管理
FrontTesterでは旧E2Eのstatu.json
を用いたファイルによるstate管理から、redisを用いたstate管理に変更しています。
ファイル出力はログファイルは{試験jsファイル}-console.log
にその他stateに関してはresultSummary_01.json
に記述しますのでこちらをご確認ください。
スクリーンショットファイル名
スクリーンショットのファイル名がYYDDMMhhmmss-iii.jpeg
に変更になり、実行時間の確認が簡易化されています。
playwright puppeteer互換性対応
playwrightはpuppeteerの開発チームが新たに開発したツールとなっており、基本的な互換性を担保しています。
ここでは、先行してマイグレを行ったプロダクトで実際に必要となった改修ポイントを紹介します。
これら以外にも広く共有できそうな改修必要点ありましたら、ここに記述したいのでQmonusチームメンバーに連絡いただければと思います。
playwright公式サイトにpuppeteerからのマイグレーションガイドがありますので、細かい機能に関してはこちらもご確認ください。
https://playwright.dev/docs/puppeteer
なお、上記ページの全てを対応する必要はなく、実際は既存puppeteerコードで動作する箇所が多いと思いますので、まずはお使いのプロダクトで回してみていただければと思います。
evaluate
playwrightでのevaluateは1つの引数しか持てないため、複数の引数を渡す場合、配列、オブジェクトなどに変更が必要です。
https://playwright.dev/docs/api/class-page#page-evaluate
改修前(puppeteer)
await root.evaluate((x,y,z) => { await actions.logger(`3次元座標は ( ${x} , ${y}, ${z}) です`) }, x,y,z);
改修後(playwright)
await root.evaluate(([x,y,z]) => { await actions.logger(`3次元座標は ( ${x} , ${y}, ${z}) です`) }, [x,y,z]);
waitForSelectorのオプション
playwrightでは、オプションの指定の仕方が異なります。hidden
,visvle
などはstate
に入れる必要があります。
https://playwright.dev/docs/api/class-page#page-wait-for-selector
改修前(puppeteer)
await root.waitForSelector('#sampleBtn', {hidden: true});
改修後(playwright)
await root.waitForSelector('#sampleBtn', {state: "hidden"});
waitForNavigationのオプション
playwrightでは、waitUntil
はenumとなっており、<"load"|"domcontentloaded"|"networkidle"|"commit">
の1つを選択する必要があります。
https://playwright.dev/docs/api/class-page#page-wait-for-navigation
改修前(puppeteer)
await page.waitForNavigation({timeout: 120000, waitUntil: ["load", "networkidle0"]});
改修後(playwright)
await page.waitForNavigation({timeout: 120000, waitUntil:"networkidle0"});