e2e框架对比：Cypress和Playwright

Posted on by banban

Cypress

优点

  • 有易于理解的文档、视频讲解，包含了各种场景的sample文件，甚至还有一个开源的真实项目的测试代码
  • 链式调用方法，简单易懂
  • 可以使用 chrome extension
  • 直接支持component testing
  • dashborad
  • 录制视频，trace回溯(这个playwright也是支持的)

缺点

  • 不支持Safari，测试移动端较差，不支持touch event等手机上才有的事件，总结就是做不了兼容性测试

  • 需要谨慎使用 let,const,for,箭头函数 。总结就是尽量使用他提供的api，少用js语法，对这个框架的api依赖性非常高。

  • 链式调用的原理为迭代器+闭包，并非return 当前对象，靠着闭包保持着前面对象的信息。提供的then()也并不是js里原生的Promise.then ，而是第三方blue bird Promise再混合一些他们自己逻辑的改造then()，这个then()每次调用都返回一个yield对象。不支持async await

    While the API may look similar to Promises, with it’s then() syntax, Cypress commands are not promises – they are serial commands passed into a central queue, to be executed asynchronously at a later date. These commands are designed to deliver deterministic, repeatable and consistent tests.

    It’s very important to understand the mechanism Cypress uses to chain commands together. It manages a Promise chain on your behalf, with each command yielding a ‘subject’ to the next command, until the chain ends or an error is encountered. The developer should not need to use Promises directly, but understanding how they work is helpful!

  • 只能单线程测试

  • 不支持多页面(Tab)和多窗口(Window)

Playwright

优点

  • 一个worker的情况下和cypress相比: 依赖少，执行更快速度快

  • 可以同时开多个worker，默认就是开启的

    All tests run in worker processes. These processes are OS processes, running independently, orchestrated by the test runner. All workers have identical environments and each starts its own browser.

  • 可以多机器可以share测试结果

    • 比如你可以把一个测试拆成3个chunk：chunk1, chunk2, chunk3，可以用三台机器分别运行三个测试，最后share各自结果得出最终的结果，就这样就可以快3倍
    npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

  • 基于 playwright codegen 命令录制脚本

    • 你可以在浏览器操作一系列测试动作，然后Playwright会帮你自动生成测试脚本

  • 开箱支持TS，支持javascript原生写法

  • 多种语言支持：javascript, typescript, Python, Java, .NET

  • 相比cypress浏览器支持safari，web移动端测试也更友好

  • 微软开发，都是微软旗下的vscode和github友好

  • 项目start趋势看，playwright后浪推前浪

    image-20211224113418740

缺点

  • 文档相比cypress写的比较简单，没有视频，没有sample
  • 不支持chrome extension
  • 测试组件需要和其他插件配合(比如storybook)
  • 没有dashbord

总结

我个人比较喜欢playwright

我先看的cypress的文档，文档很详细，每个篇章还有视频，还有好多的sample文件涵盖了各种情况，最后他们还开源了一个真实项目来教你怎么使用。后看的playwright的文档内容少但是该说的东西都说了，也不会说存在看完文档不会试用的情况。

我觉得cypress的文档那么多主要是这个框架用js包装了好多特定的api，你如果没有正确使用他们的api就会出错，就像有一篇文章说的，cypress一点都不像javascript，你遵循他们的使用原则，比如：

  • cy.get()获取元素的时候要一下选择完，不然就有可能获取不到

recommended that you alias elements as soon as possible instead of further down a chain of commands.

cy.get('#nav header .user').as('user') // good
cy.get('#nav').find('header').find('.user').as('user') // bad

  • 每行的测试代码都是异步执行的，运行到这里的时候他们并不会立即执行而且被放到一个队列里，所以你在他们中间声明 let const 变量，是获取不到你想要的结果的，只能使用他们的then(function ()){}，回调里使用

  • 如果调用链写的很长记得要在中间加上

所以使用前需要看他的Guide部分，看的时候我感觉应该差不多章该完了吧，然后一看右边进度才看到一半，好多次都是这样。而看playwright文档的时候，滑着滑着就没了，每部分都很简短。所以学习成本我反而觉得cypress更高些…（也可能带着工作任务看比较着急

之前说的cypress会retry，这点其实playwright获取元素的时候也会retry，这个timeout时间cypress是4s，playwright是5s，为啥这样呢？因为目前大部分前端项目都是动态生成，获取他的时候很可能还有被创建出来，除非项目渲染好后直接从后端全部吐出来，这时候你可以给他们配置timeout时间为0。

然后虽然都是打开浏览器测试，但是cypress是你写的代码都在浏览器里执行的，而playwright是在os层面，所以playwright也支持其他的编程语言(java, python, .NET)，可以开多个tab页，多个浏览器甚至多台机器。

再然后之前群里有分享一篇耗子叔的文章《我做系统架构的一些原则》，

尽可能的使用更为成熟更为工业化的技术栈，而不是自己熟悉的技术栈。所谓工业化的技术栈，你可以看看大多数公司使用的技术栈，比如：互联网，金融，电信……等等 ，大公司会有更多的技术投入，也需要更大规模的生产，所以，他们使用的技术通常来说都是比较工业化的。在技术选型上，千万不要被——“你看某个公司也在用这个技术”，或是一些在论坛上看到的一些程序员吐槽技术的观点（没有任何的数据，只有自己的喜好）来决定自己的技术，还是看看主流大多数公司实际在用的技术栈，会更靠谱一些

Playwright:

image-20211224122156297

Cypress:

image-20211224122313820

看完还是会选择playwright，后面才知道他是微软旗下的，而vscode和github也都是微软旗下的，所以感觉playwright的未来生态也应该没有问题。

看到后面我的观点倾向了playwright，因为我是微软xbox粉。。

参考链接:

  1. https://docs.cypress.io/guides/core-concepts/introduction-to-cypress#When-Elements-Are-Missing
  2. https://www.cnblogs.com/fnng/p/14230840.html

个人评分

对比内容 Cypress Playwright
文档 5 2
是否符合js原生规则 2 4
人气/趋势 5 5
未来性 3 5
速度/性能 2 5
跨浏览器 2 4
大公司使用情况 4 5
编程语言支持 1 4
总分 24 34

文档

  • Cypress: sample用例非常丰富，全到不会编程的看了都可以测试，也不需要了解javascript

  • Playwright: 文档很简洁，没有视频

是否符合js原生规则

async/await syntax for clean, readable code

  • Cypress：自己独成一派，需要遵循Cypres指导规范

    • 不可以使用async, await, 箭头函数，只能在.then(function(){})回调里面写let, const

  • Playwright：开箱支持typescript, javascript，没有上述限制

人气/趋势

  • Cypress： 目前35.2k
  • Playwright： 目前31.6k，差了一些，但是P比C晚发布2年

未来性

  • Playwright: Copyright © 2021 Microsoft 大公司品牌值得信懒，开发团队只是

速度/性能

跨浏览器

  • Cypress不支持safari（相当于无法做兼容性测试）
  • Playwright支持，且web mobile支持友好

编程语言支持

  • Cypress：javascript
  • Playwright： javascript, java, python, .NET

**本文禁止转载**

3 thoughts on “e2e框架对比：Cypress和Playwright”

发表评论

您的电子邮箱地址不会被公开。