Crossbrowsertesten met behulp van Selenium webdriver

Waarom hebben we cross-browsertests nodig?

Webapplicaties verschillen sterk van native desktopapplicaties. Een webapplicatie kan door de eindgebruiker in elke browser worden geopend. Sommige mensen geven er bijvoorbeeld de voorkeur aan om een ​​webapplicatie te openen via een desktopomgeving. https://twitter.com in Firefox, terwijl anderen gebruiken Chroom, Safariof Microsoft Edge.

In het onderstaande diagram kunt u zien dat in oudere browsers het inlogvak van Twitter de afgeronde hoeken niet correct weergeeft, terwijl de moderne versie van Chrome de hoeken wel correct weergeeft.

We moeten er dus voor zorgen dat de webapplicatie naar behoren werkt in alle populaire browsers, zodat meer mensen er toegang toe hebben en deze kunnen gebruiken.

Dit doel kan worden bereikt met Cross Browser. Testen van het product op elke browser die binnen het toepassingsgebied valt.

Redenen voor problemen met compatibiliteit tussen browsers

1. Lettergrootte komt niet overeen in verschillende browsers.
2. JavaDe implementaties van de scriptengine verschillen per Chrome-versie (V8). Firefox (SpiderMonkey), Safari (JavaScriptCore) en Edge.
3. Verschillen in CSS- en HTML-validatie, inclusief de afhandeling van vendorprefixes.
4. Inconsistente of gedeeltelijke ondersteuning van HTML5- en ECMAScript-functies in oudere browserversies.
5. Pagina-uitlijning, div-grootte en flexbox- of grid-renderingvariaties.
6. Verschillen in beeldoriëntatie en kleurprofiel.
7. Browserincompatibiliteit met het onderliggende besturingssysteem, inclusief eigenaardigheden van WebView op mobiele apparaten. Android en iOS.

Hoe u cross-browsertests kunt uitvoeren

Als we gebruiken Selenium Met WebDriver kunnen we testcases voor Chrome automatiseren. Firefox, Microsoft Edgeen de Safari-browser.

Om testcases tegelijkertijd met verschillende browsers op dezelfde machine uit te voeren, kunnen we de volgende functionaliteit integreren: TestNG raamwerk mee Selenium WebDriver. Voor een bredere dekking van besturingssystemen en versies kan dezelfde suite worden gekoppeld aan cloudgrids zoals Sauce Labs, BrowserStack of LambdaTest via een extern WebDriver-eindpunt.

Je testing.xml-bestand ziet er als volgt uit:

Deze test.xml wordt in kaart gebracht met de Testgeval wat er zo uitziet:

Omdat het bestand testing.xml meerdere Test-tags bevat ('ChromeTest', 'FirefoxTest', 'EdgeTest'), deze testcase wordt eenmaal per browser uitgevoerd.

De eerste test 'ChromeTest' geeft de parameterwaarde 'browser' door als 'chrome', waardoor ChromeDriver wordt uitgevoerd. Deze testcase wordt uitgevoerd in de Chrome-browser.

De tweede testFirefoxTest' zal de waarde van parameter 'browser' doorgeven als 'Firefox', Dus FirefoxHet stuurprogramma wordt uitgevoerd. Deze testcase wordt uitgevoerd op de Firefox browser. Het toevoegen van een Edge- of Safari-test volgt hetzelfde patroon.

Guru99CrossBrowserScript.java

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

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

NOTITIE: Om de test uit te voeren, klikt u met de rechtermuisknop op testen.xml, selecteer Uitvoeren als en klik TestNG Suite.

Schalen met cloudbrowsergrids

Hardlopen Selenium WebDriver ondersteunt lokaal twee of drie browsers, maar echte gebruikers bezoeken websites vanuit honderden combinaties van besturingssystemen en browsers. Cloudomgevingen zoals Saus Labs, BrowserStacken LambdaTest Een extern WebDriver-eindpunt beschikbaar maken. Wijs naar hetzelfde Selenium Tests op het grid voldoen aan de gewenste mogelijkheden voor de browser, versie, besturingssysteem en resolutie, en de suite schaalt horizontaal zonder lokale stuurprogramma's te hoeven beheren.

Moderne grids beschikken ook over AI-ondersteunde functies zoals visuele regressievergelijkingen, zelfherstellende elementzoekers en instabiliteitsscores, die de onderhoudskosten van langlopende cross-browser testsuites verlagen.

Let op: Het gegeven programma is gebouwd en getest op Selenium 4, Chrome, Firefoxen Microsoft EdgeAls de programma's een foutmelding geven, werk dan de stuurprogramma's bij zodat ze overeenkomen met uw geïnstalleerde browserversie, of gebruik Selenium Een manager die stuurprogramma's automatisch oplost.

Download de Selenium Projectbestanden voor de demo in deze zelfstudie

Veelgestelde vragen