使用BeautifulSoup爬取网站时<a>标签href显示job/undefined问题求助

问题原因 #

这个网站属于单页应用（SPA），后端返回的HTML只是基础渲染模板，<a>标签的href初始值是job/undefined，真实的链接地址是通过前端JavaScript动态填充的。直接用requests.post获取的静态HTML里不会包含经过JS渲染后的真实链接。

解决方案 #

方案1：用浏览器自动化工具获取渲染后页面（推荐） #

使用Selenium或Playwright模拟浏览器加载页面，等待JavaScript执行完成后再抓取HTML，这样就能拿到真实的职位链接。

示例代码（Selenium）：

from bs4 import BeautifulSoup
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

# 配置无头浏览器
chrome_options = Options()
chrome_options.add_argument("--headless=new")
chrome_options.add_argument("user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36")

driver = webdriver.Chrome(options=chrome_options)
url = 'https://www.trustme.work/en'

# 打开目标页面
driver.get(url)

try:
    # 等待筛选控件加载完成，选择day_camp类型
    WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, 'input[name="facets[camp_type]"][value="day_camp"]'))
    )
    driver.find_element(By.CSS_SELECTOR, 'input[name="facets[camp_type]"][value="day_camp"]').click()
    
    # 触发搜索操作
    driver.find_element(By.CSS_SELECTOR, 'button[type="submit"]').click()
    
    # 等待职位列表加载完成
    WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, 'span.MuiTypography-h2 a'))
    )
except Exception as e:
    print(f"元素操作出错: {e}")

# 获取渲染后的完整HTML
html = driver.page_source
soup = BeautifulSoup(html, 'lxml')

# 提取职位和对应真实链接
job_items = soup.select('span.MuiTypography-root.MuiTypography-h2 a')
for item in job_items:
    print(f"职位名称: {item.text.strip()} | 链接: {item['href']}")

driver.quit()

方案2：抓包直接请求API接口 #

打开浏览器开发者工具（F12）切换到Network标签，手动执行搜索操作，观察XHR/Fetch请求，找到返回职位数据的API接口。直接请求该接口获取结构化的JSON数据，里面会包含完整的职位链接，这种方式比解析HTML更高效。

比如你可能会找到类似https://www.trustme.work/api/jobs的接口，请求参数包含你的筛选条件，返回的JSON中会有每个职位的完整跳转链接。

注意事项 #

• 爬取前请遵守网站的robots.txt规则和使用条款，避免频繁请求触发反爬机制。
• 使用浏览器自动化时，设置合理的等待时间，不要过快操作页面。

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