Puppeteer设置headless:true时报Cannot read property 'querySelectorAll' of null错误

• 无头模式与有界面模式的默认运行特征差异较大，目标站点识别到是无头浏览器访问后触发反爬策略，返回验证页、空白页或非预期的页面结构，导致你要定位的tbody节点不存在，调用querySelectorAll时自然抛出null类型的属性读取错误。
• 无头模式默认的User-Agent、视口尺寸与普通Chrome有明显区别，要么被站点直接拦截，要么触发移动端适配逻辑，页面结构和你在有界面模式下调试的结构不一致，找不到对应tbody节点。
• 你给出的代码片段中缺少获取tbody节点的逻辑，直接调用tbody.querySelectorAll本身就存在节点未定义的风险。

• 启动浏览器时添加反检测参数，绕过基础的无头浏览器识别：

const browser = await puppeteer.launch({ 
  headless: true,
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-blink-features=AutomationControlled',
    '--start-maximized'
  ]
});

• 手动设置和普通Chrome一致的User-Agent与视口尺寸，避免特征识别：

const page = await browser.newPage();
// 替换为你自己本地Chrome的UA，可访问chrome://version查看
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36');
await page.setViewport({ width: 1920, height: 1080 });

• 访问页面后先等待目标节点加载完成，再执行DOM操作，避免节点还未渲染就调用方法：

await page.goto(`https://www.japanread.cc/`, {
  waitUntil: "networkidle2",
});
// 替换为你实际要定位的tbody的CSS选择器
await page.waitForSelector('tbody.manga-list-tbody', { timeout: 15000 });

• 修正DOM读取逻辑，先判断节点是否存在再调用方法，避免报错：

const trs = await page.evaluate(() => {
  const tbody = document.querySelector('tbody.manga-list-tbody');
  // 节点不存在时返回空数组，避免抛出错误
  return tbody ? Array.from(tbody.querySelectorAll('tr')) : [];
});

• 可以在执行DOM操作前添加截图逻辑，确认无头模式下的页面加载状态，方便排查问题：

await page.screenshot({ path: 'debug.png', fullPage: true });

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