Playwright 1.53.2使用toBeVisible断言时触发'expected string, got object'错误求助

大家好，我最近在使用Playwright 1.53.2测试React应用时遇到了一个摸不着头脑的问题，想请教下社区的朋友们。

我写了这样一条断言来验证元素可见性：

await expect(page.getByText("PART=PARIS")).toBeVisible()

从录制的WebM视频里能清楚看到带有PART=PARIS文本的元素已经正常显示出来了，但运行测试时却触发了错误，提示expected string, got object。

错误信息详情 #

locator._expect: expression: expected string, got object
    at C:\projects\cft_code\ui\cft-ui-acceptance\node_modules\@playwright\test\lib\matchers\matchers.js:126:26
    at Object.toBeTruthy (node_modules\@playwright\test\lib\matchers\toBeTruthy.js:35:13)
    at Object.toBeVisible (node_modules\@playwright\test\lib\matchers\matchers.js:124:33)
    at C:\projects\cft_code\ui\cft-ui-acceptance\node_modules\@playwright\test\lib\expectBundleImpl.js:335:855
    at Object.i (node_modules\@playwright\test\lib\expectBundleImpl.js:335:870)
    at Proxy.<anonymous> (node_modules\@playwright\test\lib\expect.js:165:37)
    at Context.<anonymous> (tests\src\transfers.js:591:52)

错误指向的是断言里toBeVisible方法的第一个字符位置。

元素可见时的HTML结构 #

当视频中元素显示时，页面生成的对应HTML片段如下：

<div class="filter-criteria-button-list">
  <div class="filter-criteria-button">
    <span>
      <span class="filter-criteria-button-label">PART=PARIS</span>
    </span>
    <button class="filter-criteria-button-close" id="part">
      <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" class="svg-inline--fa fa-xmark " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path></svg>
    </button>
  </div>
  <button id="clearAllFilterBtn" class="flat-transparent-button">
    <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" class="svg-inline--fa fa-xmark " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"></path>
    </svg>
    Clear All Filters
  </button>
</div>

测试代码片段 #

我的测试用例及相关初始化代码如下：

describe('CFTUI Automation Test - TRANSFERS PAGE', () => {
  let page;

  before(async function () {
    page = await startBrowser();
  });

  after(async function () {
    await stopBrowser(this.currentTest);
  });

  it("Advanced Filters usage ", async function () {
    await page.locator('button#advancedFiltersBtn').click();
    await page.locator('input#moreFilterPart').fill("PARIS");
    await page.locator('button#advancedFilterApply').click();
    await page.waitForTimeout(2000); // 等待过滤器生效
    await expect(page.getByText("PART=PARIS")).toBeVisible()
    await checkTransfersWithState(page, 1, "COMPLETED"); // 检查是否找到1条COMPLETED状态的转账
    await checkTransfersWithState(page, 0, "CANCELED")
  });
});

其中页面初始化的startBrowser函数实现：

const startBrowser = async () => {
  browser = await chromium.launch(launchOption.chromium);
  let contextOptions = {};
  if (debug) {
    contextOptions = { recordVideo: { dir: "videos/" } };
  }
  context = await browser.newContext(contextOptions);
  let page = await context.newPage();
  await page.setDefaultTimeout(timeout);
  await page.setViewportSize({ width: 1920, height: 1080 });
  if (debug) {
    videoPath = await page.video().path();
  }
  return page;
};

补充说明 #

我们用完全相同的模式写了几十个测试，包括这个测试在内，之前几年一直运行正常，最近才突然出现这个问题。我实在搞不懂为什么明明元素已经可见，断言却报出这种类型不匹配的错误，希望有朋友能帮我分析下可能的原因，或者给我一些排查方向？

内容来源于stack exchange