Skip to main content

Browser Provider

Browser Provider 允许您自动化网页浏览器的交互，用于测试和抓取目的。

此提供者使用 Playwright 控制无头 Chrome 浏览器，使您能够导航网页、与元素交互并提取数据。

先决条件​

Playwright 是 promptfoo 的对等依赖项，因此您需要单独安装它：

npm install playwright @playwright/browser-chromium playwright-extra puppeteer-extra-plugin-stealth

配置​

要使用无头浏览器提供者，请将提供者 id 设置为 browser，并提供一个配置对象，其中包含一系列要执行的步骤。

providers:
  - id: browser
    config:
      steps:
        - action: navigate
          args:
            url: 'https://example.com'
        - action: type
          args:
            selector: '#search-input'
            text: '{{prompt}}'
        - action: click
          args:
            selector: '#search-button'
        - action: extract
          args:
            selector: '#results'
          name: searchResults
      responseParser: 'data.searchResults'

支持的操作​

无头浏览器提供者支持以下操作：

  1. navigate：导航到指定 URL
  2. click：点击元素
  3. type：在输入字段中输入文本
  4. screenshot：截取页面截图
  5. extract：从元素中提取文本内容
  6. wait：等待指定时间
  7. waitForNewChildren：等待元素的新子元素

操作详情​

  • url：要导航到的 URL

click​

  • selector：要点击的元素的 CSS 选择器

extract​

  • selector：要提取文本的元素的 CSS 选择器

screenshot​

  • filename：保存截图的文件名

type​

  • selector：输入元素的 CSS 选择器
  • text：要输入到输入中的文本

可以使用以下占位符发送特殊字符：

  • <enter>
  • <tab>
  • <escape>

wait​

  • ms：等待的毫秒数

waitForNewChildren​

  • parentSelector：等待新子元素的父元素的 CSS 选择器
  • delay：检查新子元素前的等待毫秒数
  • timeout：等待新子元素的最大毫秒数

响应解析​

使用 responseParser 配置选项从结果中提取特定数据。解析器接收一个包含两个属性的对象：

  • extracted：包含从 extract 操作中命名的结果的对象
  • finalHtml：所有操作完成后页面的最终 HTML 内容

变量和模板​

您可以在配置中使用 Nunjucks 模板，包括 {{prompt}} 变量和测试上下文中传递的任何其他变量。

providers:
  - id: browser
    config:
      steps:
        - action: navigate
          args:
            url: 'https://example.com/search?q={{prompt}}'
        - action: extract
          args:
            selector: '#first-result'
          name: topResult
      responseParser: 'extracted.topResult'

tests:
  - vars:
      prompt: 'What is the capital of France?'

作为库使用​

如果您将 promptfoo 用作 node 库，您可以提供等效的提供者配置：

{
  // ...
  providers: [{
    id: 'browser',
    config: {
      steps: [
        { action: 'navigate', args: { url: 'https://example.com' } },
        { action: 'type', args: { selector: '#search', text: '{{prompt}}' } },
        { action: 'click', args: { selector: '#submit' } },
        { action: 'extract', args: { selector: '#results' }, name: 'searchResults' }
      ],
      responseParser: (extracted, finalHtml) => extracted.searchResults,
    }
  }],
}

参考​

支持的配置选项：

选项类型描述
headlessboolean是否在无头模式下运行浏览器。默认为 true。
cookiesstring | { name: string; value: string; domain?: string; path?: string; }[]要在浏览器上设置的字符串或cookie数组
responseParserstring | Function用于解析响应的函数或函数字符串表示。接收一个包含extracted和finalHtml参数的对象，并应返回一个ProviderResponse
stepsBrowserAction[]要在浏览器中执行的操作数组
timeoutMsnumber等待浏览器操作完成的最大时间（以毫秒为单位）

注意：配置中的所有字符串值都支持Nunjucks模板。这意味着您可以使用{{prompt}}变量或测试上下文中传递的任何其他变量。

支持的浏览器操作​

配置中的steps数组可以包含以下操作：

操作描述必需参数可选参数
navigate导航到指定URLurl: string
click点击一个元素selector: string
extract从元素中提取文本内容selector: string, name: string
screenshot截取页面截图path: stringfullPage: boolean
type在输入字段中输入文本selector: string, text: string
wait等待指定的时间ms: number
waitForNewChildren等待在父元素下出现新的子元素parentSelector: stringdelay: number, timeout: number

steps数组中的每个操作应具有以下结构：

{
  action: string;
  args: {
    [key: string]: any;
  };
  name?: string;
}

steps数组中的每个步骤应具有以下结构：

  • action: 指定要执行的操作类型（例如，'navigate', 'click', 'type'）。
  • args: 包含操作所需的和可选的参数。
  • name（可选）：用于在'extract'操作中命名提取的内容。

步骤按顺序执行，实现复杂的网页交互。

args中的所有字符串值都支持Nunjucks模板，允许使用{{prompt}}等变量。

测试Streamlit应用程序​

Streamlit应用程序遵循一个常见模式，其中使用data-testid属性来标识元素。

以下是一个示例配置：

providers:
  - id: browser
    config:
      headless: true # 设置为false以查看浏览器
      steps:
        # 加载页面 - 确保如果它在iframe中，获取完整的URL！
        - action: navigate
          args:
            url: 'https://doc-chat-llm.streamlit.app/~/+/'
        # 输入消息并按下回车
        - action: type
          args:
            selector: 'textarea'
            text: '{{prompt}} <enter>'
        # 等待响应
        - action: wait
          args:
            ms: 5000
        # 读取响应
        - action: extract
          args:
            selector: 'div.stChatMessage:last-of-type'
          name: response
      responseParser: 'extracted.response'

故障排除​

Iframes​

如果您使用选择器与页面交互并且它一直超时，可能是因为元素在iframe中。

如果是这种情况，请尝试使用navigate操作直接加载iframe内容。

查看浏览器​

如果您想在运行时查看浏览器，可以在配置中将headless选项设置为false。

providers:
  - id: browser
    config:
      headless: false

调试​

如果您在运行测试时遇到问题，请将headless设置为false，浏览器将打开。然后您可以在浏览器控制台中查看发生了什么。 此外，设置环境变量 LOG_LEVEL=debug 将在评估过程中将调试信息打印到控制台。