这篇文章系统地介绍了上手Playwright的方法，但是录制脚本部分讲解不够详尽，今天我在这里重点的介绍一下Playwright 录制脚本的方法来丰满我的Playwright系列技术文章。

Playwright可以使用codegen来录制脚本，使用方式非常简单，只要大家玩过ui自动化测试的录制相关工具五分钟就可以学会上手！

playwright Inspector进行录制

playwright Inspector进行页面录制非常简单，使用如下命令即可

playwright codegen https://www.baidu.com/

会启动chromium的浏览器页面，我们鼠标触碰的地方会被标记为红色，并显示其元素属性，如下图所示：

 

操作的过程会通过playwright Inspector记录，如下图所示：

 

录制过程直接生成py脚本

使用下面的命令会把我们在浏览器中的操作脚本化并保存到baidu_test.py中，

playwright codegen --target python -o baidu_test.py -b chromium https://www.baidu.com/

录制实例代码分析：

from playwright.sync_api import Playwright, sync_playwright, expect
def run(playwright: Playwright) -> None:
      browser = playwright.chromium.launch(headless=False)
      context = browser.new_context()
      page = context.new_page()
      page.goto("https://www.baidu.com/")
      page.locator("#kw").click()
      page.locator("#kw").fill("test")
      page.get_by_role("button", name="百度一下").click()
      page.close()
      context.close()
      browser.close()
with sync_playwright() as playwright:
     run(playwright)

相信有过自动化测试基础的同学都很容易理解关于page.goto（）、page.locator("#kw").click()，page.locator("#kw").fill("test") 这些api的定义，就是最基础的操作：访问网页，点击元素，和输入数据，

上面的脚步中有两处python 语法需要说明一下

(playwright: Playwright) -> None

该用法叫做函数注释 Function Annotations，大家可以参考文章：

https://blog.csdn.net/liwenxiang629/article/details/112466737

with sync_playwright() as playwright:

with …as用于异常处理，可以使代码更简洁、可读性更强，大家可以参考文章

https://blog.csdn.net/liwenxiang629/article/details/130620609