JavaScript を使用してテキスト フィールドに入力し、リンクをクリックする

一部の Web アプリケーションには、ブラウザーの自動化アクションでテキスト フィールドにデータを入力したり、リンクやボタンをクリックしたりできない設計上の制約がある場合があります。

これらの Web アプリケーションを自動化するための代替アプローチは、Web ページで JavaScript 関数を実行する アクションを使用することです。これにより、Web ページで JavaScript コードを実行できます。

Web ページで JavaScript 関数を実行する アクションを展開する前に、入力またはクリックする要素の CSS セレクターが必要です。 セレクターを取得するには、UI 要素 タブに移動して、UI 要素の追加 を選択します。

[UI 要素] タブの [UI 要素の追加] オプションのスクリーンショット。

UI 要素を作成した後、再度 UI 要素 タブへナビゲートして、作成した UI 要素を選択し、セレクター ビルダー でセレクターを開きます。

作成された CSS セレクターのスクリーンショット。

ここで、最後に発生した > 文字の右側にあるセレクターの最後の要素をコピーします。

セレクター ビルダーの作成された CSS セレクターのスクリーンショット。

Note

セレクターの詳細については、カスタム セレクターの作成 を参照してください。

テキスト フィールドに入力するには、Web ページで JavaScript 関数を実行する アクションを実行し、JavaScript 関数 フィールドに次のコードを入力します。 コードを貼り付けた後、CSS-セレクタ入力する値 プレースホルダーを以前にコピーされたセレクターと入力する値でそれぞれ置き換えます。

function ExecuteScript()
{
document.querySelectorAll('CSS-selector')[0].value="value-to-populate";
}

OR

function ExecuteScript()
{
document.querySelectorAll('CSS-selector')[0].innerText="value-to-populate";
}

テキスト フィールドに入力するように構成された Web ページ アクションでの [JavaScript 関数の実行] のスクリーンショット。

リンクをクリックするかボタンを押すには、次のコードを使用します。

function ExecuteScript()
{
document.querySelectorAll('CSS-Selector')[0].click();
}