Cross Browser Testing med Selenium webbdrivrutin

Varför behöver vi testa över webbläsare?

Webbaserade applikationer skiljer sig mycket från inbyggda skrivbordsapplikationer. En webbapplikation kan öppnas i vilken webbläsare som helst av slutanvändaren. Till exempel föredrar vissa att öppna https://twitter.com in Firefox, medan andra använder krom, Safari, eller Microsoft Edge.

I diagrammet nedan kan du se att i äldre webbläsare renderar inte inloggningsrutan på Twitter rundade hörn korrekt, medan moderna Chrome renderar hörnen som de ska.

Så vi måste se till att webbapplikationen fungerar som förväntat i alla populära webbläsare, så att fler kan komma åt den och använda den.

Detta mål kan uppfyllas med Cross Browser Testning av produkten på alla webbläsare som omfattas.

Orsaker till problem med flera webbläsare

1. Teckenstorleken matchar inte i olika webbläsare.
2. JavaImplementeringar av skriptmotorer skiljer sig åt mellan Chrome (V8), Firefox (SpiderMonkey), Safari (JavaScriptCore) och Edge.
3. Skillnader i CSS- och HTML-validering, inklusive hantering av leverantörsprefix.
4. Inkonsekvent eller ofullständigt stöd för HTML5- och ECMAScript-funktioner i äldre webbläsarversioner.
5. Sidjustering, div-storlek och variationer i flexbox- eller rutnätsrendering.
6. Bildorientering och skillnader i färgprofil.
7. Webbläsarens inkompatibilitet med det underliggande operativsystemet, inklusive egenheter i mobil WebView Android och iOS.

Hur man gör crossbrowser-testning

Om vi ​​använder Selenium WebDriver, vi kan automatisera testfall mot Chrome, Firefox, Microsoft Edgeoch Safari-webbläsare.

För att köra testfall med olika webbläsare på samma maskin samtidigt kan vi integrera TestNG ram med Selenium WebDriver. För bredare OS- och versionstäckning kan samma svit pekas mot molnnätverk som Sauce Labs, BrowserStack eller LambdaTest via en fjärransluten WebDriver-slutpunkt.

Din testing.xml kommer att se ut så här:

Denna testing.xml kommer att mappas med Testfall vilket ser ut så här:

Eftersom testing.xml har flera testtaggar ('ChromeTest', 'FirefoxTest', 'EdgeTest'), kommer detta testfall att köras en gång för varje webbläsare.

Det första testet 'ChromeTest' skickar värdet för parametern 'browser' som 'chrome', så ChromeDriver kommer att köras. Detta testfall kommer att köras i webbläsaren Chrome.

Det andra testetFirefoxTest' kommer att skicka värdet för parametern 'webbläsare' som 'Firefox', så FirefoxDrivrutinen kommer att köras. Detta testfall kommer att köras på Firefox webbläsare. Att lägga till ett Edge- eller Safari-test följer samma 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>

OBS: För att köra testet, högerklicka på testing.xml, välj Kör som och klicka på TestNG Svit Room.

Skalning med Cloud Browser Grids

Springa Selenium WebDriver täcker lokalt två eller tre webbläsare, men riktiga användare kommer åt webbplatser från hundratals olika operativsystem och webbläsarkombinationer. Molnlabb som Sauslabb, BrowserStackoch Lambdatest exponera en fjärransluten WebDriver-slutpunkt. Peka samma Selenium tester vid nätet, skickar önskade funktioner för webbläsaren, versionen, operativsystemet och upplösningen, och sviten skalar horisontellt utan att hantera lokala drivrutiner.

Moderna rutnät visar även AI-assisterade funktioner som visuell regressionsdifferens, självläkande elementlokalisering och flakighetspoängsättning, vilket minskar underhållskostnaderna för långlivade Cross Browser Testing-sviter.

Obs: Det givna programmet byggdes och testades på Selenium 4, Krom, Firefoxoch Microsoft EdgeOm programmen ger ett felmeddelande, uppdatera drivrutinsbinärfilerna så att de matchar din installerade webbläsarversion, eller använd Selenium Manager som löser drivrutiner automatiskt.

ladda ner Selenium Projektfiler för demon i denna handledning

Vanliga frågor