Clever Geek Handbook

Puppeteerテストの自動生成はChromeDevToolsに組み込まれています

Chrome 89では、DevToolsはPuppeteerでJSスクリプトを自動生成するための実験的なサポートを追加します。





概略的には、次のように機能します。目的のページを開き、DevToolsでアクションの記録を有効にしてから、通常の方法でページ上で何かを実行します（リンクとボタンをクリックし、他のページに移動し、テキストを入力します）。アクションが実行されると、ブラウザーは、PuppeteerAPIを介したすべてのアクションを説明するJSコードを含む仮想レコードファイルを[DevTools]タブに入力します。その後、記録を停止して、結果のコードを実際のJSファイルとして保存できます。





新しい機能（Puppeteer Recorderと呼ばれる）を示すために、作成者は小さなデモページを用意しました（どのページでも確認できますが、サイトからの前提条件は必要ありません）。





ただし、最初に、これはまだ初期の実験機能であるため（作成者は、Puppeteer Recorderの開発と拡張を計画していますが）、DevTools設定の[Experiments]タブでRecorderアイテムとして有効にする必要があります。





DevToolsの実験的な機能を有効にした後、再起動する必要があります
DevToolsの実験的な機能を有効にした後、再起動する必要があります

これで、DevToolsで[ソース]パネルを開き、そこに表示される[記録]タブを選択できます。





次の名前の新しい録音ファイルを追加しましょうtest01.js



：





画面の下部にある[記録]ボタンを使用して、アクションの記録を開始します。





ブラウザはすぐにファイルに開始コードを入力し、ページでの各アクションの後にコードを補完します。





[記録]ボタンをもう一度クリックすると、ブラウザは記録を停止し、必要な閉じ括弧でコードを補完し、結果のファイルを保存できます。





:





const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.goto("https://jec.fyi/demo/recorder?");
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("aria/your email");
        await element.click();
    }
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("aria/your email");
        await element.type("foo@bar.com");
    }
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("aria/your name");
        await element.type("baz");
    }
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("html > body > main > form > input[type=number]:nth-child(3)");
        await element.type("23");
    }
    {
        const targetPage = page;
        const frame = targetPage.mainFrame();
        const element = await frame.waitForSelector("html > body > main > form");
        await element.evaluate(form => form.submit());
    }
    await browser.close();
})();

Puppeteer Recorder :





  • ( , ) ( , Puppeteer)





  • ( ), ( , , , )





  • expect-, e2e-





, , Puppeteer Recorder ( ): , Puppeteer Recorder , , ( , Puppeteer). Puppeteer ( Cypress ), Jest , Playwright .





通常、開発者が統合テストを作成して維持するにはコストがかかるため（多くの場合、このようなテストは単体テストよりも安定性が低く、複雑です）、このような自動生成テストツールを使用すると、ビジネスの時間とリソースを大幅に節約できます。







More articles:


All Articles