我已经测试和编写代码十年了，过去四年来，我一直在Heisenbug会议程序委员会中测试报告。今天，我将讨论端到端测试，跨浏览器的可访问性以及使用Playwright版本0.10.0的快感。端到端
为什么我们需要端到端测试？它们控制浏览器并模拟用户操作。例如，我描述了自定义脚本，并希望在产品的每个版本中对它们进行测试。手动检查所有版本的所有脚本比自动检查更昂贵且更长。有不同的工具：硒，木偶，量角器，赛普拉斯等。两周前，发布了一个新工具-Playwright，由Puppeteer的开发者Andrey Lushnikov进行了开发。该库完全解决了编写跨浏览器测试的问题。
安德烈·拉什尼科夫（ Andrey Lushnikov）发布的原始推文。木偶vs. 剧作家
我在多个项目中使用了Puppeteer，总体来说还不错。此外，我还记得去年年底Puppeteer发行了2.0版的主要版本。但是，当我查看他的存储库时，我看到了一张有趣的图片：
看来我不是色盲的，而是有点红。我想知道为什么Playwright更好-一种新工具，可以整洁地放在Microsoft组织的GitHub上。为什么木偶好？它会启动无头浏览器并使用DevTools协议，因此测试比Selenium更快，更稳定，并且可以使用令人愉悦的JavaScript编写它们。剧作家有什么好处？首先，它有所有的木偶面包。其次，它允许您编写跨浏览器测试-您可以在测试代码中选择任何浏览器：WebKit，Chromium和Firefox。在Playwright上编写跨浏览器测试需要什么？我需要npm，实验性Habr，阅读文档的学校英语，一杯咖啡和15分钟半的时间。安装Playwright。我们在控制台中编写：npm i playwrightHabr屏幕截图。从文档中复制示例：const playwright = require('playwright');
(async () => {
for (const browserType of ['chromium', 'firefox', 'webkit']) {
const browser = await playwright[browserType].launch();
const context = await browser.newContext();
const page = await context.newPage('http://habr.com/');
await page.screenshot({ path: `screenshots/example-${browserType}.png` });
await browser.close();
}
})();
Puppeteer上的代码几乎相同：const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://habr.com');
await page.screenshot({path: 'screenshots/example.png'});
await browser.close();
})();
第一个示例中的测试将在三种浏览器中运行。的确，尚不清楚哪些特定版本以及哪些版本普遍可用。该文档说Playwright 自动为浏览器下载驱动程序。您还可以指定特定的浏览器： const browser = await chromium.launch();
const context = await browser.newContext();
要在Puppeteer中选择浏览器版本，您需要指定驱动程序的路径。 PlayWright中没有这种可能性。据我了解，将始终使用引擎的最新版本，这已在GitHub上进行了讨论。顺便说一句，如果您喜欢屏幕截图测试，请当心。 Playwright和Puppeteer在Chromium中采用不同的屏幕截图：
由于某种原因，字体大小不同。我在GitHub上开始了一张票。Playwright支持WebKit，这意味着在移动浏览器中进行测试。但是所有智能手机和平板电脑的分辨率都不同-运行测试时如何选择所需的分辨率？我在deviceDescriptors.ts代码中找到了76个设备，包括流行的型号BlackBerry和JioPhone2。有用：您可以在横向模式下选择iPhone 8和iPhone 8。测试代码与常规浏览器的测试代码几乎相同：const { webkit, devices } = require('playwright');
const deviceType = devices['iPhone 8'];
(async () => {
const browser = await webkit.launch();
const context = await browser.newContext({
viewport: deviceType.viewport,
userAgent: deviceType.userAgent
});
const page = await context.newPage('http://habr.com');
await page.screenshot({ path: `example-${deviceType.name}.png`});
await browser.close();
})();
Playwright的一个有趣功能是更改地理位置的功能，在测试地图时会派上用场。初始化浏览器上下文时，需要指定坐标：const context = await browser.newContext({
viewport: iPhone11.viewport,
userAgent: iPhone11.userAgent,
geolocation: { longitude: 12.492507, latitude: 41.889938 },
permissions: { 'https://yandex.ru/maps': ['geolocation'] }
});
这不是我考试的第一年，有时还想看看测试如何通过。Puppeteer具有headless: false启动浏览器窗口的选项。Playwright的选择完全相同：puppeteer.launch({headless: false});
playwright.launch({headless: false});
由于两个库上的测试代码都是异步的，因此您不能随便抓取它。Puppeteer文档中有一整段内容，而Playwright文档中没有任何内容。此外，Playwright文档中没有代码示例，但是GitHub上有一张票。参加开源项目似乎是一个很好的理由。我将有关Playwright和Jest的这篇文章中的示例放到了存储库中。是时候搬走了吗？
Playwright的开发人员似乎已准备好快速添加功能并修复错误。例如，下载文件目前无法正常工作，但是开发人员写道，他们将对其进行修复，并且不会比Puppeteer的情况更糟。如果您想将测试移植到Playwright，请准备开始门票。似乎Playwright团队希望将这个库中最好的组合在一起。在GitHub票证中，我发现了一些改进API的想法-例如，在Cypress中添加功能。Playwright支持多种浏览器，并且使用它来编写跨浏览器测试更加方便。没错，现在他有0.10.0版本，没有太多的文档，SlackOverflow只有六个问题。我建议您密切注意Playwright的发行，但不要急于在生产中使用它，因为API可能会发生变化。Heisenbug的开发人员Playwright
我分享新闻：Andrei Lushnikov将在4月8日至9日在圣彼得堡举行的Heisenbug 2020 Piter会议上发表关于Playwright的演讲。他有很多问题：- 为什么新图书馆叫Playwright，戏剧在哪里
- 示例何时出现在文档中以及等待多长时间才能发布1.0版
- Puppeteer存储库中的徽章变为绿色的概率是多少
UPD：刚刚发布了对Andrei Lushnikov 的专访：“如果网站工作得更好，它将是完美的”。在其中，我们谈到了很多协议，浏览器引擎和外部集成。门票在Heisenbug网站上。关于Playwright和Puppeteer的观点-在评论中写下。
如果您读完该帖子的末尾，但由于某种原因而对Puppeteer不熟悉，请查看上次Heisenbug会议上Andrey的报告，在该会议上他谈到了Puppeteer长达55分钟。