🚀抱歉Puppeteer，我已经爱上❤️‍🔥Playwright！

🚀抱歉Puppeteer，我已经爱上❤️‍🔥Playwright！

原文链接：Playwright vs. Puppeteer: Should You Make the Switch?
作者：Leapcell
译者：倔强青铜三

前言

大家好，我是倔强青铜三。作为一名对技术充满热情的软件工程师，我热衷于分享和传播IT技术知识，致力于通过我的知识和技能推动技术交流与创新。欢迎关注我的微信公众号：倔强青铜三。您的点赞、收藏和关注是我前进的动力，感谢您的支持！

从Puppeteer到Playwright：迁移是否值得？

在自动化测试领域，Puppeteer和Playwright是两个备受关注的工具。许多开发者在选择工具时会犹豫：是否应该从Puppeteer切换到Playwright？迁移过程是否复杂？Playwright是否值得投入？本文将详细探讨这些问题，帮助您做出明智的选择。

Puppeteer与Playwright的现状

Puppeteer和Playwright在功能上有许多相似之处，但它们的发展速度和技术支持却有所不同。Playwright近年来发展迅速，逐渐成为许多开发者的首选工具。相比之下，Puppeteer的更新速度相对较慢，社区活跃度也有所下降。这使得许多开发者开始考虑从Puppeteer迁移到Playwright。

为什么选择Playwright？

Playwright的优势在于其强大的功能和活跃的社区支持。具体来说：

• 更新频率高：Playwright的更新速度远超Puppeteer，带来了许多新功能和改进。
• 性能优异：在实际的端到端测试中，Playwright的测试执行速度更快，性能更稳定。
• 社区活跃：Playwright在GitHub、Twitter和Slack等平台上拥有活跃的社区，开发者可以轻松获取技术支持和交流经验。

Puppeteer与Playwright的功能对比

为了更好地理解两者的差异，我们可以通过以下对比表来了解它们的主要功能变化：

Puppeteer	Playwright
puppeteer.launch(...)	playwright.chromium.launch(...)
browser.createIncognitoBrowserContext(...)	browser.newContext(...)
page.setViewport(...)	page.setViewportSize(...)
page.waitForSelector(selector) page.click(selector);	page.click(selector)
page.waitForXPath(XPathSelector)	page.waitForSelector(XPathSelector)
page.$x(xpath\_selector)	page.$(xpath\_selector)
page.waitForNetworkIdle(...)	page.waitForLoadState({ state: 'networkidle' })
page.waitForFileChooser(...)	已移除，处理方式不同
page.waitFor(timeout)	page.waitForTimeout(timeout)
page.type(selector, text)	page.fill(selector, text)
page.cookies([...urls])	browserContext.cookies([urls])
page.deleteCookie(...cookies)	browserContext.clearCookies()
page.setCookie(...cookies)	browserContext.addCookies(cookies)
page.on('request',...)	通过page.route处理
elementHandle.uploadFile(...)	elementHandle.setInputFiles(...)
文件下载较为复杂	文件下载支持更好

迁移过程中的关键变化

包导入

在Puppeteer中，脚本的开头通常是：

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    //...

而在Playwright中，代码变为：

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const page = await browser.newPage();
    //...

Playwright提供了跨浏览器支持，您可以根据需要选择不同的浏览器，如webkit或firefox。

浏览器上下文

Puppeteer中创建浏览器上下文的方式：

const browser = await puppeteer.launch();
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

在Playwright中，代码变为：

const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

Playwright的浏览器上下文更加灵活，支持更多的配置选项。

等待机制

Playwright引入了自动等待机制，减少了手动等待的需求。例如：

• page.waitForNavigation和page.waitForSelector仍然可用，但在许多情况下不再需要手动调用。
• 新增了page.waitForEvent方法。
• page.waitForXPath被整合到page.waitForSelector中，支持XPath表达式。
• page.waitForFileChooser被移除，文件上传处理方式不同。
• page.waitForNetworkIdle被整合到page.waitForLoadState中。
• page.waitFor(timeout)变为page.waitForTimeout(timeout)。

设置视口

Puppeteer的page.setViewport在Playwright中变为page.setViewportSize。

输入文本

Puppeteer的page.type方法在Playwright中仍然可用，但新增了page.fill方法，用于更方便地填充表单。

Cookies操作

在Puppeteer中，Cookies操作是基于页面的，而在Playwright中，操作是在浏览器上下文中进行的：

• page.cookies([...urls])变为browserContext.cookies([urls])
• page.deleteCookie(...cookies)变为browserContext.clearCookies()
• page.setCookie(...cookies)变为browserContext.addCookies(cookies)

XPath选择器

Playwright可以自动识别以//或..开头的XPath选择器，而Puppeteer需要使用单独的接口。

设备模拟

Playwright支持在浏览器上下文中进行设备模拟，例如：

const pixel2 = devices['Pixel 2'];
const context = await browser.newContext({
    ...pixel2,
});

文件下载

Playwright简化了文件下载的处理方式：

const [download] = await Promise.all([
    page.waitForEvent('download'),
    page.click('#orders > ul > li:nth-child(1) > a')
]);

const path = await download.path();

文件上传

Puppeteer的elementHandle.uploadFile在Playwright中变为elementHandle.setInputFiles。

请求拦截

在Puppeteer中，请求拦截是通过page.setRequestInterception实现的，而在Playwright中，使用page.route方法：

await page.route('**/*', (route) => {
    if (route.request().resourceType() === 'image') {
        route.abort();
    } else {
        route.continue();
    }
});

Playwright的新特性

Playwright引入了许多新特性，为开发者提供了更强大的工具：

• 新选择器引擎：支持CSS、XPath以及Playwright专用选择器，如:nth-match(:text("Buy"), 3)。
• 保存和重用状态：可以轻松保存和重用会话的认证状态（Cookies和localStorage）。
• 定位器API：封装了元素检索逻辑，方便在不同时间点获取最新的DOM元素。
• Inspector工具：提供了一个GUI工具，方便调试脚本。
• 测试机制：内置了强大的测试机制，支持并行化、钩子等功能。
• Trace Viewer：可以探索测试或浏览器上下文的执行轨迹。
• 测试生成器：可以记录浏览器交互并生成完整的脚本。

迁移过程中的注意事项

在从Puppeteer迁移到Playwright时，需要注意以下几点：

• 版本兼容性：确保Playwright的版本与项目中的其他依赖库兼容。
• 配置调整：根据Playwright的文档，调整浏览器启动配置。
• 错误处理：熟悉Playwright的错误处理机制，确保代码能够正确捕获和处理异常。
• 团队协作：如果项目是团队协作的，确保所有成员都了解迁移的变化。

迁移后的优化建议

完成迁移后，可以考虑以下优化措施：

• 利用并行化功能：Playwright的测试机制支持并行化，可以显著缩短测试执行时间。
• 优化等待策略：根据页面元素的加载特性，合理设置等待超时时间。
• 代码重构：利用Playwright的新特性，重构代码，提高可读性和可维护性。

总结

从Puppeteer迁移到Playwright是一个值得考虑的选择。Playwright在性能、稳定性和功能上都有显著优势，能够为自动化测试带来更高的效率和更好的体验。通过本文的介绍，希望您对迁移过程有更清晰的了解，并能够顺利地完成迁移。

最后感谢阅读！欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！