自动化测试已成为现代 Web 开发的重要组成部分。随着 Web 应用程序变得越来越复杂,手动测试每个功能已不再可行。自动化测试工具允许开发人员编写模拟用户交互的测试并验证应用程序是否按预期工作。
自动化浏览器测试的两个最流行的工具是 Puppeteer 和 Selenium。两者都可以启动浏览器、导航到网页、与页面上的元素交互以及对页面内容进行断言。但是,存在一些关键差异,使每个工具更适合某些测试场景。
在这份综合指南中,我们将比较 Puppeteer 和 Selenium,以帮助您确定哪个是满足您需求的正确选择。
什么是木偶?
木偶戏 是 Chrome 团队开发的 Node 库。它提供了一个高级 API,用于通过 DevTools 协议控制无头 Chrome。
Puppeteer 默认运行无头,但可以配置为运行完整(非无头)Chrome 或 Chromium。
Puppeteer 的一些主要功能:
- 生成页面的屏幕截图和 PDF
- 抓取网站以提取内容
- 自动表单提交、UI 测试、键盘输入
- 通过设置设备模拟启用响应式测试
- 允许执行浏览器 JavaScript
- 用于导航和控制台日志等浏览器事件的 API
- 支持扩展安装
Puppeteer 仅支持基于 Chromium 的浏览器,例如 Chrome 和 Microsoft Edge。它不适用于 Firefox 或 Safari。
什么是硒?
硒 是一套用于自动化网络浏览器的开源工具套件。它的历史比 Puppeteer 更久,并且拥有来自多个浏览器供应商的支持者。
Selenium 支持多种语言,包括 Java、C#、Python、JavaScript 和 Ruby。它可以在桌面平台上自动化 Chrome、Firefox、Edge 和 Safari。 Selenium 还支持用于 Android 和 iOS 测试的移动浏览器。
硒的特点:
- 跨浏览器的兼容性
- 移动测试能力
- 用于录制和播放的 IDE
- 用于在多台机器上分配测试的网格
- 与 JUnit、TestNG、Mocha 等各种测试运行程序集成
- 跨行业的大型用户社区
与 Puppeteer 不同,Selenium 不允许执行浏览器 JavaScript 或直接使用 DevTools。
语法比较
Puppeteer 使用简洁的 API,读起来就像伪代码一样。例如:
// Navigate to a URL
await page.goto(‘https://www.example.com‘);
// Get an element
const button = await page.$(‘#submit-button‘);
// Click the button
await button.click();
Selenium 使用更详细的 API:
// Launch browser
WebDriver driver = new ChromeDriver();
// Navigate to URL
driver.get("https://www.example.com");
// Find element
WebElement button = driver.findElement(By.id("submit-button"));
// Click element
button.click();
Puppeteer 的 API 感觉更用户友好且更易于阅读。使用 async/await 语法减少了回调嵌套。总体而言,Puppeteer 需要的样板代码比 Selenium 少。
启动浏览器
要启动浏览器实例,Puppeteer 使用:
const browser = await puppeteer.launch();
使用 Selenium,您必须初始化特定的驱动程序类:
// Launch Chrome
WebDriver driver = new ChromeDriver();
// Launch Firefox
WebDriver driver = new FirefoxDriver();
Puppeteer 仅推出 Chromium,而 Selenium 支持多种浏览器。对于跨浏览器测试,Selenium 是更好的选择。
定位元素
Puppeteer 使用以下方式查找元素:
// Get element by CSS selector
const el = await page.$(‘.className‘);
// Get element by XPath
const el = await page.$x(‘//xpath‘);
Selenium 通过 WebDriver 定位器定位元素:
// Find by CSS
WebElement el = driver.findElement(By.cssSelector(".className"));
// Find by XPath
WebElement el = driver.findElement(By.xpath("//xpath"));
这两个工具都提供了广泛的定位器策略,例如 ID、类、文本、DOM 层次结构。总体而言,两者的元素选择都很简单。
与元素交互
为了与页面上的元素进行交互,Puppeteer 使用:
// Type into an input
await page.type(‘#input‘, ‘Hello world‘);
// Click a button
await button.click();
// Select an option
await page.select(‘#dropdown‘, ‘option2‘);
等效的 Selenium 代码是:
// Type text
driver.findElement(By.id("input")).sendKeys("Hello world");
// Click button
button.click();
// Select option
Select dropdown = new Select(driver.findElement(By.id("dropdown")));
dropdown.selectByVisibleText("option2");
Puppeteer 的 API 感觉更紧凑、更具表现力。 Selenium 需要额外的样板来进行某些交互,例如选择下拉菜单。
页面导航
为了导航到页面,Puppeteer 使用:
// Navigate to URL
await page.goto(‘https://example.com‘);
// Click a link
await page.click(‘a.page2‘);
// Go back
await page.goBack();
在硒中:
// Open URL
driver.get("https://example.com");
// Click link
driver.findElement(By.cssSelector("a.page2")).click();
// Go back
driver.navigate().back();
这两个工具之间的导航方法非常相似。 Puppeteer 消除了 Selenium 嵌套驱动程序命令的一些冗长内容。
执行 JavaScript
Puppeteer 的一大优势是能够直接执行浏览器 JavaScript:
// Set a cookie
await page.evaluate(() => {
document.cookie = "foo=bar";
});
// Get an element‘s text
const text = await page.evaluate(el => el.textContent, element);
Selenium 不提供直接运行 JavaScript 的方法。您必须使用解决方法,例如将脚本注入页面。
等待元素
Web 应用程序可能需要一些时间才能使用 JavaScript 动态加载内容。自动化测试需要等待元素准备好才能与它们交互。
Puppeteer 让您手动编写等待:
// Wait for selector to be visible
await page.waitForSelector(‘.element‘);
// Wait for navigation to complete
await page.waitForNavigation();
Selenium 具有内置的显式和隐式等待:
// Implicit wait
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
// Explicit wait
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".element")));
拥有可配置的内置等待可以更轻松地处理 Selenium 中的计时问题。 Puppeteer 需要手动编写脚本等待。
生成屏幕截图
这两个工具都可以在测试过程中捕获页面的屏幕截图。
傀儡师示例:
// Take a screenshot
await page.screenshot({path: ‘page.png‘});
硒示例:
// Capture screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
屏幕截图功能非常相似。 Puppeteer 的 API 更简单一些。
创建 PDF
除了屏幕截图之外,Puppeteer 还可以生成页面的 PDF:
// Generate PDF
await page.pdf({path: ‘page.pdf‘});
Selenium 中未内置此功能。您需要一个自定义实用程序来使用 Selenium 将页面打印为 PDF。
处理弹出窗口
为了处理警报、提示和浏览器弹出窗口,Puppeteer 提供了页面的 dialog
事件:
page.on(‘dialog‘, dialog => {
console.log(dialog.message());
dialog.accept();
});
Selenium 使用 Alert 接口与弹出窗口交互:
// Switch to alert
Alert alert = driver.switchTo().alert();
// Get text
String text = alert.getText();
// Accept alert
alert.accept();
这两个工具都可以在自动化过程中处理 JS 弹出窗口。 Selenium 的 API 在处理弹出窗口方面感觉更加完善。
并行测试
并行运行测试可以显着加快测试执行速度。
Puppeteer 不直接支持并行测试。您必须通过单独的测试运行程序来协调并行执行。
Selenium Grid 允许分布式测试在多台机器上并行运行。这使得扩展 Selenium 测试变得很容易。
浏览器日志
访问浏览器日志对于调试测试和检查网络活动非常有用。
Puppeteer 允许捕获浏览器控制台和网络日志:
// Listen for console logs
page.on(‘console‘, msg => {
console.log(‘Page Log:‘, msg.text());
});
// Get network request logs
const requests = browser.on(‘request‘, request => {
request.url(); // Log URLs
});
Selenium 不提供直接访问浏览器日志的方法。您必须找到解决方法来获取控制台或网络日志。
用户代理模拟
测试网站如何响应不同的设备和用户代理非常重要。
Puppeteer 可以轻松欺骗用户代理字符串:
await page.setUserAgent(‘Custom User Agent‘);
Selenium 不允许直接设置用户代理。这需要配置浏览器配置文件。
绩效审计
Puppeteer 集成了用于分析页面性能的工具:
// Audit performance
const metrics = await page.audit({
disableJavaScript: true // Test without JavaScript
});
// Log metrics
metrics.totalByteWeight; // Total page weight
性能审计需要使用 Selenium 引入额外的工具。 Puppeteer 将其内置。
定价比较
Puppeteer 和 Selenium 之间的主要区别之一是商业用途限制。
Puppeteer 是开源的并且可以免费使用。您可以将其用于商业用途,没有任何限制。
Selenium 也是开源的。但是,官方 Selenium WebDriver 二进制文件仅授权用于非商业用途。对于商业用途,您需要从 Selenium 供应商 BrowserStack 获取许可证。
这使得 Puppeteer 对于想要在商业上使用自动化解决方案而无需任何许可成本的团队来说是更可取的。
无头测试
无头测试是指运行没有任何可见 UI 的浏览器。它提供了一个轻量级的测试环境。
Puppeteer 默认以无头模式启动 Chrome,使其成为无头测试的理想选择。
Selenium 还可以使用以下选项配置为无头运行:
chromeOptions.addArguments("--headless");
因此,这两种工具都允许无头测试,Puppeteer 使其成为默认的开箱即用体验。
持续整合
CI/CD 集成对于自动执行代码更改测试非常重要。
Puppeteer 本身不提供任何内置的 CI/CD 功能。您需要将其连接到 Jenkins、CircleCI 等 CI 工具。
Selenium 通过 selenium-grid 提供与 CI/CD 管道的本机集成。这使得可以轻松地在 CI 基础设施上分发测试。
移动测试
虽然这两个工具都专注于 Web 测试,但 Selenium 还提供移动测试支持。
Selenium Appium 项目支持在 Android 和 iOS 平台上实现本机移动应用程序的自动化。 Puppeteer 不支持移动应用程序测试。
学习曲线
对于熟悉 JavaScript 和 Node.js 的开发人员来说,Puppeteer 上手非常直观。 API 设计密切反映了 DOM API 概念。
Selenium 的学习曲线更陡峭,因为您必须学习特定于 Selenium 的 WebDriver API。但 Java 经验有助于更快地提升。
总体而言,Puppeteer 对于具有 Web 开发背景的人来说更简单、更容易上手。
调试能力
对失败的测试进行故障排除是测试自动化的重要组成部分。
Puppeteer 允许直接在 Chrome DevTools 中设置断点和调试,以方便调试:
await page.pause(); // Pause execution
Selenium 没有内置调试功能。您必须依赖日志语句或外部调试工具。
浏览器支持
Puppeteer 的主要限制是它仅支持基于 Chromium 的浏览器。所以你不能用它在 Firefox 或 Safari 上进行测试。
Selenium 支持 Chrome、Firefox、Edge 和 Safari,从而实现真正的跨浏览器测试。如果跨浏览器的测试覆盖率是首要任务,那么 Selenium 可能是更好的选择。
开源社区
Selenium 已经存在十多年了,并且有一个庞大的社区支持。这里有专门针对 Selenium 的会议、用户组和活跃的问答论坛。
作为一个较新的项目,Puppeteer 的社区要小得多。但其开发人员的人体工程学设计和谷歌推动的动力可能会随着时间的推移而迎头赶上。
你应该使用 Puppeteer 还是 Selenium?
现在我们已经比较了这两个工具,您如何决定是使用 Puppeteer 还是 Selenium?
以下是一些需要考虑的关键因素:
浏览器支持 – 如果您需要多浏览器测试,Selenium 是最佳选择。对于仅限 Chrome 的测试,Puppeteer 是一个不错的选择。
移动测试 – Selenium 支持移动网络和本机应用程序测试。 Puppeteer 仅限桌面版。
调试 – Puppeteer 的内置 DevTools 集成使调试变得更加容易。
跨平台 – 对于Java和C#测试自动化,Selenium有更好的支持。 Puppeteer 专注于 JS/Node。
申请类型 – Puppeteer 非常适合测试 SPA 和小型 Web 应用程序。 Selenium 可以通过广泛的后端集成更好地扩展大型企业应用程序。
商业用途 – 希望在不受许可限制的情况下进行商业化自动化使用的团队可以从 Puppeteer 中受益。
编程舒适度 – 对于来自 DevOps 和 JavaScript 背景的测试人员来说,Puppeteer 的学习曲线可能较低。 Java 用户可以更快地熟悉 Selenium。
遗产投资 – 如果您已经进行了大量的 Selenium 测试,那么继续增强这些测试可能比从头开始使用 Puppeteer 更有意义。
对于许多测试自动化需求,这两种工具都可以完成工作。每个都有独特的优势,使其适合特定的用例。希望这个详细的比较能让您清楚地了解 Puppeteer 还是 Selenium 是否是满足您需求的正确选择。