一覧画面や検索結果画面など、テーブル形式のUIはWebアプリケーションで頻繁に登場するコンポーネントです。しかし、行数が動的に変わったり、各行に対して同じ操作を繰り返す必要があったりと、テストの実装において工夫が必要な場面も多くあります。
このページでは、テーブルのテストでよく直面するケースとして、「各行の特定のボタンを全てクリックしたい」「X行表示されていることを確認したい」「表示順に関わらず特定の行の要素をクリックしたい」という3つのシナリオを取り上げ、MagicPodの機能を活用した実装方法を紹介します。
目次
各行の特定のボタンを全てクリックしたい
繰り返し＆条件分岐コマンドを使用する
テーブルの最大行数分かっている場合は、繰り返しコマンドと条件分岐コマンドを用いて実装可能です。
例えばこのような商品一覧のアプリで、テーブルは最大20行であり、全ての詳細ボタンを押したいとします。
詳細ボタンのロケータを変数つきのロケータに変更する
まずは詳細ボタンのロケータを「行数」という変数つきのロケータに変更します。
XPathロケータ: (//button[text()='詳細'])[${行数}]
繰り返し＆条件分岐コマンドを追加する
次に以下のようなステップを組みます：
固定値を保存コマンドで「行数」という変数に初期値として「1」を設定します
「行数」が20になるまで、以下の処理を繰り返します:
- 「詳細」ボタンが画面に表示されているかを確認する
- もし表示されていれば:
- 「詳細」ボタンをクリック
- 開いた詳細画面の「×」ボタンをクリック
- もし表示されていれば:
- 四則演算コマンドで「行数」変数を1増やす
ページ上の全リンクが正しいか確認コマンドを使用する
各行の特定のボタンを全てクリックしたい目的がリンク切れの確認である場合、「ページ上の全リンクが正しいか確認」コマンドで確認できます。
本コマンドではページ内全ての表示されているリンク(a要素)が壊れていないことを確認します。リンク先のHTTPステータスコードが200/300番台以外の場合は「壊れている」と扱われます。
参考：リンクが正しいか確認
X行表示されていることを確認したい
行数の情報を含んだロケータを使用する
テーブルの表示行数を確認するには、XPathロケータを活用する方法があります。
表示行数が想定通りであることを確認する
例えば、テーブルに3行表示されていることを確認したい場合、3行目のセルを指定するロケータを使用し、その要素が「表示されている」ことを確認します。
XPathロケータ: (//tbody)[1]/tr[3]/td[1]
このロケータは、ページ内の1番目の<tbody>内、3行目の1列目のセルを指定しています。この要素が画面上に表示されていれば、少なくとも3行が存在することを確認できます。
表示行数が想定を超えていないことを確認する
4行以上表示されていないことを確認したい場合は、4行目のセルを指定するロケータを使用し、その要素が「表示されていない」ことを確認します。
XPathロケータ: (//tbody)[1]/tr[4]/td[1]
このロケータは、同じく1番目の<tbody>内、4行目の1列目のセルを指定しています。この要素が画面上に存在しない（表示されていない）ことを確認することで、テーブルが4行以上にならないことを検証できます。
このように「3行目が表示されている」かつ「4行目が表示されていない」という2つの条件を組み合わせることで、テーブルにちょうど3行だけ表示されていることを確認することができます。
行数が変動するため、ロケータの値を毎回変更したい場合は、変数つきロケータをご活用ください。
AIアサーションを使用する
「AIで確認」コマンドを使うことで、生成AIによる行数確認ができます。
プロンプト例：
商品一覧テーブルにデータが3行表示されていることを確認
スクロールすると表示される要素も確認したい場合は、以下のようにスクロールコマンドを入れて複数回AIアサーションを実行してください。
参考：AIアサーション
テーブル画面のテストでのAIアサーションの活用法についてはこちらのブログでも紹介しています。
画像差分チェックを使用する
より厳密に表示行数を確認したい場合は、画像差分チェックを使用した確認をお勧めします。
毎回表示内容が変化する場合は除外領域を設定するなどの工夫が必要となります。詳しくはヘルプページを確認してください。
参考：画像差分チェック
表示順に関わらず特定の行の要素をクリックしたい
行の内容を特定する情報を含んだロケータを使用する
下図の商品一覧で、「いちご」の行の「詳細」ボタンをクリックしたいが、テスト実行ごとに行の順番が前後する可能性があるとします。
この場合、商品名が各行で重複しない一意なものであれば、商品名を含んだロケータを使用することで対応できます。
XPathロケータ: (//tbody)[1]/tr[td[text()='いちご']]//button[text()='詳細']
また、事前に商品名を変数に格納しておき、その商品名の行の「詳細」ボタンをクリックする、といった指定方法も可能です。
XPathロケータ: (//tbody)[1]/tr[td[text()='${商品名}']]//button[text()='詳細']