Node Playwright：勾选复选框后需隐藏内容仍显示的问题排查

以下是导致复选框勾选后内容未隐藏的常见原因及对应解决方案：

• 复选框仅修改属性，未触发页面更新的JS事件
  部分网站的复选框依赖click或change事件触发内容过滤逻辑，直接调用.check()仅修改DOM的checked属性，未触发这些关键事件。可以尝试用点击替代，或手动派发事件：

  // 用点击操作代替直接勾选
  await page.locator('[name="TRAFFIC"]').click();
  // 或者勾选后手动触发change事件
  await page.locator('[name="TRAFFIC"]').check();
  await page.locator('[name="TRAFFIC"]').dispatchEvent('change');
  

• 未等待页面异步更新完成就获取内容
  勾选复选框后，页面可能需要发起API请求、重新渲染DOM，这是异步过程。如果立刻调用page.content()或获取元素，此时内容还未完成更新。可以等待目标内容的状态变化，比如等待要隐藏的元素消失：

  await page.locator('[name="TRAFFIC"]').check();
  // 等待需要隐藏的元素变为不可见
  await page.locator('.element-to-hide').waitFor({ state: 'hidden' });
  // 再获取页面内容
  const html = await page.content();
  

• 选择器未匹配到正确的复选框
  页面中可能存在多个name="TRAFFIC"的复选框，或选择器范围太广导致勾选了错误元素。可以先验证复选框是否真的被勾选：

  const isChecked = await page.locator('[name="TRAFFIC"]').isChecked();
  console.log(isChecked); // 若输出false，说明选择器存在问题
  

  此时需要优化选择器，比如结合父元素定位缩小范围：

  await page.locator('.filter-container [name="TRAFFIC"]').check();
  

• 内容未从DOM移除，仅通过CSS隐藏
  有些网站用display: none或visibility: hidden隐藏内容，但元素仍存在于DOM中，所以page.content()会包含这些内容。这种情况下应判断元素可见性，而非直接读取HTML：

  const targetSection = page.getByRole('section', { name: 'contentThatIwant' });
  // 检查元素是否可见
  const isVisible = await targetSection.isVisible();
  // 仅获取可见内容
  const visibleContent = await targetSection.filter({ visible: true }).allTextContents();
  

内容的提问来源于stack exchange，提问作者learncode