Selenium ページロード戦略の完全ガイド

ウェブページの自動化は広範囲にわたって拡大しており、ほとんどの人がそれに取り組んでいます。私たちはほぼ定期的にさまざまなシナリオを自動化し、多くのウェブページを移動するためにそれに取り組んでいます。

しかし、ウェブページがSelenium WebDriverで読み込まれるときに内部で何が起こっているのか疑問に思ったことはありますか？私たちは、get()やnavigate()のようなウェブページに移動するために使用されるWebDriverの関数を知っていますが、これらがページの読み込み方法を定義するのでしょうか、それとも何か他の機能がバックエンドで働いているのでしょうか？

この答えはイエスです！それはSelenium WebDriverのページロード戦略と呼ばれるものによって定義されています。WebDriverは、ページロード戦略を使用して、どのようにページが読み込まれるかを決定し、さらなるインタラクションを進める前にページが読み込まれるかを決定します。次のアクションを実行するために。

このSeleniumページロード戦略に関するブログでは、この戦略をより深く見て、その異なるタイプと自動化コードでどのように実装できるかを理解しようとします。

それでは始めましょう！

ページロード戦略とは何ですか？

ページロード戦略は、自動化コードがブラウザを起動し、get()またはnavigate().to()メソッドを使用するときに、現在のセッションでページがいつ読み込まれるかを定義します。デフォルトでは、Selenium WebDriverは標準のページロード戦略を使用します。つまり、NORMALであり、CSS、画像、フレームなど、ページ全体とそのコンポーネントが読み込まれるまで待ちます。

上記のコンポーネント（または調整されたネットワーク条件）によりページの読み込みに時間がかかり、スクリプトに重要でない場合は、EAGERまたはNONEに変更して実行を高速化できます。この値はセッション全体に適用されるため、プロジェクトに適切に選択することが重要です。そうしないと、テストの不安定性が引き起こされる可能性があります。

ページ読み込み戦略の使用は、Selenium 4の機能の一部として導入されました。以前のバージョンとは異なり、デフォルトのページ読み込みタイムアウトに依存しなくなりました。

ページ読み込み戦略はどのように機能するのでしょうか？

ページの読み込みが完了したかどうかを判断するために、Seleniumはdocument.readyStateプロパティを利用します。このdocument.readyStateは、ドキュメントの読み込み状態を記述します。ここでのドキュメントとは、ブラウザで読み込まれた任意のウェブページを指します。

DocumentのReady Stateメソッドはすべてのブラウザでサポートされており、SeleniumのPageLoadStrategyと共に信頼性の高いオプションです。

デフォルトのPageLoadStrategyと同様に、Selenium WebDriverが待機するデフォルトのdocument.readyStateはCompleteです。

ブラウザのdocumentオブジェクトのreadyStateプロパティは、ページの読み込みプロセスの現在の状態を表します。このプロパティは次のいずれかの値を持つことができます：

• loading – ページの読み込みがまだ進行中です。
• interactive – ページの読み込みは完了しましたが、画像、スタイルシート、フレームなどのサブリソースの読み込みはまだ続いています。
• complete – ページおよびすべてのサブリソースの読み込みが完了しました。

readyStateプロパティを使用すると、JavaScriptやその他の方法で操作できるようになるページの完全な読み込みを判断できます。例えば、Seleniumでは、readyStateプロパティを使用してページの読み込みを判断し、Seleniumコマンドを使用してページ上の要素と対話できるようになります。

進む前に、readyStateについてもう少し理解を深めるために簡単な演習をしましょう。

1. 以下のサイトにアクセスしてください。サイト。
2. サイトが読み込まれたら、右クリック -> 検査をクリック -> コンソールを開いて、document.readyStateコマンドを実行します。

3. このコマンドの結果として、完了と表示されます。これは、ドキュメントの現在の状態であり、必要なリソース（画像、CSSなど）がすべて読み込まれていることを意味します。

4. 次に、ページを更新して、上記のコマンドを再び実行します。この時点でのドキュメントの読み込み状態が表示されます。

4〜5回の更新で読み込み状態が表示されない場合は、ネットワーク条件を制限し、ネットワークを遅いオプションに設定することでThrottleを試してください。これについては、異なるネットワーク条件でのWebサイトのテストに関するこのブログを通じて学ぶことができます。デモンストレーションでも同じアプローチを使用します。

これがdocument.readyStateが実際にどのように機能するかを示しています。また、LTブラウザーというモバイルフレンドリーなテストツールを使用して、異なるネットワーク状況下でのウェブサイトのパフォーマンスを確認することもできます。LTブラウザーはLambdaTestが提供する補助ツールで、スマートフォン、タブレット、ラップトップを含む50を超える異なるデバイスでウェブサイトのレスポンシブデザインをテストできます。また、カスタム解像度を作成、異なるネットワーク条件をシミュレート、Google Lighthouseを使用してパフォーマンスレポートを生成する機能も提供しています。

これからこれらの値と、それらがPageLoadStrategyの値にどのようにマッピングされるかを理解していきましょう。

PageLoadStrategy <> document.readyState マッピング

documentのreadyStateは以下のいずれかです。

• 読み込み中: ドキュメントの読み込みが進行中です。
• インタラクティブ: ドキュメントは読み込まれ、解析されていますが、スクリプト、画像、CSS、フレームなどのサブリソースはまだ読み込み中です。この時点でDOMContentLoadedイベントが発生します。
• 完了: ドキュメントとすべてのサブリソースの読み込みが完了しました。これはloadイベントが発生することを示します。

各PageLoadStrategyは特定のdocument.readyState値に基づいてマッピングされ、WebDriverはナビゲーションメソッドを完了し、次のステップを実行し続けます。

Seleniumのページロード戦略の種類

ウェブオートメーションで使用できる典型的なSeleniumページロード戦略は3種類です。

NORMAL（指定されていない場合はデフォルト）

このSelenium Page Load Strategyは、WebDriverがページの読み込みが完了するまで待機し、つまりloadイベントが発火するまで待機します。

loadイベントは、ページが読み込まれたときに発火されます。これには、CSS、JavaScript、iFrames、画像などの依存リソースも含まれます。

HTMLコンテンツのダウンロードと解析に加え、すべてのサブリソースも待機します。

EAGER

このSelenium Page Load Strategyでは、WebDriverは初期ページの読み込み完了とDOMContentLoadedイベントの発火まで待機します。

loadイベントとは異なり、DOMContentLoadedイベントは、CSS、JavaScript、iFrames、画像などの追加リソースの読み込みを待たずに、DOMが読み込まれるとすぐに発火します。

HTMLコンテンツのダウンロードと解析のみを待機します。

NONE

このSelenium Page Load Strategyでは、WebDriverはブロックされず、テスト実行を続けます。

HTMLコンテンツのダウンロードのみを待機します。

デモンストレーション: 異なるSelenium Page Load StrategiesでのWebDriverセットアップ

異なるSelenium Page Load Strategiesの基本的な理解ができたので、実装方法を理解するためのコード例を見てみましょう。

同じことを行うために、以下のシナリオの自動化テストスクリプトを書くことになります。

1. クラウドベースのSelenium Gridを使用してRemoteWebDriverのインスタンスを作成します。同じことを行うために、LambdaTestプラットフォームを使用します。
2. WebDriverの機能を特定のPageLoadStrategyに設定します。
3. 次に、ドライバーを使用してブラウザを起動し、ここ.
4. を開きます。これにより、同じ条件の下で異なるSeleniumページロード戦略において、ページの読み込みが完了する時間を記録し、その変化を観察します。ページロード時間の違いは、すべての戦略についてより明確に理解するのに役立ちます。

プロジェクトのセットアップ

このSeleniumページロード戦略のブログでは、Eclipse IDEでのJavaを使用したMavenプロジェクトが使用されます。Eclipseが好きでない場合は、好みのIDEを使用して同じ手順を実行してください。Selenium WebDriverとTestNGの依存関係を使用して、ページ要素とテストケースの実行との自動化インタラクションを行います。最新の安定版を使用することを強くお勧めします。

それでは始めましょう。

1. Eclipseまたは好みのIDEを起動します。
2. 新しいMavenプロジェクトを作成し、名前をPageLoadStrategyにします。
3. srcフォルダ内に、テストパッケージを追加し、その中にTestクラスを作成し、TestPageLoadStrategyと名付けます。このクラスは、このデモンストレーションのためのすべてのコードを保持します。

4. 実際のテストケースを書く前に、pom.xmlファイルを以下のように更新し、TestNGをSeleniumで使用するための最新の依存関係を持つようにします。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>PageLoadStrategy</groupId>
 <artifactId>PageLoadStrategy</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <build>
   <sourceDirectory>src</sourceDirectory>
   <plugins>
     <plugin>
       <artifactId>maven-compiler-plugin</artifactId>
       <version>3.8.1</version>
       <configuration>
         <release>16</release>
       </configuration>
     </plugin>
   </plugins>
 </build>
 <dependencies>
   <dependency>
       <groupId>org.seleniumhq.selenium</groupId>
       <artifactId>selenium-java</artifactId>
       <version>4.6.0</version>
   </dependency>
   <dependency>
       <groupId>org.testng</groupId>
       <artifactId>testng</artifactId>
       <version>7.7.0</version>
       <scope>test</scope>
   </dependency>
 </dependencies>
</project>

package test;


import java.net.MalformedURLException;
import java.net.URL;
import java.time.*;
import java.util.HashMap;
import org.openqa.selenium.PageLoadStrategy;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.Test;


public class TestPageLoadStrategy {


   public RemoteWebDriver driver = null;
   String username = "";
   String accessKey = "";
 
  ChromeOptions chromeOptions = new ChromeOptions();
   HashMap ltOptions = new HashMap();


   private void setup(String buildName) {


       chromeOptions.setPlatformName("Windows 10");
       chromeOptions.setBrowserVersion("108.0");


       ltOptions.put("project", "Page Load Strategy");
       ltOptions.put("selenium_version", "4.0.0");
       ltOptions.put("w3c", true);
       ltOptions.put("networkThrottling", "Regular 2G");
       ltOptions.put("build", buildName);
   }


   private void checkPageLoad() {
       try {
           driver = new RemoteWebDriver(
                   new URL("https://" + username + ":" + accessKey + "@hub.lambdatest.com/wd/hub"), chromeOptions);


           Instant startTime = Instant.now();
           System.out.println("Page load started at : " + startTime.toString());
           
           System.out.println("Navigating to the URL");
           driver.get("https://ecommerce-playground.lambdatest.io/");
          
           Instant endTime = Instant.now();
           System.out.println("Page load ended at : " + endTime.toString());


           Duration duration = Duration.between(startTime, endTime);
           System.out.println("Total PageLoad time : " + duration.toMillis() + " milli seconds");
       } catch (MalformedURLException e) {
           System.out.println("Invalid grid URL");
       } finally {
           driver.quit();
       }
   }


   @Test
   public void testNormalStrategy() {
       // PageLoadStrategy = Normalに設定する
       setup("Page Load Strategy - Normal");


       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NORMAL);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testEagerStrategy() {
       // PageLoadStrategy = Eagerに設定する
       setup("Page Load Strategy - Eager");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.EAGER);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testNoneStrategy() {
       // PageLoadStrategy = Noneに設定する
       setup("Page Load Strategy - None");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NONE);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }
}

クラウドのセレニウムグリッドを使用することで、Javaの自動化テストに対してスケーラビリティと速度が向上し、ユーザーは複数のOSやブラウザの組み合わせで広範囲な並列およびクロスブラウザテストを実行できます。

ステップ2。前のステップで述べたように、LambdaTestプラットフォームを使用しているため、ユーザーがクラウドハブに接続するためにユーザー名とアクセスキーを提供する必要があります。これらの詳細は、アカウントが作成された後にLambdaTestプロフィールセクションで確認できます。

ステップ3. ChromeOptions クラスのオブジェクトを作成します。このクラスは、実行に使用する Chrome ドライバのさまざまなプロパティを操作するために使用されます。この chromeOptions オブジェクトは、各テストケースで PageLoadStrategy を設定し、WebDriver に渡すために使用されます。

ステップ4. HashMap 変数を作成し、ltOptions と名付けます。これは、LambdaTest クラウドグリッド実行のさまざまなプロパティを設定します。

ステップ5. 次に、setup() メソッドがあります。これは、chromeOptions と ltOptions でいくつかの基本的なプロパティを設定するために使用されます。これらは、3つの PageLoadStrategy ケースの共通プロパティです。

また、LambdaTest の networkThrottling プロパティを使用して、250 Kbps のダウンロード速度と 50 Kbps のアップロード速度で通常の 2G ネットワークを設定していることに注意してください。これにより、前のセクションで説明したように、すべてのシナリオでロード時間をより良く示すことができます。

LambdaTest プラットフォームを使用することで、ブラウザとバージョンの詳細を直接選択し、LambdaTest キャパシティジェネレーターを使用してキャパシティが自動的に生成されるという利点があります。コードに追加するだけで済みます。

このメソッドは、buildName というパラメーターを1つ受け取ります。このパラメータは、ビルド名を表示するために使用されます。

ステップ6. checkPageLoad() という新しい関数を追加します。try ブロックでは、chromeOptions で定義されたプロパティを使用して LambdaTest プラットフォーム上の RemoteWebDriver に接続するコードを記述します。

接続が確立されると、Java.timeパッケージのInstantクラスのオブジェクトが作成され、ブラウザを起動してナビゲートしようとする時点での開始時刻を保存およびログに記録します。これに続いて、ブラウザ用のドライバーが呼び出され、テスト用のウェブサイトが起動します。

ウェブサイトが設定されたPageLoadStrategyに従って読み込まれると、ドライバーは制御を次のコマンドに渡し、これもまたInstantクラスのオブジェクトで、現在時刻を再取得し、終了時刻を得る。

これで、要求された戦略に従ってページが読み込まれ、開始時刻と終了時刻が得られました。ページの読み込みに要した時間をミリ秒単位で決定するには、2つの時点の差を求めることです。これは、同じパッケージのDurationクラスを使用して実現されます。

この読み込み時間は、異なる戦略に対するすべてのテストケースで異なることに気付くでしょう。

A catch block is added next for the try block to handle the exception if it occurs. MalformedURLException is to catch the exception in case our RemoteWebDriver URL has invalid syntax. Once everything is done, we finally close the driver instance. To learn more about it, you can go through this blog on the most common exceptions in Selenium.

testNormalStrategy()

これは、通常の戦略を実証するためのテストケースです。

まず、setup()メソッドがブラウザおよびLambdaTestプラットフォームの基本プロパティを定義します。次に、chromeOptionsでPageLoadStrategyの値をNORMALに設定し、他の機能を設定します。

最後に、checkPageLoad()メソッドが呼び出され、ウェブページを読み込み、各戦略の実行セクションで比較する読み込み時間をログに記録します。

testEagerStrategy()

これは、イージーな戦略を実証するためのテストケースです。

この場合のすべてのステップは、前のものと同様です。唯一の違いは、chromeOptions で PageLoadStrategy の値が EAGER に設定されており、その後に checkPageLoad() メソッドを呼び出すことです。

testNoneStrategy()

これはNone戦略を示すテストケースです。

ここでchromeOptionsのPageLoadStrategyの値はNONEに設定されており、残りのステップは以前に説明したテストケースと同様です。

テストの実行

すべてのPageLoadStrategyの動作と実装を理解したので、今度はコードを実行して、ローカルでおよびLambdaTestダッシュボードで実行結果を確認しましょう。

テストケースはTestNGを使用して実行されます。実行するには、以下の手順に従ってください。

1. Eclipse IDEでテストケース名を右クリックします。
2. 「Run Test」に移動し、「TestNG Test」を選択して実行を開始します。

それぞれの戦略ごとにケースを実行して、ロード時間に差異があるか確認しましょう。

NORMAL Strategy

この場合、TotalPageLoad時間が70852ミリ秒であることに注目できます。これは、通常の2G速度のネットワークを使用しているためです。これまでのところ、3つのケースの中で最も高い値であることが確立されています。これを確認するために、EagerおよびNoneのケースを実行して比較することができます。

EAGER Strategy

予想通り、同じシナリオでのEager戦略のPageLoadTime、つまり70231ミリ秒は、Normalよりも比較的少なくなっています。

NONE Strategy

ここで、None戦略のPageLoadTimeは他の2つよりも大幅に少ないことに注意してください。これは、リソースのダウンロードを待たないためです。

以下は、異なる戦略におけるページ読み込み時間の簡単なまとめです。

各PageLoadStrategyについて、以下に示すようにLambdaTestダッシュボードにアクセスして実行結果を確認することもできます。

自動化のビルドの詳細を表示するには、自動化の下のビルドセクションに移動してください。

PageLoadStrategy.NORMALのビルド詳細:

PageLoadStrategy.EAGERのビルド詳細:

PageLoadStrategy.NONEのビルド詳細:

結論

これで、異なるページ読み込み戦略に関するSelenium TestNGチュートリアルの終わりに到達しました。このチュートリアルでは、これらのSeleniumページ読み込み戦略のさらなる使用法と動作について学び、自動化スクリプトに統合してSeleniumクラウドグリッドで実行する方法について学びました。

I hope now you can implement these in your use cases more efficiently.

ハッピーローディング!!