使用Puppeteer实现LinkedIn自动连接请求时按钮元素获取失败问题

我用JavaScript结合Puppeteer开发了自动发送LinkedIn连接请求的脚本，目前能成功跳转到指定用户的个人主页，但无法通过代码程序化点击“Connect”按钮。在浏览器控制台中，通过类名可以获取该按钮并调用click()实现点击，但在Puppeteer脚本中执行相同操作时，却无法获取到按钮元素，报错显示buttons对象为null。

原代码 #

const puppeteer = require("puppeteer");

(async () => {
  //launch a chrome browser
  const browser = await puppeteer.launch({
    headless: false,
    executablePath:
      "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    defaultViewport: null,

    slowMo: 250,
  });

  //open a new page on browser
  const page = await browser.newPage();

  //setting Linkedin session cookie for me login on Linkedin
  await page.setCookie({
    name: "li_at",
    value:
      "AQEDATKQWLoA3BXSAAABgxjkkiIAAAGDPPEWIlYAAk6VuqqA04hXPdHVfcd5N2sWI5edFWwbhuk1a_4ewbaLdL-qObKsttP2cxO4TJ2zeuVLiweY6aBzGFQb9CCOLRLhIAsNrTigGX4K0Q9Kls_hIMnL",
    domain: ".www.linkedin.com",
  });

  //Take to a particular profile URL
  await page.goto("https://www.linkedin.com/in/alefiya-singaporewala/");

  //suppose to return button elements with className given. Same command from 
// document.getElementsByClassName....works in browser console but not working here

  const buttons = await page.evaluateHandle(() => {
    document.getElementsByClassName(
      "artdeco-button artdeco-button--2 artdeco-button--primary ember-view pvs-profile-actions__action"
    );
  });

  //click button

  await buttons[0].click();

  //close browser connection

  setTimeout(async () => {
    await browser.close();
  }, 500000);
})();

报错截图 #

问题原因及修复方案 #

1. 元素未等待加载完成 #

page.goto默认仅等待DOM加载完成，但LinkedIn的页面元素多为异步渲染，直接获取元素时可能还未生成。必须先等待目标按钮出现后再进行操作。

2. 选择器与返回值错误 #

• page.evaluateHandle的回调函数中没有返回document.getElementsByClassName的结果，导致buttons变量为null。
• LinkedIn的类名包含ember-view这类动态生成的部分，使用完整类名容易失效，建议采用更稳定的选择器组合。

修复后的代码 #

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    defaultViewport: null,
    slowMo: 250,
  });

  const page = await browser.newPage();

  // 修正cookie域名，确保在所有LinkedIn子域名生效
  await page.setCookie({
    name: "li_at",
    value: "AQEDATKQWLoA3BXSAAABgxjkkiIAAAGDPPEWIlYAAk6VuqqA04hXPdHVfcd5N2sWI5edFWwbhuk1a_4ewbaLdL-qObKsttP2cxO4TJ2zeuVLiweY6aBzGFQb9CCOLRLhIAsNrTigGX4K0Q9Kls_hIMnL",
    domain: ".linkedin.com",
  });

  // 等待网络空闲，确保页面资源加载更彻底
  await page.goto("https://www.linkedin.com/in/alefiya-singaporewala/", {
    waitUntil: "networkidle2"
  });

  // 等待Connect按钮出现，使用核心类名组合避免动态类名影响
  await page.waitForSelector('button.artdeco-button--primary.pvs-profile-actions__action', { timeout: 10000 });

  // 直接点击按钮
  await page.click('button.artdeco-button--primary.pvs-profile-actions__action');

  setTimeout(async () => {
    await browser.close();
  }, 500000);
})();

额外提示 #

• 选择器优化：也可以通过按钮文本定位，比如使用XPath：//button[contains(text(), 'Connect')]，稳定性更强。
• 反爬注意：LinkedIn有严格的反爬机制，频繁自动操作可能导致账号受限，建议控制操作间隔，模拟真人行为。

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