求助：使用Puppeteer无法访问RCLGROUP网站RATE INQUIRY标签的问题

我来帮你排查这个问题，你遇到的情况通常是页面加载时机、函数上下文或元素交互逻辑导致的，咱们一步步来解决：

可能的原因分析 #

1. 登录后页面未完全稳定：点击登录按钮后直接调用callGetrate()，但此时登录后的页面可能还在异步加载资源，callGetrate()函数可能未定义，或者相关DOM元素还未渲染完成。
2. 元素选择器/点击方式错误：querySelectorAll返回的是元素数组，而page.click()只接受单个元素选择器；另外目标元素可能不在视口内、被遮挡，导致点击无效。
3. 函数调用的上下文缺失：callGetrate()可能依赖页面中的全局变量或DOM状态，直接调用可能缺少必要的前置触发条件。

具体解决方案 #

步骤1：确保登录后页面完全加载 #

登录后添加导航等待逻辑，保证页面所有资源加载完毕：

await page.click('input[type=submit]');
// 等待登录后的页面导航完成，直到网络请求基本停滞
await page.waitForNavigation({ waitUntil: 'networkidle0' });

步骤2：等待目标函数/元素就绪后操作 #

方式A：等待callGetrate()函数定义完成后调用

// 等待全局函数callGetrate存在并可调用
await page.waitForFunction('typeof callGetrate === "function"');
// 调用函数（如果是异步函数可添加await）
await page.evaluate(() => {
  callGetrate();
});

方式B：等待目标标签出现后模拟真实点击

先定位到RATE INQUIRY标签，确保它可见且在视口内再执行点击：

// 等待目标元素可见
const rateInquiryLink = await page.waitForSelector('a[onclick^="callGetrate"]', { visible: true });
// 滚动到元素位置，避免被页面元素遮挡
await rateInquiryLink.scrollIntoView();
// 执行点击
await rateInquiryLink.click();
// 等待页面切换完成，替换为RATE INQUIRY区域的实际元素选择器
await page.waitForSelector('#rate-inquiry-content');

步骤3：绕过网站的反爬检测 #

部分网站会识别Puppeteer的navigator.webdriver特征，可以提前模拟真实浏览器环境：

// 在page.goto之前添加这段代码
await page.evaluateOnNewDocument(() => {
  Object.defineProperty(navigator, 'webdriver', {
    get: () => undefined,
  });
});

修改后的完整代码示例 #

try{ 
  const browser = await puppeteer.launch({ 
    headless: false, 
    args: [ "--disable-gpu", "--disable-dev-shm-usage", "--disable-setuid-sandbox", "--no-sandbox", ], 
    defaultViewport: null, 
  }); 
  const page = await browser.newPage(); 

  // 模拟真实浏览器环境，绕过webdriver检测
  await page.evaluateOnNewDocument(() => {
    Object.defineProperty(navigator, 'webdriver', {
      get: () => undefined,
    });
  });

  await page.goto(`${constants.BASE_URL}e-commerce/`); 
  await page.waitForSelector('#userId'); 
  await page.type('#userId', constants.userAccount.username , { delay: 100 }); 
  await page.type('#password', constants.userAccount.password , { delay: 100 }); 
  await page.click('input[type=submit]'); 

  // 等待登录后的页面完全加载
  await page.waitForNavigation({ waitUntil: 'networkidle0' });

  // 选择其中一种方式执行
  // 方式1：调用callGetrate函数
  await page.waitForFunction('typeof callGetrate === "function"');
  await page.evaluate(() => {
    callGetrate();
  });

  // 方式2：点击目标标签
  // const rateLink = await page.waitForSelector('a[onclick^="callGetrate"]', { visible: true });
  // await rateLink.scrollIntoView();
  // await rateLink.click();

  // 等待RATE INQUIRY页面加载完成，替换为实际元素选择器
  await page.waitForSelector('#rate-inquiry-container');

  const cookie = await page.cookies(); 
  console.log(cookie); 
  return cookie.map((x) => `${x.name}=${x.value}`).join("; "); 
}catch(error){ 
  console.log("Failed to Login RCL ", error); 
} 

额外排查建议 #

• 手动打开网站DevTools，点击RATE INQUIRY标签，查看callGetrate()的执行逻辑，确认是否需要参数或依赖特定状态。
• 添加控制台日志捕获，排查函数调用是否有错误：

  page.on('console', msg => console.log('Page console:', msg.text()));
  

内容的提问来源于stack exchange，提问作者Thịnh Nguyễn