Cross-Browser-Tests mit Selenium WebTreiber

Warum brauchen wir Cross-Browser-Tests?

Webbasierte Anwendungen unterscheiden sich stark von nativen Desktop-Anwendungen. Eine Webanwendung kann vom Endbenutzer in jedem beliebigen Browser geöffnet werden. Manche Benutzer bevorzugen es beispielsweise, die Anwendung direkt im Browser zu öffnen. https://twitter.com in Firefox, während andere verwenden Chrome, Safariden Microsoft Edge.

Im folgenden Diagramm ist zu erkennen, dass in älteren Browsern die Anmeldebox von Twitter die abgerundeten Ecken nicht korrekt darstellt, während der moderne Chrome die Ecken wie vorgesehen darstellt.

Wir müssen also sicherstellen, dass die Webanwendung in allen gängigen Browsern wie erwartet funktioniert, damit mehr Menschen darauf zugreifen und sie nutzen können.

Dieses Ziel kann mit Cross-Browser erreicht werden. Tests des Produkts auf jedem Browser, der in den Geltungsbereich fällt.

Gründe für browserübergreifende Probleme

1. In verschiedenen Browsern stimmt die Schriftgröße nicht überein.
2. JavaDie Implementierungen der Skript-Engine unterscheiden sich in Chrome (V8). Firefox (SpiderMonkey), Safari (JavaScriptCore) und Edge.
3. Unterschiede bei der Validierung von CSS und HTML, einschließlich der Behandlung von Herstellerpräfixen.
4. Inkonsistente oder unvollständige Unterstützung von HTML5- und ECMAScript-Funktionen in älteren Browserversionen.
5. Seitenausrichtung, Div-Größe und Flexbox- oder Grid-Rendering-Varianten.
6. Unterschiede in Bildausrichtung und Farbprofil.
7. Browserinkompatibilität mit dem zugrunde liegenden Betriebssystem, einschließlich der Eigenheiten von mobilen WebView-Funktionen Android und iOS.

So führen Sie browserübergreifende Tests durch

Wenn wir verwenden Selenium Mit WebDriver können wir Testfälle gegen Chrome automatisieren. Firefox, Microsoft Edgeund Safari-Browser.

Um Testfälle mit verschiedenen Browsern gleichzeitig auf demselben Rechner auszuführen, können wir die TestNG Rahmen mit Selenium WebDriver. Für eine breitere Abdeckung von Betriebssystemen und Versionen kann dieselbe Suite über einen Remote-WebDriver-Endpunkt auf Cloud-Grids wie Sauce Labs, BrowserStack oder LambdaTest ausgerichtet werden.

Ihre testing.xml-Datei sieht folgendermaßen aus:

Diese test.xml wird dem zugeordnet Testfall Das sieht folgendermaßen aus:

Da die testing.xml mehrere Test-Tags enthält ('ChromeTest', 'FirefoxTest', 'EdgeTest'), dieser Testfall wird einmal für jeden Browser ausgeführt.

Der erste Test „ChromeTest“ übergibt dem Parameter „browser“ den Wert „chrome“, sodass ChromeDriver ausgeführt wird. Dieser Testfall wird im Chrome-Browser ausgeführt.

Der zweite TestFirefox„Test“ übergibt den Wert des Parameters „Browser“ als „Firefox', Also FirefoxDer Treiber wird ausgeführt. Dieser Testfall wird auf dem Firefox Browser. Das Hinzufügen eines Edge- oder Safari-Tests folgt dem gleichen Muster.

Guru99CrossBrowserScript.java

Komplett 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");
	}
}

testing.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>

Anmerkungen: Um den Test auszuführen, klicken Sie mit der rechten Maustaste auf testing.xmlWählen Sie „Ausführen als“ und klicken Sie auf TestNG Suite.

Skalierung mit Cloud-Browser-Grids

Laufen Selenium WebDriver unterstützt lokal zwei oder drei Browser, aber reale Benutzer greifen über Hunderte von Betriebssystem- und Browserkombinationen auf Websites zu. Cloud-Labore wie beispielsweise Saucenlabore, BrowserStack und LambdaTest Einen entfernten WebDriver-Endpunkt bereitstellen. Auf denselben verweisen Selenium Die Tests werden im Grid durchgeführt, die gewünschten Fähigkeiten für Browser, Version, Betriebssystem und Auflösung werden erfüllt, und die Suite skaliert horizontal, ohne dass lokale Treiber verwaltet werden müssen.

Moderne Testraster bieten zudem KI-gestützte Funktionen wie visuelle Regressionsvergleiche, selbstheilende Elementlokalisatoren und eine Bewertung der Fehleranfälligkeit, wodurch der Wartungsaufwand für langlebige Cross-Browser-Testsuiten reduziert wird.

Hinweis: Das vorliegende Programm wurde erstellt und getestet am Selenium 4, Chrome, Firefox und Microsoft EdgeFalls die Programme einen Fehler ausgeben, aktualisieren Sie bitte die Treiberdateien, sodass sie mit Ihrer installierten Browserversion übereinstimmen, oder verwenden Sie Selenium Manager, der Treiber automatisch auflöst.

Laden Sie Selenium Projektdateien für die Demo in diesem Tutorial

Häufig gestellte Fragen