Cross Browser Test vha Selenium webdriver

Hvorfor har vi brug for test på tværs af browsere?

Webbaserede applikationer er meget forskellige fra native desktop-applikationer. En webapplikation kan åbnes i enhver browser af slutbrugeren. For eksempel foretrækker nogle at åbne https://twitter.com in Firefox, mens andre bruger Chrome, Safari eller Microsoft Edge.

I diagrammet nedenfor kan du se, at i ældre browsere gengiver Twitters loginboks ikke afrundede hjørner korrekt, mens moderne Chrome gengiver hjørnerne som designet.

Så vi skal sikre, at webapplikationen fungerer som forventet i alle populære browsere, så flere kan få adgang til den og bruge den.

Dette mål kan opfyldes med Cross Browser Test af produktet på alle browsere i omfanget.

Årsager til problemer på tværs af browsere

1. Skriftstørrelsen stemmer ikke overens i forskellige browsere.
2. JavaImplementeringer af scriptprogrammer varierer på tværs af Chrome (V8), Firefox (SpiderMonkey), Safari (JavaScriptCore) og Edge.
3. Forskelle i CSS- og HTML-validering, herunder håndtering af leverandørpræfikser.
4. Inkonsekvent eller delvis understøttelse af HTML5- og ECMAScript-funktioner i ældre browserversioner.
5. Sidejustering, div-størrelse og variationer i flexbox- eller grid-gengivelse.
6. Billedorientering og forskelle i farveprofil.
7. Browserinkompatibilitet med det underliggende operativsystem, herunder særheder i Mobile WebView Android og iOS.

Sådan laver du test på tværs af browsere

Hvis vi bruger Selenium WebDriver, vi kan automatisere testcases mod Chrome, Firefox, Microsoft Edgeog Safari-browsere.

For at udføre testcases med forskellige browsere på den samme maskine på samme tid, kan vi integrere TestNG rammer med Selenium WebDriver. For bredere OS- og versionsdækning kan den samme suite peges mod cloud-gitre som Sauce Labs, BrowserStack eller LambdaTest via et eksternt WebDriver-slutpunkt.

Din testing.xml vil se sådan ud:

Denne testing.xml vil kortlægges med Test sag som ser sådan ud:

Fordi testing.xml har flere Test-tags ('ChromeTest', 'FirefoxTest', 'EdgeTest'), vil denne testcase udføres én gang for hver browser.

Den første test 'ChromeTest' vil sende værdien af ​​parameteren 'browser' som 'chrome', så ChromeDriver vil blive udført. Denne test vil køre i Chrome-browseren.

Den anden testFirefoxTest' vil videregive værdien af ​​parameteren 'browser' som 'Firefox', så FirefoxDriveren vil blive udført. Denne testcase vil køre på Firefox browser. Tilføjelse af en Edge- eller Safari-test følger samme mønster.

Guru99CrossBrowserScript.java

Komplet 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>

BEMÆRK VENLIGST: For at køre testen skal du højreklikke på testing.xml, vælg Kør som, og klik på TestNG Suite.

Skalering med Cloud Browser Grids

Løb Selenium WebDriver dækker lokalt to eller tre browsere, men rigtige brugere tilgår websteder fra hundredvis af operativsystemer og browserkombinationer. Cloud-laboratorier som f.eks. Sauce Labs, BrowserStackog Lambdatest eksponere et fjerntliggende WebDriver-slutpunkt. Peg på det samme Selenium tests på nettet, videregiver de ønskede funktioner for browser, version, operativsystem og opløsning, og pakken skalerer horisontalt uden at administrere lokale drivere.

Moderne gitre viser også AI-assisterede funktioner såsom visuel regressionsdiffrence, selvreparerende elementlokalisering og flakiness-scoring, hvilket reducerer vedligeholdelsesomkostningerne på langvarige Cross Browser Testing-suiter.

Bemærk: Det givne program blev bygget og testet på Selenium 4, Krom, Firefoxog Microsoft EdgeHvis programmerne giver en fejl, skal du opdatere driverens binære filer, så de matcher din installerede browserversion, eller bruge Selenium Manager, der automatisk løser drivere.

Download Selenium Projektfiler til demoen i denne vejledning

Ofte Stillede Spørgsmål