要素のテキストを取得する
Autifyでは、JSステップで要素が持つテキストを取得し、後続のステップで使用することが可能です。
JSステップには以下2つの方法があります。
- 要素に対するJSステップで要素の取得はAutifyのAIに任せる方法。
- 通常のJSステップに要素のテキストを取得するスニペットをコピー&ペーストして、自分で取得したCSSセレクターを設定する方法
要素に対するJSステップを使用する方法
要素に対するJSステップには、通常のJSステップと比べて以下の利点があります。
- AutifyのAIが要素を取得するのでCSSセレクター/XPathの取得を省ける。
- 要素取得の処理を書かなくて良いので比較的少ないコードで済む。
- ページのローディング完了や要素の出現を自動で待ってくれる。
- テスト結果のスクリーンショットで対象要素がハイライトされる。
ステップの作成方法
-
レコーディング中に対象の要素を右クリックし、「Autify Recorder > JSステップを追加する」を選択し、保存します。
-
引数に
elementという値が設定されたJSステップがシナリオに作成されます。このelementにはAutifyのAIが取得した要素が格納されます。
すでに、要素が取得されている状態ですので、コード部分には要素のtextContentをreturnする以下の一文を書くだけです。
return element.textContent;
- テストを実行すると要素のテキストの取得が確認できます。
また通常のJSステップと違い、テスト結果のスクリーンショットで対象の要素がハイライトされるため、どの要素を対象としているのかがすぐに分かります。
トラブルシューティング
要素の取得に失敗する場合は、以下の方法で解決する場合があります。
通常のJSステップとスニペットを使用する方法
基本的には要素に対するJSステップを使用する方法をお勧めしますが、対象のページで独自の右クリックメニューを実装している場合、要素に対するJSステップを追加することができません。その際は、通常のJSステップを使用した方法をお使いください。
ステップの作成方法
-
JSステップをシナリオに挿入し、要素のテキストを取得するスニペットをコピーしてJSステップに貼り付けます。
-
CSSセレクター / XPathを取得するを参考に対象要素のCSSセレクターを取得し、
var selector = "<TODO: REPLACE SELECTOR>";の<TODO: REPLACE SELECTOR>と置き換えます。
// 例
var selector = "#doc_header > div.landing_top > div > div.landing_top_inner.center > h1";
- テストを実行すると要素のテキストの取得が確認できました。
その他
textContentで希望する要素のテキストが取得できない場合は、innerTextを使用することで改善する場合があります。