自動テストチュートリアル

Playwright、Seleniumなどの自動テストツールを学ぼう

ブレークポイントで止める

先ほど「デバッグモード」での実行をおすすめした理由が、この「ブレークポイント」にあります。

ブレークポイントを設定するとテストの動きを好きな場所で「一時停止」させ、その瞬間の画面の状態や、プログラムの内部をじっくり観察できます。


ブレークポイントの設定方法

設定はとても簡単です。VSCodeで、止めたいコードの行番号の左側をクリックするだけ。すると、

赤い丸印が表示されます。これが「一時停止」の目印です。

止めた後は赤枠左の再生ボタンで一気に進めたり、赤枠右のボタンで1行ずつ進めることができます。

ブレークポイントの設定

今回覚えておきたいポイント

ポイント 説明
好きな場所で止められる ブレークポイントを設定した場所で、テストの実行がピタッと一時停止します
いくつでも設定可能 しおりが何枚でも挟めるように、ブレークポイントも好きなだけ設定できます
デバッグモード専用 この「一時停止」機能は、デバッグモードでの実行時のみ有効です。通常モードでは無視されます
停止後も操作できる 停止した後は、1行ずつ慎重に進めたり(ステップ実行)、次のブレークポイントまで一気に進めたり(継続実行)と、自由に操作できます

やってみよう

手順動画

手順

  1. tests/document-1/demo-test.spec.ts ファイルを開く
  2. 15行目と24行目にブレークポイントを設定する
  3. デバッグモードで実行する
  4. 15行目で一時停止したら、1行進めたり、一気に進めたりを試してください

このステップのゴール

ブレークポイントの使い方と1行進める、一気に進めるを体験できたら完了です。