使用“加载更多”按钮抓取无限滚动页面：分步指南

应对动态网页加载数据的挑战：自动化“加载更多”按钮的网页抓取

您的网页抓取工具是否在尝试从动态网页加载数据时卡住了？那些恼人的“加载更多”按钮让您抓狂吗？别担心，您并非孤身一人！许多网站如今都使用这些设计来提升用户体验，但这对网络抓取工具来说却是个挑战。

本教程将指导您完成一个针对初学者的循序渐进练习，使用“加载更多”按钮抓取一个演示页面。目标网页如下所示：

通过本教程，您将学习如何：

• 配置Selenium进行网页抓取。
• 自动化“加载更多”按钮的交互。
• 提取产品数据，例如名称、价格和链接。

让我们开始吧！

步骤一：准备工作

开始之前，请确保您已完成以下准备工作：

• 已安装Python：从python.org下载并安装最新版本的Python，确保在安装过程中也安装了pip。
• 基础知识：熟悉网页抓取的概念、Python编程以及使用requests、Beautiful Soup和Selenium等库。

所需的库：

• requests：用于发送HTTP请求。
• Beautiful Soup：用于解析HTML内容。
• Selenium：用于模拟用户交互，例如在浏览器中点击按钮。

您可以使用以下命令在终端中安装这些库：

<code>pip install requests beautifulsoup4 selenium</code>

在使用Selenium之前，您必须安装与您的浏览器匹配的WebDriver。在本教程中，我们将使用Google Chrome和ChromeDriver。但是，您可以对Firefox或Edge等其他浏览器执行类似的步骤。

安装WebDriver

1. 检查您的浏览器版本： 打开Google Chrome，从三点菜单导航到帮助 > 关于Google Chrome以查找Chrome版本。
2. 下载ChromeDriver： 访问ChromeDriver下载页面。
3. 下载与您的Chrome版本匹配的驱动程序版本。
4. 将ChromeDriver添加到您的系统路径： 解压下载的文件，并将其放置在/usr/local/bin（Mac/Linux）或C:\Windows\System32（Windows）等目录中。

验证安装

在您的项目目录中创建一个名为scraper.py的Python文件，并运行以下代码片段来测试您的设置是否正确：

<code class="python">from selenium import webdriver
driver = webdriver.Chrome()  # 确保ChromeDriver已安装并位于路径中
driver.get("https://www.scrapingcourse.com/button-click")
print(driver.title)
driver.quit()</code>

您可以通过在终端中运行以下命令来执行上述文件代码：

<code class="bash">python scraper.py</code>

如果上述代码运行没有错误，它将启动浏览器窗口并打开演示页面的URL，如下所示：

Selenium随后将提取HTML并打印页面标题。您将看到类似这样的输出：

<code>Load More Button Challenge to Learn Web Scraping - ScrapingCourse.com</code>

这将验证Selenium是否可以正常工作。安装所有必需的组件并准备好后，您可以开始访问演示页面的内容。

步骤二：访问内容

第一步是获取页面的初始内容，这将为您提供页面HTML的基线快照。这有助于您验证连接并确保抓取过程的有效起点。

您可以通过使用Python中的requests库发送GET请求来检索页面URL的HTML内容。代码如下：

<code class="python">import requests
# 演示页面的URL，包含产品信息
url = "https://www.scrapingcourse.com/button-click"
# 发送GET请求到URL
response = requests.get(url)
# 检查请求是否成功
if response.status_code == 200:
    html_content = response.text
    print(html_content)  # 可选：预览HTML
else:
    print(f"未能检索内容：{response.status_code}")</code>

上述代码将输出包含前12个产品数据的原始HTML。

吐槽大师

吐槽大师（Roast Master） - 终极 AI 吐槽生成器，适用于 Instagram，Facebook，Twitter，Threads 和 Linkedin

下载

快速预览HTML可以确保请求成功，并且您正在使用有效的数据。

步骤三：加载更多产品

要访问其余的产品，您需要以编程方式点击页面上的“加载更多”按钮，直到没有更多产品可用为止。由于此交互涉及JavaScript，因此您将使用Selenium来模拟按钮点击。

在编写代码之前，让我们检查页面以定位：

• “加载更多”按钮选择器（load-more-btn）。
• 保存产品详细信息的div（product-item）。

通过加载更多产品，您可以获得所有产品，运行以下代码将为您提供更大的数据集：

<code class="python">from selenium import webdriver
from selenium.webdriver.common.by import By
import time
# 设置WebDriver（确保您已安装相应的驱动程序，例如ChromeDriver）
driver = webdriver.Chrome()
# 打开页面
driver.get("https://www.scrapingcourse.com/button-click")
# 循环点击“加载更多”按钮，直到没有更多产品
while True:
    try:
        # 通过其ID查找“加载更多”按钮并点击它
        load_more_button = driver.find_element(By.ID, "load-more-btn")
        load_more_button.click()
        # 等待内容加载（根据需要调整时间）
        time.sleep(2)
    except Exception as e:
        # 如果找不到“加载更多”按钮（产品结束），则跳出循环
        print("没有更多产品可加载。")
        break
# 获取加载所有产品后的更新页面内容
html_content = driver.page_source
# 关闭浏览器窗口
driver.quit()</code>

这段代码打开浏览器，导航到页面，并与“加载更多”按钮进行交互。然后它提取更新后的HTML（现在包含更多产品数据）。

如果您不希望Selenium每次运行此代码时都打开浏览器，它还提供了headless（无头）浏览器功能。headless浏览器具有实际web浏览器的所有功能，但没有图形用户界面(GUI)。

您可以通过定义ChromeOptions对象并将其传递给webdriver.Chrome构造函数来在Selenium中启用Chrome的headless模式，如下所示：

<code class="python">from selenium import webdriver
from selenium.webdriver.common.by import By
import time

# 实例化一个ChromeOptions对象
options = webdriver.ChromeOptions()

# 将选项设置为headless模式
options.add_argument("--headless=new")

# 以headless模式初始化Chrome驱动程序实例
driver = webdriver.Chrome(options=options)

...</code>

当您运行上述代码时，Selenium将启动一个headless Chrome实例，因此您将不再看到Chrome窗口。这对于在服务器上运行抓取脚本，并且不想在GUI上浪费资源的生产环境来说是理想的选择。

现在已经检索到完整的HTML内容，是时候提取每个产品的具体详细信息了。

步骤四：解析产品信息

在此步骤中，您将使用Beautiful Soup解析HTML并识别产品元素。然后，您将提取每个产品的关键详细信息，例如名称、价格和链接。

<code class="python">from bs4 import BeautifulSoup
# 使用Beautiful Soup解析页面内容
soup = BeautifulSoup(html_content, 'html.parser')
# 提取产品详细信息
products = []
# 查找网格中的所有产品项目
product_items = soup.find_all('div', class_='product-item')
for product in product_items:
    # 提取产品名称
    name = product.find('span', class_='product-name').get_text(strip=True)

    # 提取产品价格
    price = product.find('span', class_='product-price').get_text(strip=True)

    # 提取产品链接
    link = product.find('a')['href']

    # 提取图片URL
    image_url = product.find('img')['src']

    # 创建一个包含产品详细信息的字典
    products.append({
        'name': name,
        'price': price,
        'link': link,
        'image_url': image_url
    })
# 打印提取的产品详细信息
for product in products[:2]:
    print(f"名称：{product['name']}")
    print(f"价格：{product['price']}")
    print(f"链接：{product['link']}")
    print(f"图片URL：{product['image_url']}")
    print('-' * 30)</code>

在输出中，您应该看到产品详细信息的结构化列表，包括名称、图片URL、价格和产品页面链接，如下所示：

<code>名称：Chaz Kangeroo Hoodie
价格：$52
链接：https://scrapingcourse.com/ecommerce/product/chaz-kangeroo-hoodie
图片URL：https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh01-gray_main.jpg
------------------------------
名称：Teton Pullover Hoodie
价格：$70
链接：https://scrapingcourse.com/ecommerce/product/teton-pullover-hoodie
图片URL：https://scrapingcourse.com/ecommerce/wp-content/uploads/2024/03/mh02-black_main.jpg
------------------------------
…</code>

上述代码将原始HTML数据组织成结构化格式，使其更容易使用和准备输出数据以进行进一步处理。

步骤五：将产品信息导出到CSV

现在，您可以将提取的数据组织到CSV文件中，这使得分析或共享变得更加容易。Python的csv模块对此有所帮助。

<code class="python">import csv
# 将产品信息写入CSV文件
with open("products.csv", mode="w", newline="") as file:
    writer = csv.DictWriter(file, fieldnames=["name", "image_url", "price", "link"])
    writer.writeheader()
    for product in products:
        writer.writerow(product)</code>

上述代码将创建一个新的CSV文件，其中包含所有必需的产品详细信息。

步骤六：获取热门产品的额外数据

现在，假设您想识别价格最高的前5个产品，并从其各个页面中提取其他数据（例如产品描述和SKU代码）。您可以使用以下代码来做到这一点：

<code class="python"># 按价格降序排列产品
sorted_products = sorted(products, key=lambda x: float(x['price'].replace('$', '')), reverse=True)
# 抓取前5个产品的额外详细信息
driver = webdriver.Chrome()
for product in sorted_products[:5]:
    driver.get(product['link'])
    time.sleep(3)
    soup = BeautifulSoup(driver.page_source, 'html.parser')
    description = soup.find('div', class_='product-description')
    product['description'] = description.get_text(strip=True) if description else "无描述"
    sku = soup.find('span', class_='sku')
    product['sku'] = sku.get_text(strip=True) if sku else "无SKU"
driver.quit()

# 将包含额外数据的产品信息写入CSV文件
with open("products.csv", mode="w", newline="") as file:
    writer = csv.DictWriter(file, fieldnames=["name", "image_url", "price", "link", "description", "sku"])
    writer.writeheader()
    for product in products:
        writer.writerow({
            'name': product['name'],
            'image_url': product['image_url'],
            'price': product['price'],
            'link': product['link'],
            'description': product.get('description', ''),
            'sku': product.get('sku', '')
        })
</code>

这段代码按价格降序对产品进行排序。然后，对于价格最高的前5个产品，脚本打开其产品页面并使用Beautiful Soup提取产品描述和SKU。

结论

使用无限滚动或“加载更多”按钮抓取页面看起来具有挑战性，但使用requests、Selenium和Beautiful Soup等工具可以简化这个过程。

本教程展示了如何从演示页面检索和处理产品数据，并将其保存为结构化格式以便快速轻松地访问。