テストの記録
Chrome DevToolsには、Chrome内で自動化されたステップを記録および再生できるレコーダーパネルがあります。これらのステップは、拡張機能を使用してWebdriverIOテストにエクスポートできるため、テストの記述が非常に簡単になります。
Chrome DevTools Recorderとは
Chrome DevTools Recorderは、ブラウザでテストアクションを直接記録および再生したり、JSONとしてエクスポートしたり（またはe2eテストでエクスポートしたり）、テストパフォーマンスを測定したりできるツールです。
このツールは簡単で、ブラウザに組み込まれているため、コンテキストを切り替えたり、サードパーティのツールを扱ったりする必要がないという便利さがあります。
Chrome DevTools Recorderでテストを記録する方法
最新のChromeをお持ちの場合、レコーダーはすでにインストールされており、使用できます。任意のWebサイトを開き、右クリックして「検証」を選択するだけです。DevTools内で、CMD/Control + Shift + pを押して「レコーダーを表示」と入力すると、レコーダーを開くことができます。
ユーザーの操作を記録するには、「新規記録を開始」をクリックし、テストに名前を付けてから、ブラウザを使用してテストを記録します
次のステップでは、「再生」をクリックして、記録が成功し、目的どおりに動作するかどうかを確認します。すべて問題がなければ、エクスポートアイコンをクリックし、「WebdriverIOテストスクリプトとしてエクスポート」を選択します
「WebdriverIOテストスクリプトとしてエクスポート」オプションは、WebdriverIO Chrome Recorder拡張機能をインストールした場合のみ使用可能です。
以上です！
記録のエクスポート
フローをWebdriverIOテストスクリプトとしてエクスポートした場合、テストスイートにコピー＆ペーストできるスクリプトがダウンロードされるはずです。たとえば、上記の記録は次のようになります
describe("My WebdriverIO Test", function () {
it("tests My WebdriverIO Test", function () {
await browser.setWindowSize(1026, 688)
await browser.url("https://webdriverio.dokyumento.jp/")
await browser.$("#__docusaurus > div.main-wrapper > header > div").click()
await browser.$("#__docusaurus > nav > div.navbar__inner > div:nth-child(1) > a:nth-child(3)").click()rec
await browser.$("#__docusaurus > div.main-wrapper.docs-wrapper.docs-doc-page > div > aside > div > nav > ul > li:nth-child(4) > div > a").click()
await browser.$("#__docusaurus > div.main-wrapper.docs-wrapper.docs-doc-page > div > aside > div > nav > ul > li:nth-child(4) > ul > li:nth-child(2) > a").click()
await browser.$("#__docusaurus > nav > div.navbar__inner > div.navbar__items.navbar__items--right > div.searchBox_qEbK > button > span.DocSearch-Button-Container > span").click()
await browser.$("#docsearch-input").setValue("click")
await browser.$("#docsearch-item-0 > a > div > div.DocSearch-Hit-content-wrapper > span").click()
});
});
一部のロケーターを見直し、必要に応じて、より回復力のあるセレクタータイプに置き換えてください。フローをJSONファイルとしてエクスポートし、@wdio/chrome-recorderパッケージを使用して、実際のテストスクリプトに変換することもできます。
次のステップ
このフローを使用すると、アプリケーションのテストを簡単に作成できます。Chrome DevTools Recorderには、次のようなさまざまな追加機能があります。
彼らのドキュメントを必ず確認してください。
