スクリプト作成者と脚本家のデバッグ

この記事はもともとChecly ' sに掲載されたLearn Puppeteer & Playwright
スクリプトが期待通りに動作しない理由、または失敗の根本原因が何であるかを理解することは、自動化の重要な技術です.その重要性とその時々詐欺的な複雑さを考えると、デバッグは非常に若干の注意を受けるべき話題です.
この記事では、初心者を正しい方向に向けるための基本的なコンセプトとツールを探ります.

意識がまず

スクリプトデバッグは、観察と理解についてです.実行中に失敗した原因を見つけるのは、あなたの知識次第です.

あなたが見ているスクリプトは何をするべきか

スクリプトが実行中のアプリケーションは、スクリプトの各ステップで動作するようになっています

デバッグセッションに近づいたら、上記の点を注意してください.このステップをスキップする方法は、より多くのあなたがそれを保存するよりも、追加の時間がかかりそうです.

エラーメッセージ

エラーメッセージはすべてのシナリオには存在しません.なぜスクリプトが通過するのか理解しているのかもしれません.しかし、我々がエラーメッセージにアクセスするとき、我々は我々を案内するためにそれを使うことができます.
自分自身のエラーは、スクリプトが間違っているのを理解するのにいつも十分ではない.しばしば、エラーとその根本原因の間の複数の程度の分離がありえます.例えば、"Element not found" エラーは、要素がページ上で見つからないという事実を警告しているかもしれませんが、ブラウザが最初の場所で間違ったURLをロードするように作られたためです.
エラーメッセージを読み、すぐに結論にジャンプの簡単なトラップに該当しないでください.むしろ、エラーメッセージを取る、必要に応じてそれを研究し、あなたとknowledge of script and app under test そして、あなたの調査の到着時点ではなく、パズルに最初の作品として扱います.

Good knowledge of the automation tool you are using will also help add more context to the error message itself.

可視化

ヘッドレスブラウザスクリプトがGUIなしで実行されるなら、アプリケーションの状態の視覚的評価は追加のステップを必要とします.
つの可能性は、スクリプトの特定の部分にスクリーンショットを追加することです.例えば、問題のあるクリックまたはページ遷移の前後に
脚本家:

...
await page.screenshot({ path: 'before_click.png' });
await page.click('#button')
await page.screenshot({ path: 'after_click.png' });
...

人形遣い

...
await page.screenshot({ path: 'before_click.png' });
await page.waitForSelector('#button');
await page.click('#button')
await page.screenshot({ path: 'after_click.png' });
...

スクリプトの実行をよりよく観察するもう一つの方法は、ヘッドモードで実行することです.
脚本家:

...
const browser = await chromium.launch({ headless: false, slowMo: 20 });
...

人形遣い

...
const browser = await puppeteer.launch({ headless: false, slowMo: 20 });
...

我々は、それから微調整することができますslowMo オプションは、実行間のミリ秒の遅延を追加するには、実行があまりにも高速に従うことはないことを確認します.

ログの増加

時々、オートメーションツールの目を通して実行を試してみる必要があります.追加のログは、それが実行されると、すべてのコマンドを介してステップバイステップを取ることによって助けることができます.
脚本家:

DEBUG=pw:api node script.js

人形遣い

DEBUG="puppeteer:*" node script.js

devtoolsへのアクセス

豊富な情報はChrome Developer Toolsを通じて入手できます.私たちは、我々のブラウザを設定することができますdevtoolsタブを既に開いて起動する(これは自動的に無効にヘッドモード)、何かが期待通りに動作しないときに役立つことができます.コンソール、ネットワークと他のタブの注意深い点検は、隠れたエラーと他の重要な発見を明らかにすることができます.

脚本家:

...
await chromium.launch({ devtools: true });
...

人形遣い

...
await browser.launch({ devtools: true });
...

また、コンソールを使用して、現在の状態のページのセレクタを直接試してみることもできますdocument.querySelector or document.querySelectorAll .

PlayWrightを使用している場合は、デバッグモードで実行することもできますPWDEBUG=console node script.js . この規定はplaywright 私たちも試してみることができるブラウザのオブジェクトPlaywright-specific selectors .

劇作技師

Playwrightインスペクタは、追加のデバッグ機能を公開するGUIツールですPWDEBUG=1 npm run test .
インスペクタは、我々のスクリプトの各命令を簡単にステップし、期間、結果、および各機能の明確な情報を与えることができます.これはgetting to the root cause より一般的なエラーの一部.

The Inspector includes additional handy features such as selector generation and debugging, as well as script recording.

更なる読書

Debugging challenges

Working with selectors

表紙画像"Manual descent simulation in the centrifuge" そばAstroSamantha ライセンス下CC BY 2.0