Tests multi-navigateurs utilisant Selenium pilote web

Pourquoi avons-nous besoin de tests multi-navigateurs ?

Les applications web sont très différentes des applications de bureau natives. Une application web peut être ouverte dans n'importe quel navigateur par l'utilisateur final. Par exemple, certaines personnes préfèrent ouvrir une application web depuis n'importe quel navigateur. https://twitter.com in Firefox, tandis que d'autres utilisent Chrome, Safari, Microsoft Edge.

Dans le schéma ci-dessous, vous pouvez observer que sur les navigateurs plus anciens, la zone de connexion de Twitter n'affiche pas correctement les coins arrondis, tandis que Chrome moderne affiche les coins comme prévu.

Nous devons donc nous assurer que l'application web fonctionnera comme prévu dans tous les navigateurs populaires, afin qu'un plus grand nombre de personnes puissent y accéder et l'utiliser.

Cet objectif peut être atteint grâce à la compatibilité multi-navigateurs. Tests du produit sur tous les navigateurs concernés.

Raisons des problèmes de compatibilité entre navigateurs

1. Incompatibilité de taille de police dans différents navigateurs.
2. JavaLes implémentations du moteur de script diffèrent selon Chrome (V8), Firefox (SpiderMonkey), Safari (JavaScriptCore), et Edge.
3. Différences de validation entre CSS et HTML, notamment en ce qui concerne la gestion des préfixes fournisseurs.
4. Prise en charge incohérente ou partielle des fonctionnalités HTML5 et ECMAScript dans les anciennes versions des navigateurs.
5. Alignement des pages, dimensionnement des divs et variations de rendu flexbox ou grille.
6. Différences d'orientation et de profil colorimétrique de l'image.
7. Incompatibilité du navigateur avec le système d'exploitation sous-jacent, y compris des particularités de WebView mobile sur Android et iOS.

Comment effectuer des tests multi-navigateurs

Si nous utilisons Selenium Avec WebDriver, nous pouvons automatiser les cas de test pour Chrome. Firefox, Microsoft Edgeet les navigateurs Safari.

Pour exécuter des cas de test avec différents navigateurs sur la même machine simultanément, nous pouvons intégrer le TestNG cadre avec Selenium WebDriver. Pour une couverture plus large des systèmes d'exploitation et des versions, la même suite peut être dirigée vers des grilles cloud telles que Sauce Labs, BrowserStack ou LambdaTest via un point de terminaison WebDriver distant.

Votre fichier testing.xml ressemblera à ceci :

Ce testing.xml correspondra au Cas de test ce qui ressemble à ceci :

Parce que le fichier testing.xml contient plusieurs balises Test (« ChromeTest », « FirefoxTest', 'EdgeTest'), ce cas de test sera exécuté une fois pour chaque navigateur.

Le premier test, « ChromeTest », transmet la valeur « chrome » au paramètre « browser », ce qui déclenche l’exécution de ChromeDriver. Ce test s’exécutera sur le navigateur Chrome.

Le deuxième test 'FirefoxTest' transmettra la valeur du paramètre 'navigateur' comme 'Firefox', donc FirefoxLe pilote sera exécuté. Ce cas de test s'exécutera sur le Firefox Navigateur. L'ajout d'un test Edge ou Safari suit le même schéma.

Guru99CrossBrowserScript.java

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

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

NOTE: Pour exécuter le test, cliquez avec le bouton droit sur test.xml, sélectionnez Exécuter en tant que, puis cliquez sur TestNG Suite.

Mise à l'échelle avec les grilles du navigateur cloud

Fonctionnement Selenium WebDriver prend en charge localement deux ou trois navigateurs, mais les utilisateurs réels accèdent aux sites depuis des centaines de combinaisons de systèmes d'exploitation et de navigateurs. Les laboratoires cloud tels que Laboratoires de sauce, BrowserStack et LambdaTest exposez un point de terminaison WebDriver distant. Pointez le même Selenium Les tests effectués sur la grille vérifient les capacités requises pour le navigateur, la version, le système d'exploitation et la résolution, et la suite s'adapte horizontalement sans gérer les pilotes locaux.

Les grilles modernes font également apparaître des fonctionnalités assistées par l'IA telles que la comparaison visuelle de régression, les localisateurs d'éléments auto-réparateurs et le score de fiabilité, ce qui réduit les coûts de maintenance des suites de tests multi-navigateurs de longue durée.

À noter: Le programme donné a été construit et testé sur Selenium 4, Chrome, Firefox et Microsoft EdgeSi les programmes génèrent une erreur, veuillez mettre à jour les fichiers binaires du pilote pour qu'ils correspondent à la version de votre navigateur installée, ou utilisez Selenium Gestionnaire qui résout automatiquement les problèmes de pilotes.

Téléchargez le Selenium Fichiers de projet pour la démo de ce didacticiel

FAQ