Pruebas entre navegadores usando Selenium Controlador web

โšก Resumen inteligente

Pruebas entre navegadores usando Selenium WebDriver verifica que una aplicaciรณn web se comporte de manera consistente en Chrome, Firefox, Safari y Edge. Este tutorial muestra cรณmo combinar Selenium Controlador web con TestNG para iniciar sesiones paralelas, validar la representaciรณn y ampliar la cobertura en navegadores modernos de escritorio y mรณviles.

  • ๐ŸŒ Por quรฉ es importante: Los usuarios reales abren la misma pรกgina en diferentes navegadores, por lo que el diseรฑo, los scripts y los estilos deben funcionar correctamente en todas partes para proteger las conversiones y la accesibilidad.
  • ๐Ÿงช Selenium Configuraciรณn de WebDriver: Configure ChromeDriver, GeckoDriver, EdgeDriver y SafariDriver, y luego seleccione la instancia correcta mediante un รบnico mรฉtodo parametrizado.
  • ???? TestNG ejecuciones paralelas: Un archivo testing.xml con parallel="tests" activa Chrome, Firefoxy las suites Edge al mismo tiempo, reduciendo los ciclos de retroalimentaciรณn para grandes paquetes de regresiรณn.
  • โœ… Defectos comunes detectados: Escalado de fuentes, cambios de diseรฑo CSS, JavaLas deficiencias en el polyfill de scripts, la compatibilidad con HTML5, la orientaciรณn de las imรกgenes y las discrepancias entre el sistema operativo y el navegador salen a la luz rรกpidamente.
  • ๐Ÿ› ๏ธ Laboratorios en la nube e inteligencia artificial: Sauce Labs, BrowserStack y LambdaTest amplรญan la cobertura a miles de pares de sistema operativo y navegador, y la regresiรณn visual basada en IA y los localizadores autorreparables aumentan la fiabilidad.

Pruebas entre navegadores en Selenium Controlador web

ยฟPor quรฉ necesitamos pruebas entre navegadores?

Las aplicaciones web son muy diferentes de las aplicaciones de escritorio nativas. Una aplicaciรณn web puede ser abierta en cualquier navegador por el usuario final. Por ejemplo, algunas personas prefieren abrir https://twitter.com in Firefox, mientras que otros usan Chrome, Safari, o Microsoft Edge.

En el diagrama que aparece a continuaciรณn, se puede observar que en los navegadores antiguos, el cuadro de inicio de sesiรณn de Twitter no muestra correctamente las esquinas redondeadas, mientras que la versiรณn moderna de Chrome sรญ las muestra tal como fueron diseรฑadas.

Prueba de navegador cruzado

Por lo tanto, debemos asegurarnos de que la aplicaciรณn web funcione como se espera en todos los navegadores mรกs populares, para que mรกs personas puedan acceder a ella y utilizarla.

Este objetivo se puede lograr con Cross Browser. Pruebas del producto en todos los navegadores incluidos en el รกmbito de aplicaciรณn.

Causas de los problemas de compatibilidad entre navegadores

  1. El tamaรฑo de fuente no coincide en diferentes navegadores.
  2. JavaLas implementaciones del motor de scripts difieren en Chrome (V8), Firefox (Mono araรฑa), Safari (JavaScriptCore) y Edge.
  3. Diferencias en la validaciรณn de CSS y HTML, incluido el manejo de prefijos de proveedor.
  4. Compatibilidad inconsistente o parcial con las funciones de HTML5 y ECMAScript en versiones antiguas de navegadores.
  5. Variaciones en la alineaciรณn de la pรกgina, el tamaรฑo de los divs y la representaciรณn mediante flexbox o cuadrรญcula.
  6. Diferencias en la orientaciรณn de la imagen y el perfil de color.
  7. Incompatibilidad del navegador con el sistema operativo subyacente, incluyendo peculiaridades de WebView mรณvil en Android y iOS.

Cรณmo realizar pruebas en varios navegadores

Si estamos usando Selenium WebDriver, podemos automatizar casos de prueba contra Chrome, Firefox, Microsoft Edgey los navegadores Safari.

Para ejecutar casos de prueba con diferentes navegadores en la misma mรกquina al mismo tiempo, podemos integrar el TestNG marco con Selenium WebDriver. Para una mayor cobertura de sistemas operativos y versiones, el mismo conjunto de pruebas se puede conectar a plataformas en la nube como Sauce Labs, BrowserStack o LambdaTest mediante un punto final remoto de WebDriver.

Tu archivo testing.xml tendrรก este aspecto:

Prueba de navegador cruzado

Este testing.xml se asignarรก con el Caso de prueba que tiene este aspecto:

Prueba de navegador cruzado

Debido a que testing.xml tiene mรบltiples etiquetas Test ('ChromeTest', 'FirefoxEste caso de prueba, denominado 'Test' o 'EdgeTest', se ejecutarรก una vez para cada navegador.

La primera prueba, 'ChromeTest', pasarรก el valor del parรกmetro 'browser' como 'chrome', por lo que se ejecutarรก ChromeDriver. Este caso de prueba se ejecutarรก en el navegador Chrome.

La segunda pruebaFirefoxPrueba' pasarรก el valor del parรกmetro 'navegador' como 'Firefox', entonces FirefoxEl controlador se ejecutarรก. Este caso de prueba se ejecutarรก en el Firefox Navegador. Agregar una prueba con Edge o Safari sigue el mismo patrรณn.

Guru99CrossBrowserScript.java

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

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

NOTA: Para ejecutar la prueba, haga clic con el botรณn derecho en prueba.xml, seleccione Ejecutar como y haga clic TestNG Suite.

 Prueba de navegador cruzado

Escalado con Cloud Browser Grids

Correr Selenium WebDriver cubre localmente dos o tres navegadores, pero los usuarios reales acceden a sitios desde cientos de combinaciones de sistemas operativos y navegadores. Los laboratorios en la nube, como Laboratorios de salsa, BrowserStack, y LambdaTest exponer un punto final remoto de WebDriver. Apuntar el mismo Selenium Las pruebas se realizan en la red, se cumplen las capacidades requeridas para el navegador, la versiรณn, el sistema operativo y la resoluciรณn, y el conjunto de pruebas se escala horizontalmente sin gestionar controladores locales.

Las cuadrรญculas modernas tambiรฉn ofrecen funciones asistidas por IA, como la comparaciรณn visual de regresiรณn, los localizadores de elementos autorreparables y la puntuaciรณn de inestabilidad, lo que reduce los costes de mantenimiento en los conjuntos de pruebas de compatibilidad entre navegadores de larga duraciรณn.

Nota: El programa proporcionado fue construido y probado en Selenium 4, Cromo, Firefox, y Microsoft EdgeSi los programas dan un error, actualice los binarios del controlador para que coincidan con la versiรณn de su navegador instalado o utilice Selenium Administrador que resuelve los controladores automรกticamente.

Descargue nuestra Selenium Archivos de proyecto para la demostraciรณn en este tutorial

Preguntas Frecuentes

Las pruebas entre navegadores son una tรฉcnica de prueba funcional y visual que verifica que una aplicaciรณn web funcione de la misma manera en Chrome, Firefox, Safari y Microsoft Edge En ordenadores de escritorio y dispositivos mรณviles, incluyendo diferentes sistemas operativos y tamaรฑos de ventana grรกfica.

Selenium WebDriver proporciona una รบnica API que controla Chrome, FirefoxEdge y Safari a travรฉs del protocolo oficial W3C WebDriver. El mismo cรณdigo de prueba se ejecuta en cualquier navegador, lo que facilita su uso. Selenium WebDriver es el estรกndar de facto para la automatizaciรณn de navegadores y las pruebas de compatibilidad entre navegadores.

TestNG Utiliza el archivo testing.xml con parallel="tests" y thread-count para lanzar cada etiqueta Test en su propio hilo. Combinado con una configuraciรณn @BeforeTest parametrizada, el mismo Selenium El paquete WebDriver se ejecuta en Chrome, Firefoxy Edge simultรกneamente, reduciendo el tiempo total de ejecuciรณn.

Sauce Labs, BrowserStack y LambdaTest ofrecen servicios de alojamiento. Selenium Cuadrรญculas que exponen miles de combinaciones de sistemas operativos y navegadores, incluyendo iOS Safari y Android Chrome. Apunte un RemoteWebDriver al punto final de la cuadrรญcula y pase las capacidades deseadas para ejecutar el mismo cรณdigo a gran escala.

Los motores de regresiรณn visual impulsados โ€‹โ€‹por IA, como los integrados en Applitools, Percy y los mรณdulos visuales de BrowserStack y LambdaTest, comparan capturas de pantalla semรกnticamente en lugar de pรญxel a pรญxel. Ignoran las diferencias esperadas de suavizado de bordes o representaciรณn de fuentes entre Chrome, Firefox, Safari y Edge, al tiempo que detectan regresiones de diseรฑo genuinas, lo que reduce drรกsticamente los falsos positivos en las canalizaciones de pruebas entre navegadores.

Sรญ. Marcos de trabajo modernos como Healenium, Testim, Mabl y las caracterรญsticas de IA en Selenium El IDE analiza el DOM y propone selectores XPath o CSS estables. Cuando un localizador falla debido a un cambio en la interfaz de usuario, los selectores generados por IA se autocorrigen evaluando los elementos cercanos y seleccionando la coincidencia mรกs cercana, lo que mantiene las pruebas de compatibilidad entre navegadores en buen estado con menos mantenimiento manual.

Los defectos comunes incluyen discrepancias en la representaciรณn de fuentes y CSS, JavaInconsistencias del motor de scripts, compatibilidad rota con las funciones HTML5 o ES, problemas de orientaciรณn de imรกgenes, problemas de alineaciรณn de pรกginas, prefijos de proveedor faltantes y fallas especรญficas del sistema operativo en iOS Safari o Android Cromo.

Resumir este post con: