Skip to content

自动化用例录制 - Playwright


简介

使用 Playwright 录制操作是一个方便的方法,可以快速生成自动化脚本。Playwright 提供了一个命令行工具 codegen,可以记录用户在浏览器中的操作并生成相应的代码。


使用场景

  • 自动化测试:使用录制功能快速记录用户操作,并且根据操作生成测试用例
  • 用户界面UI回归测试:随着版本更迭,UI界面也会变化,使用录制功能创建回归测试,确保对UI的修改没有产生新的错误
  • 快速原型开发:快速生成原型脚本
  • 培训和教育:为playwright框架新手提供指导,帮助他们将浏览器操作转为代码
  • 性能测试:录制的操作可以模拟用户行为,可用于负载测试
  • 手动测试自动化:针对没有基础的人也能通过录制功能将操作转为代码,然后自动化运行
  • 生成爬虫脚本:录制功能可以录制大量交互,迅速构建自动化爬虫逻辑,抓取网页数据,生成初步爬虫脚本
  • 多浏览器支持:在不同浏览器上使用录制功能可以快速生成针对不同浏览器的测试脚本

录制步骤

  • playwright inspector 进行页面录制
  • 命令行启动:playwright codegen https://www.baidu.com/

image-20250206170250401


  • 启动chromium浏览器页面,然后鼠标触碰的地方会被标记为红色,并显示其元素属性。

image-20250206102002230

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


  • 操作过程中会通过 playwright inspector 记录,如下图:
  • 录制过程直接生成 py脚本

image-20250206102027025


生成的脚本文件

import re
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/")
    #这里是新建页面,还是通过上次的上下文,由此可得,一个上下文可以新建多个页面
    page1 = context.new_page()
    #指定某个页面上的操作: locator()定位关键字,里面可以用css字符串,也可以用xpath定位
    page.locator("#kw").click()
    page.locator("#kw").fill("du'duan")
    page1.goto("chrome-error://chromewebdata/")
    #fill 等同于sendkeys 输入
    page.locator("#kw").fill("独断")
    # 基本定位法:get_by_text()
    page.get_by_text("独断万古", exact=True).click()
    with page.expect_popup() as page2_info:
        page.get_by_role("link", name="独断万古是什么意思 - 百度经验").click()
    page2 = page2_info.value
    page2.get_by_role("heading", name="独断万古是什么意思").click()

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

总结

  • 使用场景
  • 录制步骤