冠军资讯
代码老中医在日常的爬虫和自动化测试工作中，我们经常使用 Python 的 Requests 库来发送 HTTP 请求，获取网页数据。然而，随着前端技术的不断发展，越来越多的网站采用 JavaScript 动态渲染页面内容。这时，Requests 往往就无能为力了，因为 Requests 只能获取到服务器返回的原始 HTML 代码，而无法执行 JavaScript 代码来渲染页面。这种情况下，我们就需要借助 Selenium 或 Playwright 等工具来模拟浏览器行为，从而获取到完整的渲染后的页面数据。
问题场景重现：JS 渲染的挑战
假设我们要爬取一个使用 React 或 Vue.js 构建的网站上的商品价格。使用 Requests 获取到的 HTML 代码可能只包含一些占位符或者 JavaScript 代码，而真正的商品价格是通过 JavaScript 动态加载的。例如，以下 HTML 代码：
<div id="product-price">Loading...</div>
<script>
// JavaScript 代码动态加载价格
setTimeout(() => {
document.getElementById('product-price').innerText = '$99.99';
}, 2000);
</script>
如果我们使用 Requests 获取这段 HTML 代码，得到的 product-price 元素的内容仍然是 Loading...，而不是 $99.99。这就是 JavaScript 动态渲染带来的挑战。解决前端渲染问题的关键在于模拟浏览器环境，执行 JavaScript 代码。
底层原理深度剖析：Selenium/Playwright 的工作机制
Selenium 和 Playwright 都是自动化测试工具，它们通过控制真实的浏览器（例如 Chrome、Firefox、Safari）来模拟用户的各种操作，例如点击、输入、滚动等。它们的核心原理是：
- 驱动程序：Selenium/Playwright 需要一个浏览器驱动程序（例如 ChromeDriver、GeckoDriver）来与浏览器进行通信。驱动程序负责将 Selenium/Playwright 的指令翻译成浏览器可以理解的命令。
- 浏览器控制：Selenium/Playwright 通过驱动程序控制浏览器，打开指定的网页，执行 JavaScript 代码，获取渲染后的页面内容。
- 页面元素定位：Selenium/Playwright 提供了各种方法来定位页面上的元素，例如通过 ID、Class Name、XPath、CSS Selector 等。我们可以使用这些方法来定位到需要获取数据的元素，并提取其内容。
与传统的 HTML 解析方式相比，Selenium/Playwright 能够处理复杂的 JavaScript 动态渲染页面，因为它能够模拟真实的浏览器行为，执行 JavaScript 代码，从而获取到完整的页面数据。使用 Selenium/Playwright 获取到的数据更接近用户在浏览器中看到的内容，更可靠，准确。
代码解决方案：Selenium 和 Playwright 入门
Selenium 入门
首先，我们需要安装 Selenium 和对应的浏览器驱动程序。以 Chrome 为例，我们需要安装 ChromeDriver。
pip install selenium
# 下载 ChromeDriver 并将其添加到 PATH 环境变量中
以下是一个使用 Selenium 获取动态渲染的商品价格的 Python 代码示例：
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
import time
# 设置 Chrome 选项
chrome_options = Options()
chrome_options.add_argument('--headless') # 无头模式，不显示浏览器窗口
chrome_options.add_argument('--disable-gpu') # 禁用 GPU 加速，解决某些环境下的问题
# 创建 Chrome 浏览器实例
driver = webdriver.Chrome(options=chrome_options)
# 打开网页
driver.get('your_website_url')
# 等待 2 秒，等待 JavaScript 代码执行完成
time.sleep(2)
# 定位到商品价格元素
price_element = driver.find_element(By.ID, 'product-price')
# 获取商品价格
price = price_element.text
# 打印商品价格
print(price) # 输出 $99.99
# 关闭浏览器
driver.quit()
Playwright 入门
Playwright 是一个由 Microsoft 开发的跨浏览器自动化测试工具，它比 Selenium 更加强大和易用。
pip install playwright
playwright install # 下载浏览器驱动程序
以下是一个使用 Playwright 获取动态渲染的商品价格的 Python 代码示例：
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True) # 无头模式
page = browser.new_page()
page.goto('your_website_url')
page.wait_for_timeout(2000) # 等待 2 秒
price = page.locator('#product-price').inner_text()
print(price) # 输出 $99.99
browser.close()
相比于 Selenium，Playwright 提供了更简洁的 API 和更强大的功能，例如自动等待、网络拦截等。Playwright 的性能通常也优于 Selenium。
实战避坑经验总结
- Headless 模式：建议在服务器上使用 Headless 模式运行 Selenium/Playwright，避免显示浏览器窗口，节省资源。
- 等待时间：JavaScript 代码的执行需要一定的时间，我们需要设置合理的等待时间，确保页面上的元素加载完成。可以使用
time.sleep()或者 Selenium/Playwright 提供的wait_for_selector()、wait_for_timeout()等方法。 - 元素定位：选择合适的元素定位方式非常重要。XPath 是一种强大的元素定位方式，但性能较差。建议优先使用 ID、Class Name 或 CSS Selector。
- 异常处理：在使用 Selenium/Playwright 时，可能会遇到各种异常，例如元素未找到、页面加载超时等。我们需要进行合理的异常处理，避免程序崩溃。
- 反爬策略：一些网站会采取反爬策略，例如验证码、IP 封禁等。我们需要采取相应的措施来应对反爬策略，例如使用代理 IP、Cookie 池等。如果遇到 IP 封禁，可以考虑使用 Nginx 反向代理，并配置多个上游服务器进行负载均衡，提高爬虫的稳定性和可用性。也可以考虑使用宝塔面板快速部署 Nginx 服务。
- 性能优化：Selenium/Playwright 的性能相对较低，我们需要进行性能优化，例如减少不必要的网络请求、使用缓存等。例如，可以通过设置 Chrome 的
user-agent来模拟浏览器，从而避免被识别为爬虫。
结语
本文介绍了如何使用 Selenium 和 Playwright 来解决 Requests 无法获取动态渲染数据的问题。通过模拟浏览器行为，我们可以获取到完整的渲染后的页面数据，从而更好地进行爬虫和自动化测试工作。希望本文能够帮助读者更好地理解和应用 Selenium 和 Playwright。抓取动态网页是应对前端渲染挑战的关键技能。
