テーブルやリストで意図した要素を操作するにはどうしたらいいですか？

シナリオ作成時にテーブルの一番上の要素に対する操作をレコーディングし、その要素が「test0001」というテキストを持っているとします。しかしある時新しいレコードが追加され、二番目に「test0001」が移動し、一番目に「test0002」が新しく表示されている場合は、Autifyは二番目にある「test0001」の要素を対象にしてしまうなど、意図した要素を操作できない可能性があります。

この場合、常に一番上にある最新のレコードをクリックする前提のシナリオでは、後続のステップでテストが失敗することが考えられます。

現状テーブルやリストで、一番上やN番目、一番下など意図した要素を確実に対象としたい場合は、ロケータ機能を使う必要があります。

以下ロケータに設定するCSSセレクター/XPathの例を、いくつか紹介します。なお本記事で紹介しているCSSセレクター/XPathはあくまで例ですので、実際のサイト構造を確認し、適切なCSSセレクター/XPathを作成してください。

CSSセレクターでN番目の要素を対象にする

CSSセレクターにおいてN番目の要素を対象にしたい場合は、以下の構文が使えます。

• N番目

:nth-child(N)

• 最初

:first-child

• 最後

:last-child

もしもリストの2番目を対象にしたい場合は以下のようになります。

ul > li:nth-child(2)

テーブルのN行目・M列目にある要素を対象にする

テーブルの場合は行と列を指定する必要があります。trタグが行、tdタグが列を表すので、それぞれに何番目の要素を取得したいかを指定する必要があります。以下は1行目の1列目にある要素を取得するCSSセレクターです。最新のデータが一番上に来るテーブルの場合、このCSSセレクターは常に最新のデータが対象になります。

table > tbody > tr:first-child > td:first-child

以下のテーブルの場合赤枠で囲まれた要素が対象になります。

上述赤枠の対象要素はtd要素ですが、この要素の下にaタグで作られたリンクが存在します。このリンクをクリックしたい場合はCSSセレクターの末尾に a を追加します。

table > tbody > tr:first-child > td:first-child a

もちろん最終列も対象にできます。その場合は以下のようにtd:first-childをtd:last-childに変更します。

table > tbody > tr:first-child > td:last-child

テーブルで特定のテキストを持つ行の特定の列を対象にする

N行目・M列目のような指定ではなく、あるテキストを持つ要素が存在する行の、特定の列を対象にしたいケースもあるかと思います。例えばAutifyのシナリオ一覧テーブルから、シナリオ名が「test0001」の行の最後の要素を対象にしたい場合は以下のXPathを使用します。

//table/tbody/tr[td//*[text()='test0001']]/td[6]

緑枠で囲まれたtd要素が対象になります。

対象となった要素はtd要素ですが、この要素の下にはbuttonタグで囲まれたメニューアイコンが存在します。このbuttonタグを対象にしたい場合は、以下のようにXPathを変更します。

//table/tbody/tr[td//*[text()='test0001']]/td[6]//button

もしも検索したいテキストが毎回同じではなく、テスト実行ごとにJSステップや動的な値を使ってランダムに作成している場合は、JSステップを使用する必要があります。引数として別のステップで作成した検索したい文字列を受け取り、以下のJSスニペットの中で使用してください。

• テーブル内をテキストで検索し見つかった行の特定の列を操作する