--- title: "JSステップで要素のテキストを取得する" slug: "get-the-text-content-from-elements-using-js" updated: 2024-09-10T01:54:37Z published: 2024-09-10T01:54:37Z canonical: "help.autify.com/get-the-text-content-from-elements-using-js" --- > ## Documentation Index > Fetch the complete documentation index at: https://help.autify.com/llms.txt > Use this file to discover all available pages before exploring further. # JSステップで要素のテキストを取得する ## 要素のテキストを取得する Autifyでは、JSステップで要素が持つテキストを取得し、後続のステップで使用することが可能です。 JSステップには以下2つの方法があります。 - [要素に対するJSステップ](/docs/ja/js-steps-for-elements)で要素の取得はAutifyのAIに任せる方法。 - 通常の[JSステップ](/docs/ja/javascript-steps)に[要素のテキストを取得する](https://javascript-snippets.autify.com/ja/snippets/values/get_text_content/)スニペットをコピー&ペーストして、自分で取得したCSSセレクターを設定する方法 ### 要素に対するJSステップを使用する方法 [要素に対するJSステップ](/docs/ja/js-steps-for-elements)には、通常のJSステップと比べて以下の利点があります。 - AutifyのAIが要素を取得するのでCSSセレクター/XPathの取得を省ける。 - 要素取得の処理を書かなくて良いので比較的少ないコードで済む。 - ページのローディング完了や要素の出現を自動で待ってくれる。 - テスト結果のスクリーンショットで対象要素がハイライトされる。 #### ステップの作成方法 1. レコーディング中に対象の要素を右クリックし、「Autify Recorder > JSステップを追加する」を選択し、保存します。 ![ja-add-js-step](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja-add-js-step.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) 2. 引数に`element`という値が設定されたJSステップがシナリオに作成されます。この`element`にはAutifyのAIが取得した要素が格納されます。 ![ja-element-argument](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja-element-argument.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) すでに、要素が取得されている状態ですので、コード部分には要素の`textContent`を`return`する以下の一文を書くだけです。 ``` return element.textContent; ``` 1. テストを実行すると要素のテキストの取得が確認できます。 ![ja-return-value-js-step-for-element](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja-return-value-js-step-for-element.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) また通常のJSステップと違い、テスト結果のスクリーンショットで対象の要素がハイライトされるため、どの要素を対象としているのかがすぐに分かります。 ![ja-screenshot-js-step-for-elemen](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja-screenshot-js-step-for-elemen.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) #### トラブルシューティング 要素の取得に失敗する場合は、以下の方法で解決する場合があります。 - [クイック要素更新](/docs/ja/quick-element-update)で簡単に要素の更新を行えます - [ロケータ](/docs/ja/add-a-locator)の設定が有効です - ロケータを設定する場合は、CSSセレクター/XPathの取得が必要ですが、他の3つの利点は引き続き得ることができます ### 通常のJSステップとスニペットを使用する方法 基本的には要素に対するJSステップを使用する方法をお勧めしますが、対象のページで独自の右クリックメニューを実装している場合、要素に対するJSステップを追加することができません。その際は、通常のJSステップを使用した方法をお使いください。 #### ステップの作成方法 1. JSステップをシナリオに挿入し、[要素のテキストを取得する](https://javascript-snippets.autify.com/ja/snippets/values/get_text_content/)スニペットをコピーしてJSステップに貼り付けます。 2. [CSSセレクター / XPathを取得する](https://help.autify.com/docs/ja/how-to-get-css-selectors)を参考に対象要素のCSSセレクターを取得し、`var selector = "<TODO: REPLACE SELECTOR>";`の`<TODO: REPLACE SELECTOR>`と置き換えます。 ``` // 例 var selector = "#doc_header > div.landing_top > div > div.landing_top_inner.center > h1"; ``` 1. テストを実行すると要素のテキストの取得が確認できました。 ![ja-return-value-normal-js-step](https://cdn.document360.io/a099d8a2-cfd2-42ca-9906-68b4a337f4a5/Images/Documentation/ja-return-value-normal-js-step.png?sv=2026-02-06&spr=https&st=2026-11-02T21%3A58%3A46Z&se=2026-11-02T22%3A58%3A46Z&sr=c&sp=r&sig=wzOwNlJay1GB6YuDGn25cpRujfX5H0y26YaSc%2Fk4Tjc%3D) ## その他 - `textContent`で希望する要素のテキストが取得できない場合は、`innerText`を使用することで改善する場合があります。