を使用したクロスブラウザテスト Selenium webdriver

⚡ スマートサマリー

を使用したクロスブラウザテスト Selenium WebDriver は、Web アプリケーションが Chrome 上で一貫して動作することを検証します。 FirefoxSafari、Edge。このチュートリアルでは、 Selenium WebDriverと TestNG 並列セッションの起動、レンダリングの検証、および最新のデスクトップおよびモバイルブラウザ全体にわたるカバレッジの拡張を実現する。

  • 🌐 なぜ重要なのか: 実際のユーザーは異なるブラウザで同じページを開くため、コンバージョン率とアクセシビリティを確保するには、レイアウト、スクリプト、スタイルがどのブラウザでも正しく動作する必要があります。
  • 🧪 Selenium WebDriverの設定: ChromeDriver、GeckoDriver、EdgeDriver、SafariDriverを設定した後、単一のパラメータ付きメソッドで適切なインスタンスを選択します。
  • ???? TestNG 並行実行: parallel=”tests” を含む testing.xml ファイルは Chrome を起動します。 Firefox同時にエッジスイートも処理し、大規模な回帰テストパックのフィードバックサイクルを短縮します。
  • よく見られる不具合: フォントのスケーリング、CSSレイアウトのずれ、 Javaスクリプトのポリフィル不足、HTML5のサポート不足、画像の向きの不一致、OSとブラウザの不一致などがすぐに明らかになる。
  • 🛠️ クラウドラボとAI: Sauce Labs、BrowserStack、およびLambdaTestは、数千ものOSとブラウザの組み合わせにテスト範囲を拡大し、AIを活用したビジュアルリグレッションと自己修復型ロケーターによって信頼性を向上させている。

クロスブラウザテスト Selenium webdriver

クロスブラウザテストが必要なのはなぜですか?

Webベースのアプリケーションは、ネイティブのデスクトップアプリケーションとは大きく異なります。Webアプリケーションは、エンドユーザーがどのブラウザでも開くことができます。たとえば、一部のユーザーは、 https://twitter.com in Firefox他の人が使っている間 Chrome, Safariまたは Microsoft Edge.

下の図を見ると、古いブラウザではTwitterのログインボックスの角が丸く表示されていないのに対し、最新のChromeでは角がデザイン通りに表示されていることがわかります。

クロスブラウザテスト

そのため、より多くの人がアクセスして利用できるように、ウェブアプリケーションがすべての主要なブラウザで期待どおりに動作することを保証する必要があります。

この目標はクロスブラウザで達成できます テスト 対象となるすべてのブラウザで、製品の表示が可能になる。

ブラウザ間の互換性問題が発生する理由

  1. ブラウザごとにフォント サイズが一致しない。
  2. Javaスクリプト エンジンの実装は Chrome (V8) と異なります。 Firefox (クモザル)、サファリ (JavaScriptCore)、およびEdge。
  3. CSSとHTMLの検証における相違点(ベンダープレフィックスの処理を含む)。
  4. 古いブラウザバージョンでは、HTML5およびECMAScriptの機能サポートが不完全または不十分です。
  5. ページの配置、div要素のサイズ調整、およびフレックスボックスまたはグリッドレンダリングのバリエーション。
  6. 画像の向きとカラープロファイルの違い。
  7. ブラウザと基盤となるオペレーティングシステムとの互換性の問題、モバイルWebViewの不具合など Android およびiOS。

クロスブラウザテストを行う方法

使用している場合 Selenium WebDriver を使用すると、Chrome に対するテストケースを自動化できます。 Firefox, Microsoft EdgeおよびSafariブラウザ。

同じマシン上で異なるブラウザを使用してテストケースを同時に実行するには、 TestNG フレームワーク Selenium WebDriver。より幅広いOSとバージョンに対応するため、同じスイートをリモートWebDriverエンドポイントを介して、Sauce Labs、BrowserStack、LambdaTestなどのクラウドグリッドに接続できます。

testing.xml は次のようになります。

クロスブラウザテスト

この testing.xml は、 テストケース 見た目はこんな感じです。

クロスブラウザテスト

testing.xml には複数の Test タグ ('ChromeTest', 'FirefoxTest'、'EdgeTest')、このテストケースは各ブラウザで1回実行されます。

最初のテスト「ChromeTest」では、パラメータ「browser」の値として「chrome」が渡されるため、ChromeDriverが実行されます。このテストケースはChromeブラウザ上で実行されます。

第2テストFirefox「テスト」はパラメータ「ブラウザ」の値を「」として渡します。Firefox'、 それで Firefoxドライバーが実行されます。このテストケースは、 Firefox ブラウザ。EdgeやSafariのテストを追加する場合も、同じ手順に従います。

Guru99CrossBrowserScript.java

完全 Code:

package parallelTest;

import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.edge.EdgeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.safari.SafariDriver;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Parameters;
import org.testng.annotations.Test;

public class CrossBrowserScript {

	WebDriver driver;

	/**
	 * This function will execute before each Test tag in testng.xml
	 * @param browser
	 * @throws Exception
	 */
	@BeforeTest
	@Parameters("browser")
	public void setup(String browser) throws Exception{
		//Check if parameter passed from TestNG is 'firefox'
		if(browser.equalsIgnoreCase("firefox")){
		//create firefox instance
			System.setProperty("webdriver.gecko.driver", ".\\geckodriver.exe");
			driver = new FirefoxDriver();
		}
		//Check if parameter passed as 'chrome'
		else if(browser.equalsIgnoreCase("chrome")){
			//set path to chromedriver.exe
			System.setProperty("webdriver.chrome.driver",".\\chromedriver.exe");
			//create chrome instance
			driver = new ChromeDriver();
		}
		//Check if parameter passed as 'Edge'
		else if(browser.equalsIgnoreCase("Edge")){
			//set path to msedgedriver.exe
			System.setProperty("webdriver.edge.driver",".\\msedgedriver.exe");
			//create Edge instance
			driver = new EdgeDriver();
		}
		//Check if parameter passed as 'Safari'
		else if(browser.equalsIgnoreCase("Safari")){
			//SafariDriver ships with macOS, no driver path needed
			driver = new SafariDriver();
		}
		else{
			//If no browser passed throw exception
			throw new Exception("Browser is not correct");
		}
		driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
	}

	@Test
	public void testParameterWithXML() throws InterruptedException{
		driver.get("https://demo.guru99.com/V4/");
		//Find user name
		WebElement userName = driver.findElement(By.name("uid"));
		//Fill user name
		userName.sendKeys("guru99");
		//Find password
		WebElement password = driver.findElement(By.name("password"));
		//Fill password
		password.sendKeys("guru99");
	}
}

テスト.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE suite SYSTEM "http://testng.org/testng-1.0.dtd">

<suite name="TestSuite" thread-count="3" parallel="tests" >

<test name="ChromeTest">

<parameter name="browser" value="Chrome" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

<test name="FirefoxTest">

<parameter name="browser" value="Firefox" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

<test name="EdgeTest">

<parameter name="browser" value="Edge" />

<classes>

<class name="parallelTest.CrossBrowserScript">

</class>

</classes>

</test>

</suite>

注: テストを実行するには、右クリックして テスト.xml「実行」を選択し、クリックします。 TestNG スイート。

 クロスブラウザテスト

クラウドブラウザグリッドによるスケーリング

Running: Selenium WebDriver はローカルでは 2 または 3 つのブラウザをカバーしますが、実際のユーザーは何百もの OS とブラウザの組み合わせからサイトにアクセスします。クラウド ラボでは、 ソースラボ, BrowserStack, ラムダテスト リモート WebDriver エンドポイントを公開します。同じ Selenium グリッド上でテストを行い、ブラウザ、バージョン、OS、解像度に必要な機能をクリアし、ローカルドライバを管理することなく水平方向に拡張できます。

最新のグリッドでは、視覚的な回帰差分検出、自己修復型要素ロケーター、不安定性スコアリングなどのAI支援機能も利用でき、長期にわたるクロスブラウザテストスイートのメンテナンス負担を軽減します。

注意: 提供されたプログラムは、 Selenium 4、クローム、 Firefox, Microsoft Edgeプログラムがエラーを出す場合は、インストールされているブラウザのバージョンに合わせてドライババイナリを更新するか、 Selenium ドライバーを自動的に解決するマネージャー。

ダウンロード Selenium このチュートリアルのデモ用のプロジェクト ファイル

よくあるご質問

クロスブラウザテストは、WebアプリケーションがChromeで同じように動作することを検証する機能的および視覚的なテスト手法です。 Firefox、サファリ、および Microsoft Edge デスクトップとモバイルの両方に対応し、異なるオペレーティングシステムやビューポートサイズにも対応します。

Selenium WebDriverはChromeを駆動する単一のAPIを提供します。 Firefox公式の W3C WebDriver プロトコルを介して、Edge および Safari でテストできます。同じテストコードはどのブラウザでも実行できるため、 Selenium WebDriverは、ブラウザ自動化およびクロスブラウザテストにおける事実上の標準です。

TestNG testing.xml ファイルを使用し、parallel=”tests” と thread-count を指定して各 Test タグを独自のスレッドで起動します。パラメーター化された @BeforeTest 設定と組み合わせると、同じ Selenium WebDriverスイートはChrome上で動作します。 Firefoxと Edge を同時に使用することで、全体の実行時間を短縮します。

Sauce Labs、BrowserStack、LambdaTestはホスト型サービスを提供しています。 Selenium iOS Safari や Android Chromeの場合、RemoteWebDriverをグリッドエンドポイントに向け、必要な機能を渡すことで、同じコードを大規模に実行できます。

Applitools、Percy、BrowserStack、LambdaTest のビジュアル モジュールに組み込まれているような AI 搭載のビジュアル回帰エンジンは、ピクセル単位ではなく意味的にスクリーンショットを比較します。Chrome、 FirefoxSafariやEdgeでも、実際のレイアウトの不具合を検出できるため、クロスブラウザテストパイプラインにおける誤検出を大幅に削減できます。

はい。Healeniumなどの最新のフレームワークでは、 TestimMabl、およびAI機能 Selenium IDEはDOMを分析し、安定したXPathまたはCSSセレクタを提案します。UIの変更によってロケーターが機能しなくなった場合でも、AIが生成したセレクタは、近くの要素を評価して最も近い一致を選択することで自己修復します。これにより、手動でのメンテナンスを減らしながら、クロスブラウザテストスイートを常にグリーンに保つことができます。

一般的な欠陥には、フォントとCSSレンダリングの不一致が含まれます。 Javaスクリプト エンジンの不整合、壊れた HTML5 または ES 機能のサポート、画像の向きの問題、ページの配置の問題、ベンダー プレフィックスの欠落、および iOS Safari での OS 固有の障害、または Android クロム。