使用Puppeteer抓取时如何获取JS生成的GitHub取消关注按钮？

1. 修正元素选择器 #

GitHub的「取消关注」按钮是<button>标签，而非你使用的input标签，原选择器input.btn完全错误。实际页面中，该按钮的特征是：

• 类名包含btn-danger和js-unfollow-button
• 按钮文本为「Unfollow」（英文界面）或「取消关注」（中文界面）

正确的选择器示例：

// 精准匹配取消关注按钮
await page.waitForSelector('button.js-unfollow-button.btn-danger')

2. 确保已登录GitHub #

未登录状态下，访问他人的following页面不会显示「取消关注」按钮，只有登录后，在自己的following页面（或自己已关注用户的页面）才会出现该按钮。

需在browserInit函数中添加登录逻辑，示例：

async function browserInit() {
  browser = await puppeteer.launch({ headless: false });
  page = await browser.newPage();
  // 登录GitHub
  await page.goto('https://github.com/login');
  await page.type('#login_field', '你的GitHub账号');
  await page.type('#password', '你的GitHub密码');
  await page.click('input[type="submit"]');
  // 等待登录完成跳转
  await page.waitForNavigation({ waitUntil: 'networkidle2' });
}

3. 优化页面加载等待逻辑 #

页面跳转时，设置waitUntil确保JS资源加载完成，避免过早查找元素：

await page.goto(url, { waitUntil: 'networkidle2' });

4. 处理滚动加载（如果列表较长） #

如果following列表超过初始加载数量，后续按钮需要滚动页面才会渲染，可添加滚动逻辑：

// 滚动到页面底部，加载更多内容
await page.evaluate(() => {
  window.scrollTo(0, document.body.scrollHeight);
});
// 等待新元素加载
await page.waitForTimeout(1000);

修正后的完整代码示例 #

const puppeteer = require('puppeteer');
let browser, page;

async function browserInit() {
  browser = await puppeteer.launch({ headless: false });
  page = await browser.newPage();
  // 登录GitHub
  await page.goto('https://github.com/login');
  await page.type('#login_field', '你的GitHub账号');
  await page.type('#password', '你的GitHub密码');
  await page.click('input[type="submit"]');
  await page.waitForNavigation({ waitUntil: 'networkidle2' });
}

const test2 = async () => {
  let url = 'https://github.com/nariman?tab=following';
  await browserInit();
  await page.goto(url, { waitUntil: 'networkidle2' });
  // 等待取消关注按钮出现，延长超时时间到60秒
  await page.waitForSelector('button.js-unfollow-button.btn-danger', { timeout: 60000 });
  console.log('找到取消关注按钮');
  // 可选：获取所有取消关注按钮
  const buttons = await page.$$('button.js-unfollow-button.btn-danger');
  console.log(`共找到${buttons.length}个取消关注按钮`);
  // 关闭浏览器
  await browser.close();
};

test2();

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