我要投稿

Playwright + DeepSeek实战：如何让AI“看懂”网站页面内容？自动定位页面元素？

发布日期：2025-04-02 17:12:26 浏览次数： 2990

作者：Playwright实战教程

微信搜一搜，关注“Playwright实战教程”

“如何让DeepSeek理解网站页面内容？”这个问题来自一位公众号读者的留言，背后反映了AI在自动化测试中的一大痛点。为了给出实用解答，我将以saucedemo.com为例，结合Python语言，分享多种实现方案。如果你对AI驱动的测试感兴趣，请继续阅读——希望这篇文章能为你带来启发！觉得有用的话，别忘了点赞、关注和收藏哦！

一、引言

一位读者在公众号留言中问道：

“怎么让DeepSeek理解网站页面呢，总不能输入一个网址，他就能理解里面的内容吧，而且各个模块要点开才能加载出页面。还是说之前有这一块内容的介绍呢？”

这个问题直击核心：DeepSeek这样的AI模型如何“看懂”动态网站的内容？网站不像静态文本，输入一个URL并不能让AI直接获取页面信息，尤其是那些需要交互（如点击按钮）才能加载的模块。很多测试工程师可能也有类似困惑：AI能否从URL跃升到理解页面逻辑，甚至生成自动化脚本？

在之前的文章

Playwright + DeepSeek实战：手把手教你用ai实现xmind用例生成到自动化测试（以电商为例）

我曾通过人工描述网站功能，让DeepSeek生成测试用例和Playwright脚本。这次，我们将更进一步，围绕读者的提问，探索DeepSeek理解网站内容的可行方法，并以saucedemo.com为实战案例，提供Python实现的详细解析。

二、问题拆解：`DeepSeek`的“理解”边界在哪里？

让我们先拆解问题，明确挑战所在：

2.1 动态页面挑战

saucedemo.com是一个电商网站，包含登录、商品列表、购物车和结算等功能。部分内容（例如商品详情或购物车列表）需要用户点击后才会加载。单纯给DeepSeek一个URL，它无法直接访问或解析这些动态内容。

2.2 `AI`的能力限制

当前的DeepSeek等大语言模型主要依赖文本输入生成输出，没有内置浏览器或爬虫功能。它无法像人类一样打开网页、点击按钮、观察页面变化。

2.3 测试工程师的潜在需求

测试工程师可能希望DeepSeek能“自动”理解网站内容并生成测试用例或脚本，而非依赖人工输入。那么，这是否可行？如果不可行，有哪些替代方案？
基于这些分析，让DeepSeek尽可能理解saucedemo.om的页面内容，并生成有用的自动化测试代码，都有哪些可能的方法，将是本文探讨的目标。

三、解决方案：从URL到页面内容的桥梁

既然DeepSeek无法直接访问网站，我们需要为它提供“眼睛”和“语言”。以下是三种解决方案，涵盖从实用到创新的思路：

3.1 方法一：人工描述页面功能（实用方案）

这是目前最直接、高效的方法。通过人工提供网站的结构和功能描述，DeepSeek可以基于文本生成测试用例和脚本。

实战示例：分析`saucedemo.com`

假设我们要测试saucedemo.com的购物车功能，可以这样描述：

• 提示词示范

网站URL：https://www.saucedemo.com
功能描述：
1. 登录页面：输入用户名"standard_user"和密码"secret_sauce"，点击"Login"按钮进入商品页。
2. 商品页面：展示多个商品，每个商品有"Add to cart"按钮，点击后购物车图标显示数量。
3. 购物车页面：点击右上角购物车图标进入，显示已添加的商品，包含"Checkout"按钮。
4. 结算页面：填写姓名、邮编等信息，点击"Continue"提交。
交互逻辑：
- 商品页面点击"Add to cart"后，按钮变为"Remove"，购物车数量+1。
- 结算页面若邮编为空，提示错误"Error: Postal Code is required"。
输出要求：
- 为saucedemo.com的购物车功能编写Python Playwright自动化测试脚本
- 要求使用POM模式
- 覆盖正常添加商品和空邮编异常场景

• DeepSeek生成代码

# pages/login_page.py
from playwright.sync_api import Page

class LoginPage:
    def __init__(self, page: Page):
        self.page = page
        self.username = page.locator("#user-name")
        self.password = page.locator("#password")
        self.login_btn = page.locator("#login-button")

    def login(self, username: str, password: str):
        self.username.fill(username)
        self.password.fill(password)
        self.login_btn.click()

# pages/product_page.py
class ProductPage:
    def __init__(self, page: Page):
        self.page = page
        self.add_to_cart_btn = page.locator("button:has-text('Add to cart')").first
        self.cart_icon = page.locator(".shopping_cart_badge")

    def add_to_cart(self):
        self.add_to_cart_btn.click()

    def get_cart_count(self) -> int:
        return int(self.cart_icon.inner_text()) if self.cart_icon.is_visible() else 0

# pages/checkout_page.py
class CheckoutPage:
    def __init__(self, page: Page):
        self.page = page
        self.postal_code = page.locator("#postal-code")
        self.continue_btn = page.locator("text=Continue")
        self.error_msg = page.locator(".error-message-container")

    def fill_shipping_info(self, postal_code: str = ""):
        self.postal_code.fill(postal_code)
        self.continue_btn.click()

    def get_error_message(self) -> str:
        return self.error_msg.inner_text()

# tests/test_cart.py
import pytest
from playwright.sync_api import expect
from pages.login_page import LoginPage
from pages.product_page import ProductPage
from pages.checkout_page import CheckoutPage

def test_add_to_cart(page):
    login_page = LoginPage(page)
    product_page = ProductPage(page)
    
    page.goto("https://www.saucedemo.com")
    login_page.login("standard_user", "secret_sauce")
    product_page.add_to_cart()
    assert product_page.get_cart_count() == 1

def test_empty_postal_code(page):
    login_page = LoginPage(page)
    checkout_page = CheckoutPage(page)
    
    page.goto("https://www.saucedemo.com")
    login_page.login("standard_user", "secret_sauce")
    page.goto("https://www.saucedemo.com/checkout-step-one.html")
    checkout_page.fill_shipping_info("")
    assert "Postal Code is required" in checkout_page.get_error_message()

点评如下：

• 优点：简单高效，生成代码精准契合需求。
• 局限：需要人工提炼页面信息，网站复杂时描述工作量增加。

3.2 抓取HTML源码输入`DeepSeek`（进阶方案）

实战实例：使用`Playwright`获取`saucedemo.com`商品页面的源码

如果想减少人工描述，可以用工具抓取页面HTML源码，让DeepSeek分析。例如：

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://www.saucedemo.com/inventory.html")
    html_content = page.content()
    print(html_content)
    browser.close()

• 提示词示范
将HTML输入DeepSeek：

请分析以下HTML内容，提取saucedemo.com商品页面的关键元素（如商品列表、添加按钮），并生成Playwright自动化脚本。

• DeepSeek生成代码

# pages/product_page.py
class ProductPage:
    def __init__(self, page: Page):
        self.page = page
        self.add_to_cart_btn = page.locator("[data-test^='add-to-cart-']")
        self.cart_icon = page.locator(".shopping_cart_badge")

    def add_to_cart(self):
        self.add_to_cart_btn.first.click()

• 动态内容的处理
对于需要点击加载的内容，可以模拟交互后再抓取。例如：

page.locator("button:has-text('Add to cart')").first.click()
new_html = page.content()

将new_html输入DeepSeek，让它分析交互后的变化。

点评如下：

• 优点：减少人工描述，能处理部分动态内容。
• 局限：HTML可能冗长，包含无关信息，影响分析效果；动态交互仍需人工设计抓取逻辑。

3.3 录制用户操作流并结合`AI`优化（创新方案）

实战示例：`Playwright`负责录制脚本，`AI`负责代码优化扩展

为了进一步提升效率，我们可以利用Playwright的脚本录制功能，让AI基于录制的脚本进行优化和扩展。

• 思路如下：

1. 录制操作：运行playwright codegen https://www.saucedemo.com，手动执行操作（如登录、添加商品），生成Playwright脚本。
2. 喂给AI：将脚本提供给DeepSeek，提示优化代码结构、改进元素定位或扩展测试用例。
3. AI优化与扩展：DeepSeek生成模块化代码并补充异常场景测试。

• 假设录制登录操作，生成以下脚本

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://www.saucedemo.com/")
    page.fill("#user-name", "standard_user")
    page.fill("#password", "secret_sauce")
    page.click("#login-button")
    browser.close()

• 提示词示范

请优化以下Playwright脚本，使其更模块化，并扩展一个异常测试用例（如登录失败场景）。

• DeepSeek回复

# pages/login_page.py
class LoginPage:
    def __init__(self, page):
        self.page = page
        self.username = page.locator("#user-name")
        self.password = page.locator("#password")
        self.login_btn = page.locator("#login-button")
        self.error_msg = page.locator(".error-message-container")

    def login(self, username, password):
        self.username.fill(username)
        self.password.fill(password)
        self.login_btn.click()

    def get_error_message(self):
        return self.error_msg.inner_text()

# tests/test_login.py
from playwright.sync_api import expect

def test_successful_login(page):
    login_page = LoginPage(page)
    page.goto("https://www.saucedemo.com/")
    login_page.login("standard_user", "secret_sauce")
    expect(page).to_have_url("https://www.saucedemo.com/inventory.html")

def test_failed_login(page):
    login_page = LoginPage(page)
    page.goto("https://www.saucedemo.com/")
    login_page.login("invalid_user", "wrong_password")
    expect(login_page.get_error_message()).to_contain("Username and password do not match")

点评如下：

1. 高效率：playwright codegen录制简单高效，为AI提供具体输入，能显著提升代码质量。
2. 价值点：减少手动编写脚本的工作量，AI优化提升代码可维护性，异常用例扩展增强测试覆盖率。
3. 局限性：录制脚本可能包含冗余操作，复杂场景下AI可能需人工补充上下文。

四、结语
综合来看：

• 方法一（人工描述）：现阶段最实用、高效，通过清晰文本充分发挥DeepSeek的语言能力，确保结果准确。
• 方法二（抓取HTML）：适合希望自动化提取页面信息的场景，但需工具支持，且效果受HTML质量影响。
• 方法三（录制操作流+AI优化）：创新性方案，适合简单操作流，能快速生成高质量代码。

以saucedemo.com为例，推荐流程：

• 简单场景：直接录制操作交给AI优化。
• 复杂场景：录制脚本后，人工补充需求描述，辅助AI生成完善代码。
• 人工描述：对于无法录制的场景，采用人工描述功能。
这种方法虽需一定人工参与，但能平衡效率与准确性。未来，随着AI技术进步，我们或许能直接给DeepSeek一个URL，让它“自己看懂”页面。