Cross Browser Testing folosind Selenium webdriver

De ce avem nevoie de testare între browsere?

Aplicațiile web sunt foarte diferite de aplicațiile desktop native. O aplicație web poate fi deschisă în orice browser de către utilizatorul final. De exemplu, unii oameni preferă să deschidă https://twitter.com in Firefox, în timp ce alții folosesc Chrome, Safari, Microsoft Edge.

În diagrama de mai jos puteți observa că în browserele mai vechi, caseta de conectare a Twitter nu afișează corect colțurile rotunjite, în timp ce Chrome modern afișează colțurile așa cum este conceput.

Așadar, trebuie să ne asigurăm că aplicația web va funcționa conform așteptărilor în toate browserele populare, astfel încât mai mulți oameni să o poată accesa și utiliza.

Acest obiectiv poate fi îndeplinit cu Cross Browser Testarea a produsului pe fiecare browser din domeniul de aplicare.

Motive pentru problemele cross-browser

1. Dimensiunea fontului nepotrivită în diferite browsere.
2. JavaImplementările motorului de script diferă în Chrome (V8), Firefox (Maimuță Păianjen), Safari (JavaScriptCore) și Edge.
3. Diferențe între validarea CSS și HTML, inclusiv gestionarea prefixelor furnizorului.
4. Compatibilitate inconsistentă sau parțială cu funcțiile HTML5 și ECMAScript în versiunile mai vechi de browser.
5. Alinierea paginii, dimensionarea div-urilor și variațiile de randare flexbox sau grilă.
6. Diferențe de orientare a imaginii și profil de culoare.
7. Incompatibilitatea browserului cu sistemul de operare subiacent, inclusiv particularitățile WebView pentru mobil Android și iOS.

Cum să faceți testarea încrucișată a browserului

Dacă folosim Selenium WebDriver, putem automatiza cazurile de testare pentru Chrome, Firefox, Microsoft Edgeși browserele Safari.

Pentru a executa cazuri de testare cu diferite browsere pe aceeași mașină în același timp, putem integra TestNG cadru cu Selenium WebDriver. Pentru o acoperire mai largă a sistemului de operare și a versiunilor, aceeași suită poate fi direcționată către grile cloud precum Sauce Labs, BrowserStack sau LambdaTest printr-un endpoint WebDriver la distanță.

Fișierul testing.xml va arăta astfel:

Acest testing.xml se va mapa cu Caz de testare care arată astfel:

Deoarece fișierul testing.xml are mai multe etichete Test („ChromeTest”, „FirefoxTest', 'EdgeTest'), acest caz de testare se va executa o dată pentru fiecare browser.

Primul test „ChromeTest” va transmite valoarea parametrului „browser” ca „chrome”, deci ChromeDriver va fi executat. Acest caz de testare va rula pe browserul Chrome.

Al doilea testFirefoxTestul va trece valoarea parametrului „browser” ca „Firefox„, deci FirefoxDriverul va fi executat. Acest caz de testare va rula pe Firefox browser. Adăugarea unui test Edge sau Safari urmează același model.

Guru99CrossBrowserScript.java

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

NOTĂ: Pentru a rula testul, faceți clic dreapta pe testing.xml, selectați Executare ca și faceți clic pe TestNG După.

Scalare cu grile de browser în cloud

Alergare Selenium WebDriver acoperă local două sau trei browsere, dar utilizatorii reali accesează site-uri din sute de combinații de sisteme de operare și browsere. Laboratoare cloud precum Laboratoarele de sos, BrowserStack și Test Lambda expuneți un endpoint WebDriver la distanță. Indicați același lucru Selenium testele la nivelul grilei, transmit capabilitățile dorite pentru browser, versiune, sistem de operare și rezoluție, iar suita se scalează pe orizontală fără a gestiona driverele locale.

Grilele moderne includ, de asemenea, funcții asistate de inteligență artificială, cum ar fi diferențierea vizuală de regresie, localizarea elementelor cu auto-reparare și scorarea instabilității, care reduc cheltuielile de întreținere pentru suitele de testare cross-browser de lungă durată.

Notă: Programul dat a fost construit și testat pe Selenium 4, Crom, Firefox și Microsoft EdgeDacă programele dau o eroare, actualizați fișierele binare ale driverelor pentru a se potrivi cu versiunea browserului instalat sau utilizați Selenium Manager care rezolvă automat driverele.

Descărcați Selenium Fișiere de proiect pentru demonstrația din acest tutorial

Întrebări frecvente