SeleniumでJavaScriptExecutorを使用する方法

チュートリアル
Selenium

Seleniumは、ブラウザとやり取りしてテキストを送信したり、ボタンをクリックしたり、ドロップダウンを選択したりするなど、さまざまな操作を実行するためのツールやライブラリのオープンソースのスイートです。

ただし、実際のSelenium WebDriverコマンドが期待通りに機能しないシナリオがある場合があります。SeleniumはWeb要素と直接やり取りできないためです。ここでJavaScriptExecutorが登場します。

このブログでは、SeleniumにおけるJavaScriptExecutorと実用例や例を始める方法について説明します。

SeleniumにおけるJavaScriptExecutorとは何ですか？

JavaScriptExecutorは、JavaScriptコマンドを実行するのに役立つSeleniumが提供するインターフェースです。このインターフェースでは、選択したウィンドウまたは現在のWebページ上でJavaScriptを実行するためのメソッドが提供されます。Seleniumでサポートされているすべての言語バインディングで利用可能です。

SeleniumのJavaScriptExecutorは、自動化テストスクリプトで次のパッケージをインポートすることで直接使用できます。

Java

 

SeleniumのJavaScriptExecutorは、Web要素とやり取りするための2つのメソッドを提供します。

  • executeScript()–このメソッドは、Seleniumの現在選択されたウィンドウまたはフレームのコンテキストでJavaScriptを実行します。スクリプトは無名関数の本体として実行されます。
  • executeAsyncScript() – このメソッドは、Seleniumの現在選択されたウィンドウやフレームのコンテキストで非同期のJavaScriptスニペットを実行します。スクリプトは無名関数の本体として実行されます。

注意: executeScript() とexecuteAsyncScript()メソッドの主な違いは、executeAsyncScript()を使用して呼び出されるスクリプトが、callback()関数を使用して実行の完了を通知しなければならないことです。

executeAsyncScript()を使用してメソッドを呼び出すことは、テスト中にブラウザでスリープを実行する必要がある場合や、AJAXアプリケーション内でテストを同期させる必要がある場合に主に使用されます。

SeleniumでJavaScriptExecutorを使用する理由

いくつかのWebDriverコマンドが複数の理由で期待どおりに機能しない場合があります：

  1. Seleniumが直接Web要素とやり取りしていない
  2. 表示されているオーバーレイの後ろに隠れているWeb要素にスクロールしたりクリックしたり、読み取り専用フィールドに値を設定したりする
  3. DOMを動的に変更するなど、ブラウザ固有の動作を実行する

これらの場合、SeleniumでJavaScriptExecutorの助けを借ります。

従来、私たちはID、名前、CSSセレクタ、XPathなどのSeleniumロケータを使用してWebElementを検出します。これらのロケータが機能しない場合や、トリッキーなXPathを扱っている場合、JavaScriptExecutorを使用して目的のWebElementを見つけるのに役立ちます。

click()メソッドがすべてのWebブラウザで機能しない場合や、Webコントロールが異なるブラウザで異なる動作をする可能性がある場合があります。そのような状況を乗り越えるためには、JavaScriptExecutorを使用してクリックアクションを実行する必要があります。

ブラウザにはJavaScriptの実装が内蔵されており、JavaScriptコマンドを理解できます。したがって、SeleniumでのJavaScriptExecutorの理解により、さまざまな操作を効率的に実行できるようになります。

SeleniumでのJavaScriptExecutorの基礎

このセクションの目的は、SeleniumでJavaScriptExecutorを実装する手順の概要を提供することです。デモンストレーションでは、優先されるプログラミング言語としてJavaを使用します。

主要なステップを見てみましょう。

1. JavaScriptExecutorに関連するパッケージをインポートします：

Java

 

2. JavaScriptExecutorを使用して、インターフェースのリファレンスを作成し、WebDriverインスタンスに型キャストして割り当てます：

Java

 

3. executeAsyncScript()またはexecuteScript() メソッドを呼び出します。たとえば、executeScript() の構文は次のとおりです：

Java

 

デモ：SeleniumでJavaScriptExecutorを使用する方法

JavaScriptExecutorをSeleniumで使用する方法を見る前に、以下の前提条件に従ってください：

  • IntelliJ IDEを使用して新しいMavenプロジェクトを作成する
  • pom.xmlに最新のSelenium WebDriver依存関係を追加する
  • pom.xmlに最新のTestNG依存関係を追加する

私たちは、ローカルのChromeブラウザでテストを実行して、SeleniumでJavaScriptExecutorの動作をデモするためにLambdaTest eCommerce Playgroundウェブサイトを使用します。

テストシナリオ1

当社の目的は、executeScript()メソッドを使用して以下のテストシナリオを示すための単純なコードを記述することです。

  1. LambdaTest eCommerce Playgroundウェブサイトのアカウントログインページに移動する
  2. 有効なログイン資格情報を入力し、赤い枠でフィールドを強調表示してログインボタンをクリックする
  3. ページのタイトルとドメイン名を表示する
  4. 成功したログイン時にページヘッダー「マイアカウント」が表示されていることをアサートする

実装

新しいTestJavaScriptExecutorクラスを作成して、テストシナリオを実装します。まず、このテストクラスに、Selenium WebDriverセッションを設定および正常に終了させるための2つのメソッドを作成します。

両方のメソッド、つまりsetup()メソッドでドライバーセッションを開始し、tearDown()メソッドでセッションを正常に終了させるために、WebDriverをクラスレベルで宣言しましょう。

Java

 

新しいsetup()メソッドを作成し、WebDriverクラスのインスタンスを生成し、ローカルChromeブラウザでテストを実行するための構成を適切に設定します。

Java

 

このメソッドは、Chromeブラウザを開き、ウィンドウを最大化し、また、30秒の暗黙の待機時間を適用します。この暗黙の待機時間により、テスト実行が開始される前にすべてのウェブサイトコンテンツが正常に読み込まれることが可能となります。


Java

 

最後に、テストが実行されると、tearDown()メソッドが呼び出され、RemoteWebDriverセッションが正常に閉じられます。

さて、同じテストクラスにtestJavaScriptExecutorCommand() メソッドを追加して、議論したテストシナリオを実装します。

Java

 

コードは、LambdaTest eCommerce Playgroundウェブサイトのログインページに移動します。次の行では、WebDriverインスタンスをJavascriptExecutorにキャストして、ブラウザでJavaScriptコマンドを実行できるようにします。

Java

 

次に、idロケータ戦略を使用してemailAddressFieldを見つけます。その後、JavaScriptExecutorコマンドを使用して、メールアドレスフィールドの境界線を赤色でハイライト表示します。

Java

 

次に、パスワードフィールドが見つかり、赤い境界線で強調表示されます。このハイライトは、自動化テストの実行時にどのステップが実行されているかを知るのに役立ちます。

Java

 

同様に、CSSセレクター戦略を使用してログインボタンを見つけ、それも強調表示されます。

Java

 

次に、ページタイトルとドメイン名をJavaScriptExecutorを使用して見つけ、コンソールに出力します。

Java

 

最後に、成功したログイン後に表示される「マイアカウント」ページのページヘッダーを見つけ、それがテキスト “マイアカウント” を表示していることを確認するためにアサーションが実行されます。

こちらがTestJavaScriptExecutorクラスからの完全なコードです：

Java

 

テストの実行

IntelliJ IDEからの以下のスクリーンショットによると、テストは正常に実行されました。

テストシナリオ2

私たちの目標は、次のテストシナリオを使用してexecuteAsyncScript()メソッドを使用した例を示すためのシンプルなコードを書くことです。

  1. LambdaTest eCommerce Playgroundウェブサイトに移動します。
  2. ホームページの一番下までスクロールします。
  3. ページの下部にテキスト“FROM THE BLOG”が表示されていることをアサートします。

実装：

既存のテキストクラスTestJavaScriptExecutorに新しいtestExecuteAsyncScript() メソッドを作成します。

Java

 

コードはLambdaTest eCommerce Playgroundウェブサイトのホームページに移動します。次に、JavaScriptExecutorのexecuteAsyncScript()メソッドが呼び出され、ウィンドウをスクロールするアクションが行われます。

executeAsyncScript()メソッドでは、実行されるスクリプトは提供されたcallback()メソッドを呼び出して明示的に終了する必要があります。

Java

 

ウィンドウの一番下までスクロールした後、テキスト”FROM THE BLOG“が見つかり、それに対してアサーションが実行されます。

Java

 

テストの実行

以下のスクリーンショットは、テストが正常に実行されたことを示しています。

SeleniumでJavaScriptExecutorを使用するためのコマンド

JavaScriptExecutorインターフェースを使用してSeleniumテスト自動化で処理できるシナリオを検討しましょう。

ボタンをクリックするには：

Java

 

sendKeys()メソッドを使用せずにテキストボックスにテキストを入力するには： メソッド：

Java

 

値をtrueまたはfalseとしてチェックボックスを処理するには：

Java

 

Selenium WebDriverでアラートポップアップウィンドウを生成するには：

Java

 

JavaScriptを使用してブラウザウィンドウをリフレッシュするには：

Java

 

Seleniumでウェブページ全体のinnertextを取得するには：

Java

 

ウェブページのタイトルを取得するには：

Java

 

ドメイン名を取得するには：

Java

 

ウェブページのURLを取得するには：

Java

 

ウェブページの高さと幅を取得するには：

Java

 

JavaScriptを使用して別のページに移動するには：

Java

 

Seleniumを使用してアプリケーションでスクロールを実行します。

  • ページを垂直に500pxスクロールするには：
    Java

     

  • ページを最後まで垂直にスクロールするには：
    Java

ドキュメントオブジェクトモデル（DOM）に要素を追加するには：

Java

 

DOM内でシャドウルートを取得するには：

Java

 

結論

Seleniumには、WebDriverコマンドが意図した通りに機能しない場合に利用されるJavaScriptExecutorというインターフェースがあります。JavaScriptExecutorを使用することで、WebDriverを使用してウェブサイトでJavaScriptコードを実行し、Javaのみを使用して不可能だったさまざまなタスクをエレガントかつ効果的な方法で処理できます。

このブログでは、SeleniumでJavaScriptExecutorを使用する方法とその異なるメソッドを探求しました。さらに、さまざまなシナリオをカバーし、異なるメソッドを使用した効果的なソリューションを実用例とともに紹介しました。

Source:
https://dzone.com/articles/how-to-use-javascriptexecutor-in-selenium