使用跨浏览器测试 Selenium 网络驱动程序

⚡ 智能摘要

使用跨浏览器测试 Selenium WebDriver 会验证 Web 应用程序在 Chrome 浏览器上的行为是否一致。 Firefox本教程演示如何将 Safari 和 Edge 浏览器结合起来使用。 Selenium WebDriver 具有 TestNG 启动并行会话，验证渲染，并扩展覆盖范围，使其跨越现代桌面和移动浏览器。

🌐 为什么它的事项： 真实用户会在不同的浏览器中打开同一个页面，因此布局、脚本和样式必须在任何地方都保持一致，以保证转化率和可访问性。
🧪 Selenium WebDriver 设置： 配置 ChromeDriver、GeckoDriver、EdgeDriver 和 SafariDriver，然后通过一个参数化方法选择正确的实例。
📱 TestNG 并行运行： 一个包含 parallel="tests" 的 testing.xml 文件会触发 Chrome 浏览器。 Firefox同时，Edge 套件也得以运行，从而缩短了大型回归测试包的反馈周期。
✅ 发现的常见缺陷： 字体缩放、CSS布局偏移、 Java脚本填充漏洞、HTML5 支持问题、图像方向问题以及操作系统与浏览器不匹配等问题很快就会暴露出来。
🛠️ 云实验室和人工智能： Sauce Labs、BrowserStack 和 LambdaTest 将覆盖范围扩展到数千个操作系统-浏览器组合，而 AI 驱动的视觉回归和自愈定位器提高了可靠性。

为什么我们需要跨浏览器测试？

基于 Web 的应用程序与原生桌面应用程序截然不同。最终用户可以在任何浏览器中打开 Web 应用程序。例如，有些人更喜欢打开…… https://twitter.com in Firefox，而其他人使用 铬系列, Safari 或 Microsoft Edge.

从下图可以看出，在旧版浏览器中，Twitter 的登录框无法正确渲染圆角，而现代 Chrome 浏览器则能按设计渲染圆角。

因此，我们需要确保该网络应用程序在所有主流浏览器中都能按预期运行，以便更多的人可以访问和使用它。

跨浏览器兼容性可以实现这一目标。测试与验证该产品可在所有适用浏览器上运行。

跨浏览器兼容性问题的原因

不同浏览器中的字体大小不匹配。
JavaChrome（V8）的脚本引擎实现方式各不相同， Firefox （蜘蛛猴），Safari（JavaScriptCore），以及 Edge。
CSS 和 HTML 验证差异，包括供应商前缀处理。
旧版本浏览器对 HTML5 和 ECMAScript 功能的支持不一致或不完整。
页面对齐方式、div尺寸以及flexbox或网格渲染方式的变化。
图像方向和色彩配置文件差异。
浏览器与底层操作系统不兼容，包括移动端 WebView 的一些怪异之处 Android 和iOS。

如何进行跨浏览器测试

如果我们正在使用 Selenium 借助 WebDriver，我们可以自动化针对 Chrome 的测试用例。 Firefox, Microsoft Edge以及 Safari 浏览器。

为了在同一台机器上同时使用不同的浏览器执行测试用例，我们可以集成 TestNG 框架与 Selenium WebDriver。为了获得更广泛的操作系统和版本覆盖范围，可以通过远程 WebDriver 端点将同一测试套件指向 Sauce Labs、BrowserStack 或 LambdaTest 等云网格。

您的 testing.xml 文件内容将如下所示：

此 testing.xml 将与测试用例看起来是这样的：

因为 testing.xml 中有多个 Test 标签（'ChromeTest'，'Firefox'Test', 'EdgeTest')，此测试用例将对每个浏览器执行一次。

第一个测试用例“ChromeTest”会将参数“browser”的值设置为“chrome”，因此会执行ChromeDriver。此测试用例将在Chrome浏览器上运行。

第二次测试Firefox测试’将传递参数‘浏览器’的值作为’Firefox'，所以 Firefox驱动程序将执行。此测试用例将在以下平台上运行： Firefox 浏览器。添加 Edge 或 Safari 测试也遵循相同的模式。

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

测试.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>

注意: 要运行测试，请右键单击 测试.xml选择“运行方式”，然后单击 TestNG 套房。

利用云浏览器网格进行扩展

运行 Selenium WebDriver 在本地仅支持两到三种浏览器，但实际用户会使用数百种操作系统和浏览器组合访问网站。例如，云实验室就可能出现这种情况。酱料实验室, BrowserStack和 LambdaTest 公开远程 WebDriver 端点。指向同一端点。 Selenium 在网格上进行测试，通过浏览器、版本、操作系统和分辨率所需的功能，并且该套件可以水平扩展而无需管理本地驱动程序。

现代网格还展示了人工智能辅助功能，例如视觉回归差异、自愈元素定位器和不稳定性评分，从而降低了长期运行的跨浏览器测试套件的维护开销。

注意： 该程序已构建并测试完毕。 Selenium 4、Chrome浏览器 Firefox和 Microsoft Edge如果程序报错，请更新驱动程序二进制文件以匹配您安装的浏览器版本，或使用 Selenium 能够自动解析驱动程序的管理器。

下载 Selenium 本教程中演示的项目文件

常见问题

跨浏览器测试是一种功能性和视觉性测试技术，用于验证 Web 应用程序在 Chrome 浏览器上是否以相同的方式运行。 Firefox、Safari 和 Microsoft Edge 涵盖桌面和移动设备，包括不同的操作系统和视口尺寸。

Selenium WebDriver 提供了一个驱动 Chrome 的单一 API， Firefox通过官方的 W3C WebDriver 协议，Edge 和 Safari 浏览器均可运行相同的测试代码。该测试代码适用于任何浏览器，这使得 Selenium WebDriver 是浏览器自动化和跨浏览器测试的事实标准。

TestNG 使用 testing.xml 文件，并设置 parallel="tests" 和线程数，以便在各自的线程中启动每个 Test 标签。结合参数化的 @BeforeTest 设置，同样可以实现这一点。 Selenium WebDriver 套件运行在 Chrome 浏览器上， Firefox同时，Edge 也参与其中，从而缩短了整体执行时间。

Sauce Labs、BrowserStack 和 LambdaTest 提供托管服务。 Selenium 网格展示了数千种操作系统和浏览器组合，包括 iOS Safari 和 Android Chrome。将 RemoteWebDriver 指向网格端点并传递所需的功能，即可大规模运行相同的代码。

人工智能驱动的视觉回归引擎，例如 Applitools、Percy 以及 BrowserStack 和 LambdaTest 的视觉模块中内置的引擎，会进行语义上的屏幕截图比较，而不是逐像素比较。它们会忽略 Chrome 浏览器之间预期的抗锯齿或字体渲染差异。 FirefoxSafari 和 Edge，同时还能检测到真正的布局回归，从而大幅减少跨浏览器测试管道中的误报。

是的。像 Healenium 这样的现代框架， TestimMabl 和 AI 功能 Selenium IDE 分析 DOM 并生成稳定的 XPath 或 CSS 选择器。当定位器因 UI 更改而失效时，AI 生成的选择器会通过对附近元素进行评分并选择最接近的匹配项来进行自我修复，从而在减少人工维护的情况下保持跨浏览器测试套件的正常运行。

常见缺陷包括字体和CSS渲染不匹配， Java脚本引擎不一致、HTML5或ES功能支持损坏、图像方向问题、页面对齐问题、缺少供应商前缀以及iOS Safari等操作系统特有的故障 Android 谷歌Chrome。

使用跨浏览器测试 Selenium 网络驱动程序