DOM履歴

概要

この機能は、テストが実行されたとおりに視覚的に再現するのに役立ちます。トレースモードが有効になっている場合、Nightwatchは各ステップの後でHTML DOMスナップショットをキャプチャします。これらのHTML DOMスナップショットは、HTMLレポート自体で直接表示できます。特定のステップが実行されたときに要素を検査することもできます。これは、テストのデバッグに役立ちます。

このガイドでは、以下の内容を学習します。

  1. DOM履歴を有効にする方法
  2. DOM履歴を表示する方法
  3. DOM履歴を使用してデバッグする方法

DOM履歴の有効化

DOM履歴の有効化は非常に簡単です。 --trace フラグを付けてnightwatchテストを実行するだけです。

例：

npx nightwatch --trace

または

npx nightwatch <path to test file/folder> --trace

--trace フラグを付けてテストを実行すると、Nightwatchはアプリケーションを変更できる各ステップの後で、テスト対象アプリケーションのDOMスナップショットをキャプチャします。アプリケーションの動作を変更できないステップのスナップショットはキャプチャされません。たとえば、アサーションは基になるHTMLを変更できないため、そのようなステップのスナップショットはキャプチャされません。

DOM履歴の表示

前のセクションでは、NightwatchがHTML DOMスナップショット履歴をキャプチャできるようにする方法を学習しました。デバッグするには、テスト実行のさまざまなステップでDOMスナップショット履歴を表示および分析することが重要です。

手順

  1. テストの実行が完了したら、レポートファイルのパスをコピーしてブラウザに貼り付けることで、レポートを開きます。
  2. 左パネルから失敗したテスト/フックを選択します。
  3. テスト/フックを選択すると、テストの詳細タブにステップが表示されます。
  4. ステップをクリックすると、ステップが実行された直後のDOMスナップショットがどのように見えるかを確認できます。

DOM History

異なるステップをクリックすると、右パネルのHTML DOMスナップショットが更新され、devtoolsを使用して検査できるようになります。

DOM履歴を使用したデバッグ

テストエラーのデバッグ中にこれがどのように役立つかを理解しましょう。テストでエラーが発生した場合、レポートはテストのどのステップで失敗したかを正確に示します。デバッグするには、失敗したステップとその前のステップを調べることをお勧めします。

HTMLスナップショットはブラウザ自体のレポートに埋め込まれているため、以下に示すようにdevtoolsを使用してスナップショットを簡単に検査できます。

Inspect element with DOM history

前のステップのDOMスナップショットを検査すると、問題のデバッグに役立ちます。前のスナップショットが予期したものと異なる場合は、前のステップを変更する必要がある場合があります。前のスナップショットが正しいように見える場合は、次のことができます。

  1. 使用されているセレクターがDOMスナップショットどおりに正確かどうかを確認します。
  2. 操作している要素の状態を検査して、操作性が何らかの形で妨げられているかどうかを理解します。

デバッグをお楽しみください！