有没有办法让网站的 html 元素更显眼？

Question

在抓取以下网站 (https://www.middletownk12.org/Page/4113) 时，此代码无法找到表行（获取员工姓名、电子邮件和部门），即使当我使用 Chrome 开发人员工具时它们是可见的。 soup 对象的可读性不足以定位具有所需信息的 tr 标签。

import requests
from bs4 import BeautifulSoup

url = "https://www.middletownk12.org/Page/4113"
headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3"
}

response = requests.get(url, headers=headers)

soup = BeautifulSoup(response.text, "html.parser")

print(response.text)

我没有机会使用不同的库，例如 bs4、request 和 selenium。我也没有机会尝试使用 selenium 的 Css 选择器和 XPATH。无法找到 Tr 元素。

Answer 1

该联系信息表在页面加载后由 Javascript 填充。该内容不存在于页面的 HTML 中，您不会使用请求看到它。

通过使用浏览器中可用的开发人员工具，我们可以检查页面加载后发出的请求。有很多，但至少在我的浏览器中，很明显联系信息已加载到最后。

查看请求日志，我看到来自docs.google.com 的电子表格请求：

如果我们检查该条目，我们会发现它是对以下内容的请求：

https://docs.google.com/spreadsheets/d/e/2PACX-1vSPXpr9MjxZXaYteex9ZMydfXx81YWqf5Coh9TfcB0q8YNRWrYTAtypX3IPlW44ZzXmhaSiQGNY-yle/pubhtml/sheet?headers=false&gid=0

如果我们获取上面的链接，我们会得到一个包含该表源数据的电子表格。

---

实际上，我使用了 Selenium，然后使用了 bs4，但没有任何结果。该代码未找到“tr”元素...

你为什么使用硒？这个答案的全部要点是，如果您可以找到检索数据的链接，则无需使用 Selenium——我们拥有。

我们只需要requests 来获取数据和BeautifulSoup 来解析它：

import requests
import bs4

url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vSPXpr9MjxZXaYteex9ZMydfXx81YWqf5Coh9TfcB0q8YNRWrYTAtypX3IPlW44ZzXmhaSiQGNY-yle/pubhtml/sheet?headers=false&gid=0'

res = requests.get(url)
res.raise_for_status()

soup = bs4.BeautifulSoup(res.text)
for link in soup.findAll('a'):
  print(f"{link.text}: {link.get('href')}")