在Puppeteer中定位特定文本的span元素并实现对应业务逻辑

核心逻辑是先定位指定元素判断条件是否满足，匹配成功后再执行职位爬取逻辑，完整实现代码如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    // 可根据需求调整启动配置，比如关闭无头模式、配置代理等
    headless: 'new'
  });
  const page = await browser.newPage();
  // 替换为实际要访问的目标页面地址
  await page.goto('https://你的目标页面地址');

  // 核心条件判断：检查指定a元素后的span文本是否符合要求
  const isRemoteOnly = await page.evaluate(() => {
    const targetLink = document.querySelector('a[href="/100-percent-remote-jobs"]');
    // 目标a元素不存在直接返回false
    if (!targetLink) return false;
    // 获取a元素紧邻的下一个兄弟元素
    const nextSpan = targetLink.nextElementSibling;
    // 兄弟元素不是span也返回false
    if (!nextSpan || nextSpan.tagName !== 'SPAN') return false;
    // 去除首尾空白字符后比对文本，避免空格/换行导致匹配失败
    return nextSpan.innerText.trim() === 'Anywhere (100% Remote) Only';
  });

  // 条件满足时执行爬取逻辑
  if (isRemoteOnly) {
    // 注意：jobPost需提前生成，存储所有待爬取的职位详情页链接
    // 你可以在这一步通过page.evaluate从列表页提取所有职位跳转链接存入jobPost
    const jobPost = [];
    const jobs = [];

    for (let enlace of jobPost) {
      await page.goto(enlace);
      const eachJob = await page.evaluate(() => {
        const tmp = {};
        tmp.job = document.querySelector('.listing-header-container h1').innerText;
        tmp.company = document.querySelector('.company-card h2 a').innerText;
        return tmp;
      });
      jobs.push(eachJob);
    }

    console.log(jobs);
  }

  await browser.close();
})();

注意事项 #

• 代码中的https://你的目标页面地址需要替换为实际要访问的列表页URL
• jobPost数组需要自行实现生成逻辑，通常是在列表页调用page.evaluate提取所有职位详情的跳转链接
• 如果页面元素是动态渲染的，可在判断条件前增加page.waitForSelector('a[href="/100-percent-remote-jobs"]')等待元素加载完成

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