playwright：强大的端到端测试框架之实战总结

lsekfe

摘要：鉴于查看过2021年前的技术总结，并且因为之前研究过cypress相关前端自动化测试方面的一些技术，因此一看自己研究的cypress竟然不是国内外中最受欢迎的前端自动化技术，霎时间就提起了兴趣去研究了一下playwright。

当然这篇文件文章并不想过多的对于playwright进行简介，而是我使用playwright进行开发自动化测试或者爬虫的一些思考以及实践。
　　具体的简介：可以查看官网playwright.bootcss.com/
　　那么我们现在就开始详细说明一下实战中的一些感受。
　　对比
　　鉴于写过相关cypress，这里就以cypress与playwright进行一系列的对比。
　　相同
　　·节点获取上，不能说完全相同，只能说一模一样。分别都是通过节点元素的selector或者XPath。
　　· 事件上，基本上事件都是支持的，如click，press等等。
　　· 同样具备监听接口的能力。
　　· 测试报告的生成。
　　· 快照功能。
　　· 等等……
　　基本上自动化测试工具的功能都是大同小异，大体功能上都是类似的。
　　不同
　　首先最大的不同当然是codegen（代码生成器），playwright与众不同的最大特点，这个下面再进行介绍。
　　接口监听方面，playwright是产生监听一次性监听所有接口，而cypress是监听某次的某个接口。因此在playwright中处理起数据时，要做特殊的处理，当然好处就是不用写过多的监听。
　　codegen代码生成器
　　通过npx playwright codegen打开代码生成器，代码生成器就大大的提高了我们前端做自动化测试的效率，因为能够点点就能生成。


在里面，你所做的任何页面上的操作都会生成对应的代码在图中右侧栏中，并且右侧栏也是支持多种语言进行查看的，因为本身playwright就支持多种语言。
　　注意：这里有个小小的坑就是无操作的话，页面是不会进行记录操作的，如我们一般导航栏中都会有一些hover显示的操作，但是页面是不会记录的，因为他并不会记录鼠标的移动，只会记录一些人为的操作，如点击，键盘敲击的事件等等。
　　实践注意
　　就如同上方所说codegen只会记录一些人为的操作，如点击，键盘敲击的事件等等，因此我们需要再代码中额外的补充会事件。
　　代码的异步性，由于代码是异步的，有时候我们需要通过waitForTimeout进行等待操作。
　　接口的监听，我们需要在同一地方进行数据的处理。
　　众所周知，我们的浏览器基本上都是已经支持多进程的，如果要进行数据量大的爬虫，可以考虑开启多个page来进行获取数据，不要像我一开始傻傻的用一个进程获取数据，效率极低下（手动狗头）。
　　总结
　　以上就是我写了一下playwright的心得，首先这个codegen就足够吸引人，毕竟很少人会花大量的时间去写自动化测试，就算我想，很多时候公司也是不给的，我就是因为这个原因自动化测试方面结束嘚草草的。以后用到一些更加高深的api的话，也会不停的补充再这篇文章中，谢谢大家观看，古德拜~

yishen8899