使用Puppeteer+pptr-testing-library验证输入框值失败求助

数据老陈

2026-8-19

问题分析与解决方案

核心问题

报错原因：你用findAllByText查找输入内容是错误的——输入框的内容存储在value属性中，并非页面的文本节点，所以该方法无法匹配到；同时代码里的字符串'tutorials"'多了一个多余的双引号，也会导致匹配失败。
空对象问题：打印$document和$searchInput显示为空是正常现象，pptr-testing-library返回的是封装后的元素对象，并非直接的DOM节点，不影响后续操作。

正确的验证方式

要获取输入框的内容并验证，直接读取元素的value属性即可，以下是修改后的代码：

import { PuppeteerScreenRecorder } from "puppeteer-screen-recorder";
import puppeteer, { Browser, Page } from "puppeteer";
import { getDocument, queries } from "pptr-testing-library";
const { findByRole } = queries;
let page, recorder, browser;

beforeAll(async () => {
  browser = await puppeteer.launch({
    headless: true,
  });

  page = await browser.newPage();
  recorder = new PuppeteerScreenRecorder(page);
  await recorder.start(`./screenshots/e2e-test-${Date.now()}.mp4`);
  await page.goto("https://www.google.com");
});

// 建议把资源清理操作放在afterAll中，确保所有测试完成后执行
afterAll(async () => {
  await recorder.stop();
  await browser.close();
});

describe("type in search input", () => {
  it("should check search input value", async () => {
    const $document = await getDocument(page);
    const $searchInput = await findByRole($document, "combobox");
    await $searchInput.type("tutorials");

    // 方式1：直接获取输入框的value属性并断言
    const inputValue = await $searchInput.evaluate(el => el.value);
    expect(inputValue).toBe("tutorials");

    // 方式2：如果已安装@testing-library/jest-dom匹配器，可简化断言
    // await expect($searchInput).toHaveValue("tutorials");
  });
});