playwright 录制脚本

我喜欢 Playwright！ 这是微软开源的一款非常强大的自动化工具，再过几年，他很有可能取代 Selenium 在浏览器自动化的通知地位。使用过一段时间，我没有找到很好的中文资料可以参考，导致很多问题无法得到及时解决，因此我决定自己记录一下使用的笔记，算是给社区回馈。

在编写 web 自动化测试用例时，代码编写的速度是否快，会影响框架的使用体验。现在很多的框架都会提供一些辅助功能，帮助我们更快的去编写自动化测试代码，而录制功能是几乎所有的 web 自动化工具都会带的功能。在实际操作过程中，有 2 个问题影响代码编写速度。第一个问题，每次操作前都需要先定位元素，需要编写元素定位选择器，这需要我们频繁查看网页的源代码，如果元素选择器编写不够规范，会引发测试用例失败。第二个问题，每一步操作都要调用对应的 api 函数，如果这些函数使用不规范，也会影响编程的速度和用例通过。

录制功能帮助我们解决这些问题。使用录制功能时，自动打开浏览器，接下来我们可以手工在浏览器页面上进行操作，每个操作步骤都会被录制器记录一下，以代码的方式生成在录制界面。 当浏览器操作完成后，可以在界面上暂停录制，也可以复制已经生成的代码，保存到代码文件中。

在编写正式的测试用例代码前，先通过录制功能把测试用例步骤录制下来，自动生成元素的定位方式，自动调用浏览器操作，会节省很多编写元素选择器的时间，有部分 API 函数记不清楚用法的，录制功能也会帮你自动生成。

通过命令行的 codegen 参数可以启动录制界面。

    playwright codegen https://v4.ketangpai.com/User/login.html

弹出浏览器和代码生成界面，在界面的菜单栏可以停止录制，复制代码。代码可以选择 Python, Java 或者 JavaScript 等主流语言。手工创建一个代码文件保存复制的代码。<img src="https://yuztuchuang.oss-cn-beijing.aliyuncs.com/img/image-20211011153000068.png" alt="image-20211011153000068" style="zoom:50%;" />录制好的代码会存在一些不必要的操作，可以直接删除这些不必要的代码，还会有元素定位的方式不时很合理，需要进一步修正。

虽然录制会存在一些小问题，但是他能快速生成样板代码，提高我们编写自动化测试代码的效率。之后的操作我们都可以沿用这种模式，先通过录制生成样板代码，再进行小幅度修改后使用。

playwright inspector 除了可以进行录制，还可以辅助元素定位。 当暂停录制后，在页面下方会出现辅助定位的控件，当输入元素定位表达式后，对应的页面元素将会高亮显示。

目前还不支持生成 pytest 插件的代码，所以主要还是复制元素定位方式和函数的用法，不能完全照搬。