Playwright如何禁用网页缓存以获取滚动后新加载的元素？

问题根因 #

该现象和缓存关联度极低，绝大多数情况是两个原因导致：

1. 滚动操作执行后，没有等待懒加载请求返回、新元素渲染到DOM树，就立刻调用了page.$$查询元素
2. 部分场景下Firefox上下文的DOM同步存在时差，调用Playwright封装的元素查询方法时还未拉取到最新的DOM快照

解决方案 #

• 优先修正等待逻辑
  滚动后不要立即执行元素查询，通过page.waitForFunction监听目标元素的数量变化，确认新内容已经渲染后再查询，示例代码：

  // 先获取滚动前的元素数量
  const originCount = await page.locator('你的元素选择器').count();
  // 执行滚动操作，这里以滚动到页面底部为例
  await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  // 等待元素数量增长
  await page.waitForFunction(
    (selector, originCount) => document.querySelectorAll(selector).length > originCount,
    '你的元素选择器',
    originCount
  );
  // 此时再查询元素即可拿到最新内容
  const newElements = await page.$$('你的元素选择器');
  

• 如需禁用缓存，Playwright对应配置在BrowserContext层面
  不同于Puppeteer的page.setCacheEnabled，Playwright的缓存开关是整个浏览器上下文维度的配置，调用方式如下：

  const context = await browser.newContext();
  // 直接禁用整个上下文的缓存
  await context.setCacheEnabled(false);
  

  也可以在启动Firefox时添加启动参数强制禁用磁盘缓存：

  const browser = await playwright.firefox.launch({
    args: ['--disk-cache-size=0']
  });
  

• 直接在页面上下文执行查询对齐控制台效果
  如果以上方案都不生效，可以直接通过page.evaluate调用原生DOM查询API，返回你需要的元素属性，执行逻辑和浏览器控制台完全一致：

  const elementContents = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('你的元素选择器')).map(el => el.textContent);
  });
  

• 确认滚动容器正确
  部分网站的滚动区域不是全局window，是页面内的自定义容器，需要对指定容器执行滚动操作才能触发懒加载：

  await page.locator('.自定义滚动容器的选择器').evaluate(el => el.scrollTop = el.scrollHeight);
  

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