Chrome 97のDevToolsに実装されるブラウザ操作記録についての活用方法を考える

この記事はセゾン情報システムズ Advent Calendar 2021 15日目の記事です。

背景

ブラウザの操作を記録する機能が Chrome のバージョン 97 に実装されます。
参考記事: https://www.publickey1.jp/blog/21/chrome_97devtoolswebpuppeteer.html
特別なツールのインストールも不要、Chrome のバージョンアップのみで対応できるので活用方法を考えてみたいです。

補足

• 97 は2022/1 にリリース予定。
• 今すぐ試したい場合は　デベロッパー向け Google Chrome をインストールすることで機能を確認できます。
  • https://www.google.com/intl/ja/chrome/dev/

使い方(ブラウザの操作記録)

1. Chrome 97 を用意して起動
2. 適当なページを開く
3. F12 押下などでデベロッパーツールを起動
4. 歯車横の「:」をクリック → More Tools → Recorderを選択
5. 「Start new recoding」ボタンをクリック
6. 適当な名前を入力
7. Start new recoding ボタンをクリック
8. ブラウザを操作
9. End recoding ボタンをクリック
10. ゴミ箱アイコンの横にある上矢印のエクスポートボタンをクリック
11. 記録した操作を javascript で保存できる

活用方法を考える

E2E(End to End) テストの実装

エクスポートされるのは puppeteer のコードです。
puppeteer はヘッドレスでブラウザを操作できるライブラリで E2E テストでよく使われます。
本来はブラウザの操作を javascript で記述していくのですが、その手助けになるかもしれません。

エクスポートされたスクリプトとゼロからのテストの比較

エクスポートされたスクリプトの抜粋です。他には共通で使用する関数も生成されています。

  {
    const targetPage = page;
    const promises = [];
    promises.push(targetPage.waitForNavigation());
    await targetPage.goto("https://www.hulft.com/");
    await Promise.all(promises);
  }
  {
    const targetPage = page;
    const element = await waitForSelectors(
      [
        ["aria/サイト内検索"],
        [
          "body > div.ccm-page.ccm-page-id-1.page-template-top > header > div > div > div.header-menu-content.toggle-menu-content > div > div > div.header-search > form > p > input[type=text]",
        ],
      ],
      targetPage
    );
    await element.click({ offset: { x: 125, y: 8 } });
  }

puppeteer のテストのサンプル(https://zenn.dev/at946/articles/2681c3fec1d9bf より)

describe('サンプルテストスイート', () => {
  test('トップページでアプリ名が表示されていること', async () => {
    await page.goto('http://localhost:3000')
    await expect(await page.$eval('h1.title', el => el.innerText)).toBe("app")
  })
})

エクスポートされたスクリプトはあくまでも puppeteer のスクリプトです。
E2E テストとするためには、Jest などのフレームワークと合わせてテストにする必要があります。
テストする操作が大量に存在する場合は、エクスポートしたスクリプトを参考にすることで工数が削減できるかもしれません。

バグレポートに添えて

Jira や GitHub Issue でバグレポートをする際、再現手順やスクリーンショットを提供することが多いかと思います。
しかし、開発者側で再現せず認識合わせに時間がかかることもままあります。
このような場合にブラウザ操作のスクリプトを添付することで確実な再現手順を提供できるかもしれません。
バグ修正時に前述の E2E テスト実装の参考にしたり、事象を確認するためにスクリプトを動かすことなどもできます。

スクリプトを実行してブラウザの動きを見る

1. node をインストール
2. 適当なフォルダで node init して初期化
3. npm i puppeteer で puppeteer を追加
4. エクスポートしたスクリプトのファイルをコピーする
5. vscode などで開く
6. 以下を参考にスクリプトを編集して headless: false とする
   • https://github.com/puppeteer/puppeteer#default-runtime-settings
7. ターミナルからスクリプトを実行する node ./エクスポートしたスクリプト.js
8. ブラウザが起動して操作が再生される。

まとめ

ぜひ触ってみましょう!