支持私有云部署
AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


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

发布日期:2025-04-02 17:12:26 浏览次数: 1585 作者:Playwright实战教程
推荐语

深入解析AI如何“看懂”动态网站页面内容,实现自动化测试的关键步骤。

核心内容:
1. AI在自动化测试中理解动态网站内容的难点
2. DeepSeek的“理解”边界与AI能力限制
3. 从URL到页面内容的桥梁:三种解决方案

杨芳贤
53A创始人/腾讯云(TVP)最具价值专家


“如何让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. 1. 录制操作:运行playwright codegen https://www.saucedemo.com,手动执行操作(如登录、添加商品),生成Playwright脚本。
  2. 2. 喂给AI:将脚本提供给DeepSeek,提示优化代码结构、改进元素定位或扩展测试用例。
  3. 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. 1. 高效率:playwright codegen录制简单高效,为AI提供具体输入,能显著提升代码质量。
  2. 2. 价值点:减少手动编写脚本的工作量,AI优化提升代码可维护性,异常用例扩展增强测试覆盖率。
  3. 3. 局限性:录制脚本可能包含冗余操作,复杂场景下AI可能需人工补充上下文。

四、结语
综合来看:

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

saucedemo.com为例,推荐流程:

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

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询