このチャプターの目次
CDPを使ってブラウザ操作してみる
CDP とは Control browser using Chrome DevTools Protocol になります。
これを使うと、ヘッドレス Chrome でブラウザテストができるようになります！
さっそく見ていきましょう。
まずは runners の設定から。
これはもうおまじないだと考えてください。
ステップごとに説明していきます。
actions セクションでブラウザの操作手順を配列で指定します。
- navigate: https://zenn.dev/
URL を zenn.dev にしてアクセスします。 - click: '#header-search'
指定したセレクターの要素をクリックします。#header-searchは実際にはヘッダーにある虫眼鏡です。 - waitVisible: '#input-search-form'
指定したセレクターの要素が表示されるまで待ちます。#input-search-formは実際には検索窓です。 - location
今アクセスしているページの URL を取得します。
current.urlに URL が格納されます。
流れ的には TOP ページを開いて虫眼鏡をクリックして検索窓が表示された際の URL の遷移先を検証しています。
次に検索ワードを入力するステップになります。
CDP の新しい操作は以下の通りなります。
- sendKeys
キー入力します。selでセレクターを指定し、input[id=input-search-form]は実際には検索窓の input フォームになります。
valueに入力するワードを指定しています。変数から展開しています。 - wait
timeは停止する時間を指定します。
一連の処理で、検索窓に変数（vars.keyword）を入力して URL が変わることを検証しています。
変数の使い方は "変数を使ってみる" を参照ください。
CDP の新しい操作は以下の通りなります。
- screenshot
ページイメージをキャプチャします。
キャプチャしたイメージのデータは current.png に格納されます。
最後に前のステップでキャプチャしたイメージを dump で出力しています。
dump によるファイル保存の方法は "レスポンスをdumpして外部JSON化する" を参照してください。
通常実行ではヘッドレスモードでブラウザが動作するので中身の挙動がわかりません。
CDP の actions の調整をしているときにブラウザの挙動を確認したい場合にヘッドフルモードで実行する場合は環境変数（RUNN_DISABLE_HEADLESS=1）を指定してください。
$ RUNN_DISABLE_HEADLESS=1 runn run day21/cdp.yml --verbose
=== CDPを使ってブラウザ操作してみる (day21/cdp.yml) ... ok
--- 検索アイコンをクリック (startSearch) ... ok
--- キーワードを入力してEnter (inputKeyword) ... ok
--- スクリーンイメージをキャプチャする (captureScreen) ... ok
--- スクリーンショットを保存する (saveScreenShot) ... ok
1 scenario, 0 skipped, 0 failures
ブラウザテストも API テストと同様、簡単にできることがご理解頂けたかと考えます。