智能化实现 Playwright 脚本自动生成的解决方案

标签：脚本 Playwright 解决方案智能化选择器生成操作步骤 page

在测试自动化开发中，自动生成 Playwright 脚本 是一个极具吸引力的功能，但目前大多数实现仍然依赖于手动定位页面元素并编写脚本。为了实现更智能化的脚本生成，我们需要结合以下技术和工具，从解析测试用例到自动定位页面元素，再到生成脚本，尽可能减少人工干预。

本篇文章将带你探索如何通过 智能化手段 实现 Playwright 脚本自动生成，包括：

通过自然语言解析测试用例，生成大致的操作步骤。
结合 Playwright 的录制工具，自动生成基础脚本。
通过 AI 或预定义规则，自动定位页面元素。
将生成的操作步骤与元素定位结合，完成 Playwright 脚本的智能化生成。

1. 实现目标

我们希望实现以下功能：

输入测试用例（自然语言格式）：如操作步骤和预期结果。
智能解析操作步骤，生成对应的 Playwright 操作指令：如点击、输入、验证等。
自动定位页面元素：通过录制工具或 AI 模型，自动生成高质量的选择器。
生成完整的 Playwright 测试脚本：包括元素操作、断言以及结果验证。

2. 技术实现方案

为了实现智能化的脚本生成，我们可以分以下几个步骤来推进：

2.1 测试用例解析：从自然语言到操作指令

输入测试用例的格式

我们可以设计以下结构化的测试用例输入：

{
    "用例编号": "TC001",
    "用例标题": "登录页面功能验证",
    "操作步骤": [
        "打开登录页面 https://example.com",
        "在用户名输入框中输入 admin",
        "在密码输入框中输入 123456",
        "点击登录按钮",
        "验证显示主页标题 '欢迎'"
    ],
    "预期结果": "登录成功，显示主页标题"
}

解析操作步骤

利用规则匹配或自然语言处理（NLP）技术，将操作步骤解析为 Playwright 指令：

import re

def parse_steps_to_instructions(steps):
    instructions = []
    for step in steps:
        if "打开" in step and "页面" in step:
            url = re.search(r"https?://[^\s]+", step).group(0)
            instructions.append(f"page.goto('{url}')")
        elif "输入框" in step and "输入" in step:
            element = re.search(r"在(.*?)输入框", step).group(1)
            value = re.search(r"输入 (.+)", step).group(1)
            instructions.append(f"page.fill('input[placeholder=\"{element}\"]', '{value}')")
        elif "点击" in step:
            button = re.search(r"点击(.*?)按钮", step).group(1)
            instructions.append(f"page.click('button:has-text(\"{button}\")')")
        elif "验证" in step:
            text = re.search(r"验证显示(.*?)'", step).group(1)
            instructions.append(f"assert page.locator('text={text}').is_visible()")
    return instructions

# 示例调用
steps = [
    "打开登录页面 https://example.com",
    "在用户名输入框中输入 admin",
    "在密码输入框中输入 123456",
    "点击登录按钮",
    "验证显示主页标题 '欢迎'"
]
instructions = parse_steps_to_instructions(steps)
print("\n".join(instructions))

输出结果：

page.goto('https://example.com')
page.fill('input[placeholder="用户名"]', 'admin')
page.fill('input[placeholder="密码"]', '123456')
page.click('button:has-text("登录")')
assert page.locator('text=欢迎').is_visible()

2.2 自动生成基础脚本：结合 Playwright 的录制工具

Playwright 提供了录制工具 playwright codegen，可以自动记录用户操作并生成基础脚本。我们可以将录制生成的脚本与解析后的操作步骤结合，提升生成脚本的准确性。

运行 Playwright 录制工具

在命令行中运行以下命令，启动录制工具：

playwright codegen https://example.com

录制工具会自动打开浏览器，记录你的操作并生成对应的代码。

整合录制与操作解析

录制工具生成的代码可以作为基础脚本，与解析的操作步骤结合，进一步优化选择器或添加断言。

2.3 自动定位页面元素：智能生成选择器

页面元素的选择器是自动化脚本的核心，选择器质量的高低直接影响脚本的稳定性。我们可以通过以下方式实现选择器的智能生成：

方案 1：Playwright 的内置选择器推荐

Playwright 会根据页面结构自动推荐最佳选择器，你可以通过录制工具或调试模式获取：

playwright codegen --target python

方案 2：结合 AI 自动生成选择器

利用 AI 模型（如 ChatGPT 或自定义模型），结合页面 DOM 结构和元素描述，生成语义化选择器。

示例：

输入："用户名输入框"
输出：input[placeholder="用户名"]

示例代码：

def generate_selector(description):
    # 假设我们有一个简单的规则匹配
    if "用户名" in description:
        return 'input[placeholder="用户名"]'
    elif "密码" in description:
        return 'input[placeholder="密码"]'
    elif "登录按钮" in description:
        return 'button:has-text("登录")'
    return ""

2.4 生成完整的 Playwright 脚本

结合解析的指令和自动生成的选择器，我们可以生成完整的 Playwright 脚本：

def generate_playwright_script_from_steps(test_case):
    script = [
        "from playwright.sync_api import sync_playwright\n\n",
        "def test_case():\n",
        "    with sync_playwright() as p:\n",
        "        browser = p.chromium.launch(headless=False)\n",
        "        page = browser.new_page()\n"
    ]
    instructions = parse_steps_to_instructions(test_case["操作步骤"])
    for instr in instructions:
        script.append(f"        {instr}\n")
    script.append("        browser.close()\n")
    return "".join(script)

# 示例调用
test_case = {
    "用例编号": "TC001",
    "用例标题": "登录页面功能验证",
    "操作步骤": [
        "打开登录页面 https://example.com",
        "在用户名输入框中输入 admin",
        "在密码输入框中输入 123456",
        "点击登录按钮",
        "验证显示主页标题 '欢迎'"
    ],
    "预期结果": "登录成功，显示主页标题"
}
script = generate_playwright_script_from_steps(test_case)
print(script)

输出的 Playwright 脚本：

from playwright.sync_api import sync_playwright

def test_case():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto('https://example.com')
        page.fill('input[placeholder="用户名"]', 'admin')
        page.fill('input[placeholder="密码"]', '123456')
        page.click('button:has-text("登录")')
        assert page.locator('text=欢迎').is_visible()
        browser.close()

3. 优化点与扩展

3.1 提升选择器的准确性

结合页面 DOM 结构动态生成选择器，避免使用容易变化的属性（如 id 和纯文本）。
支持自定义规则或通过 AI 模型生成语义化选择器。

3.2 支持更多操作类型

解析更多复杂的操作步骤（如拖拽、上传文件、处理弹窗等）。
支持条件分支和循环操作。

3.3 集成测试数据

结合数据驱动测试，将测试数据与操作步骤分离，支持参数化测试。

4. 小结

通过自然语言解析、Playwright 录制工具、智能选择器生成等技术，我们可以大幅减少自动化脚本开发中的手动工作量，实现 Playwright 脚本的智能化生成。

亮点

自动解析测试用例：从自然语言生成自动化操作指令。
结合录制工具：快速生成基础脚本，减少重复劳动。
智能选择器生成：提升脚本的稳定性和可维护性。

下一篇预告：我们将在下一篇文章中探索 接口测试的自动化与 Mock 数据解决方案，帮助你轻松完成接口的高效验证与环境隔离。敬请期待！

标签：脚本,Playwright,解决方案,智能化,选择器,生成,操作步骤,page
From： https://blog.csdn.net/weixin_44872675/article/details/145300469