Cross Browser Testing ved hjelp av Selenium webdriver

Hvorfor trenger vi testing på tvers av nettlesere?

Nettbaserte applikasjoner er svært forskjellige fra native skrivebordsapplikasjoner. En nettapplikasjon kan åpnes i hvilken som helst nettleser av sluttbrukeren. Noen foretrekker for eksempel å åpne https://twitter.com in Firefox, mens andre bruker Chrome, Safarieller Microsoft Edge.

I diagrammet nedenfor kan du se at i eldre nettlesere gjengir ikke innloggingsboksen til Twitter avrundede hjørner riktig, mens moderne Chrome gjengir hjørnene som utformet.

Så vi må sørge for at nettapplikasjonen fungerer som forventet i alle populære nettlesere, slik at flere kan få tilgang til den og bruke den.

Dette målet kan oppfylles med Cross Browser Testing av produktet på alle nettlesere som er omfattet.

Årsaker til problemer på tvers av nettlesere

1. Skriftstørrelsen samsvarer ikke i forskjellige nettlesere.
2. JavaImplementeringene av skriptmotorer varierer på tvers av Chrome (V8), Firefox (SpiderMonkey), Safari (JavaScriptCore) og Edge.
3. Forskjeller i CSS- og HTML-validering, inkludert håndtering av leverandørprefiks.
4. Inkonsekvent eller delvis støtte for HTML5- og ECMAScript-funksjoner i eldre nettleserversjoner.
5. Sidejustering, div-størrelse og variasjoner i flexbox- eller grid-gjengivelse.
6. Forskjeller i bildeorientering og fargeprofil.
7. Nettleserens inkompatibilitet med det underliggende operativsystemet, inkludert særegenheter ved mobil WebView Android og iOS.

Slik gjør du testing på tvers av nettlesere

Hvis vi bruker Selenium WebDriver, vi kan automatisere testtilfeller mot Chrome, Firefox, Microsoft Edgeog Safari-nettlesere.

For å kjøre testtilfeller med forskjellige nettlesere på samme maskin samtidig, kan vi integrere TestNG rammeverk med Selenium WebDriver. For bredere OS- og versjonsdekning kan den samme suiten pekes mot skynett som Sauce Labs, BrowserStack eller LambdaTest gjennom et eksternt WebDriver-endepunkt.

testing.xml-filen din vil se slik ut:

Denne testing.xml vil kartlegge med Testsak som ser slik ut:

Fordi testing.xml-filen har flere testkoder ('ChromeTest', 'FirefoxTest', 'EdgeTest'), vil denne testtilfellet kjøres én gang for hver nettleser.

Den første testen «ChromeTest» vil sende verdien av parameteren «browser» som «chrome», slik at ChromeDriver vil bli kjørt. Denne testtilfellet vil kjøre på Chrome-nettleseren.

Den andre testenFirefoxTest' vil sende verdien av parameteren 'nettleser' som 'Firefox', så FirefoxDriveren vil bli kjørt. Denne testtilfellet vil kjøre på Firefox nettleser. Å legge til en Edge- eller Safari-test følger samme mønster.

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>

NOTAT: For å kjøre testen, høyreklikk på testing.xml, velg Kjør som, og klikk på TestNG Etter.

Skalering med nettlesernett i skyen

kjører Selenium WebDriver dekker lokalt to eller tre nettlesere, men ekte brukere får tilgang til nettsteder fra hundrevis av operativsystemer og nettleserkombinasjoner. Skylaboratorier som Saus Labs, BrowserStackog Lambda test eksponere et eksternt WebDriver-endepunkt. Pek det samme Selenium tester på nettet, sender ønskede funksjoner for nettleser, versjon, operativsystem og oppløsning, og pakken skalerer horisontalt uten å administrere lokale drivere.

Moderne rutenett viser også AI-assisterte funksjoner som visuell regresjonsdiffering, selvreparerende elementlokalisering og flakhetsscoring, noe som reduserer vedlikeholdskostnader på langvarige Cross Browser Testing-suiter.

OBS: Det gitte programmet ble bygget og testet på Selenium 4, Krom, Firefoxog Microsoft EdgeHvis programmene gir en feilmelding, må du oppdatere driverbinærfilene slik at de samsvarer med nettleserversjonen som er installert, eller bruke Selenium Manager som løser drivere automatisk.

Last ned Selenium Prosjektfiler for demoen i denne opplæringen

Spørsmål og svar