软件测试|web自动化测试神器playwright教程（八）

前言

selenium中提供了一个selenium IDE的工具用于脚本录制，我们通过插件市场安装之后，便可以将我们对浏览器页面的操作录制成脚本，并输出成java或Python等语言的脚本，我们可以通过生成的脚本再次回放我们的操作。

作为一个比selenium更加强大的web自动化测试工具，当然也拥有录制的功能了，本篇文章我们就来介绍playwright的脚本录制功能。

录制脚本

Playwright 具有开箱即用的生成测试的能力，是快速开始测试的好方法。它将打开两个窗口，一个是浏览器窗口，您可以在其中与要测试的网站进行交互，另一个是 Playwright Inspector 窗口，您可以在其中记录测试、复制测试、清除测试以及更改测试语言。

启动命令如下：

playwright codegen http://网站地址

启动后，电脑上出现2个窗口，左边是浏览器打开网站可以操作，右边是inspector 可以生成对应的脚本，如下图：

我们以登录百度为例录制我们的脚本，我们使用输入账号以及密码的方式登录百度，如下：

我们输入完用户名密码之后，点击登录按钮，即可登录。

注：此处并没有使用真实账号，所以登录是失败的。

生成的代码如下：

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.get_by_role("link", name="登录").click()
    page.get_by_placeholder("手机号/用户名/邮箱").click()
    page.get_by_placeholder("手机号/用户名/邮箱").fill("muller")
    page.get_by_placeholder("密码").click()
    page.get_by_placeholder("密码").fill("12345678")
    page.get_by_role("button", name="登录").click()

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


with sync_playwright() as playwright:
    run(playwright)

还可以选择生成异步代码

当然，作为Python爱好者，我还是喜欢直接生成Pytest测试用例代码，很好，playwright能满足我的要求

from playwright.sync_api import Page, expect


def test_example(page: Page) -> None:
    page.goto("https://www.baidu.com/")
    page.get_by_role("link", name="登录").click()
    page.get_by_placeholder("手机号/用户名/邮箱").click()
    page.get_by_placeholder("手机号/用户名/邮箱").fill("muller")
    page.get_by_placeholder("密码").click()
    page.get_by_placeholder("密码").fill("12345678")
    page.get_by_role("button", name="登录").click()

录制相关命令

1. codegen在浏览器中运行并执行操作

playwright codegen playwright.dev

2. 指定窗口大小

--viewport-size选项生成不同大小的窗口

playwright codegen --viewport-size=800,600 playwright.dev

3. 指定设备型号

--device 使用设置视口大小和用户代理等选项模拟移动设备时记录脚本

playwright codegen --device="iPhone 12 Pro" https://www.baidu.com

注：device的值必须用双引号，并且区分大小写，且目前框架对安卓设备的覆盖率不高

4. 模拟配色

playwright codegen --color-scheme=dark https://www.baidu.com

5. 模拟地理位置、语言和时区

playwright codegen --timezone="Asia/Shanghai" --geolocation="30.890221,120.492348" --lang="zh-CN" maps.google.com

打开的页面如下：

6. 保留经过身份验证的状态

运行codegen以在会话结束时--save-storage保存cookie和localStorage ，执行身份验证并关闭浏览器后，auth.json将包含存储状态。

playwright codegen --save-storage=auth.json

运行--load-storage以消耗先前加载的存储。这样，所有的cookie和localStorage都将被恢复，使大多数网络应用程序进入身份验证状态。

playwright open --load-storage=auth.json my.web.app
playwright codegen --load-storage=auth.json my.web.app
# Perform actions in authenticated state.

总结

本文主要介绍了playwright录制脚本功能的使用，相比于selenium，playwright录制的脚本更具有可用性，并且playwright录制的功能可以直接支持其他不同尺寸的设备录制脚本，这比selenium完善了很多。