如何使用 Watir 截屏
集蜂云是一个可以让开发者在上面构建、部署、运行、发布采集器的数据采集云平台。加入到数百名开发者中，将你的采集器发布到市场，从而给你带来被动收入吧！
您是否正在寻找使用 Watir 测试网站或网页抓取时捕获屏幕截图的最佳方法？
你来对地方了！在本文中，你将学习使用 Watir 和 Ruby 截取屏幕截图的三种方法：
- 生成屏幕可见部分的屏幕截图。
- 截取整页截图。
- 创建特定元素的屏幕截图。 我们开始吧！
如何使用 Watir 截屏？
Watir（Ruby 中的 Web 应用程序测试）是一个用于自动化 Web 浏览器的开源 Ruby 库。它提供了多种与 Web 元素交互的功能，包括截取屏幕截图。使用 Watir，您可以截取页面可见部分、整个页面或特定元素的屏幕截图。
首先，设置一个基本脚本，使用 Watir 无头浏览器访问网站。我们稍后会对其进行修改以截取屏幕截图。在本教程中，我们将使用ScrapingCourse作为演示目标网站。
在终端中运行以下命令来安装 Watir gem：
gem install watir
安装 Watir 后，将其导入脚本并以无头模式初始化 Chrome 浏览器。然后，导航到ScrapingCouse 电子商务页面，抓取其 HTML 内容，打印并关闭浏览器。
require 'watir'
# initialize the browser
browser = Watir::Browser.new :chrome, headless: true
# navigate to the URL
url = 'https://www.scrapingcourse.com/ecommerce/'
browser.goto(url)
# get the page content
page_content = browser.html
puts page_content
# close the browser
browser.close
此代码将打印目标页面的整页 HTML。我们已格式化输出以使其更具可读性：
<html lang="en-US">
<head>
<!--- ... --->
<title>Ecommerce Test Site to Learn Web Scraping - ScrapingCourse.com</title>
<!--- ... --->
</head>
<body class="home archive ...">
<p class="woocommerce-result-count">Showing 1-16 of 188 results</p>
<ul class="products columns-4">
<!--- ... --->
<li>
<h2 class="woocommerce-loop-product__title">Abominable Hoodie</h2>
<span class="price">
<span class="woocommerce-Price-amount amount">
<bdi>
<span class="woocommerce-Price-currencySymbol">$</span>69.00
</bdi>
</span>
</span>
<a aria-describedby="This product has multiple variants. The options may ...">Select options</a>
</li>
<!--- ... other products omitted for brevity --->
</ul>
</body>
</html>
太棒了！您的 Watir 脚本现在可以集成屏幕截图功能了。
选项 1：生成屏幕可见部分的截图
在页面加载之后和向下滚动之前您可以看到的网页部分称为视口，或者简称为屏幕的可见部分。
我们将从演示网站捕获产品页面的以下窗口屏幕截图：
您可以使用 Watir 的内置screenshot方法捕获视口截图。修改之前的基础脚本并包含此方法以将截图保存为图像文件。
修改后的脚本应如下所示：
require 'watir'
# initialize the browser
browser = Watir::Browser.new :chrome, headless: true
# navigate to the URL
url = 'https://www.scrapingcourse.com/ecommerce/product/abominable-hoodie/'
browser.goto(url)
# save screenshot to file
browser.screenshot.save 'viewport_screenshot.png'
# close the browser
browser.close
干得好！您刚刚使用 Watir 库在 Ruby 中截取了视口的屏幕截图。
现在，我们来截取整页的屏幕截图吧！
选项 2：截取整页截图
整页截图可以在一张图像中捕获整个网页，包括可见部分（视口）和需要滚动查看的部分。
我们将抓取同一产品页面的以下全页截图：
Watir 没有提供任何内置方法来截取整页截图。您需要使用扩展程序watir-screenshot-stitch来实现此目的。
通过在终端中运行以下命令来安装扩展：
gem install watir-screenshot-stitch
该库使用 html2canvas JavaScript 库为整个页面创建一个画布元素。
首先，它会截取屏幕截图并将其编码为 Base64 格式。然后，它会以二进制写入模式打开一个文件，并将解码后的屏幕截图数据写入其中，从而保存完整网页的图像。
集成此库之后，修改后的基本脚本应如下所示：
require 'watir'
require 'watir-screenshot-stitch'
# initialize the browser
browser = Watir::Browser.new :chrome, headless: true
# navigate to the URL
url = 'https://www.scrapingcourse.com/ecommerce/product/abominable-hoodie/'
browser.goto(url)
# save screenshot to file
png = browser.screenshot.base64_canvas
path = "full_page_screenshot.png"
File.open(path, 'wb') { |f| f.write(Base64.decode64(png)) }
# close the browser
browser.close
干得好！您扩展了 Watir 的功能，可以对目标网站进行全页面截图。
但是需要注意的是，它watir-screenshot-stitch有一些局限性。根据官方文档，由于继承了html2canvas 的限制，它无法显示某些类型的元素。
选项 3：创建特定元素的屏幕截图
要生成网页特定元素的屏幕截图，您需要将抓取工具指向目标元素。让我们捕获产品页面的以下产品摘要元素：
Watir 没有内置特定元素的截图功能。要集成此功能，您必须使用该watir-extensions-element-screenshot库。
运行以下命令来安装它：
gem install watir-extensions-element-screenshot
禁用抓取工具的无头模式并最大化浏览器窗口以便无错误地使用此库。
目标产品摘要元素包含在div带有类的标签中entry-summary。我们将使用此类属性来定位我们抓取工具中的目标。
这是集成库后修改后的基本代码watir-extensions-element-screenshot：
require 'watir'
require 'watir/extensions/element/screenshot'
# initialize the browser
browser = Watir::Browser.new :chrome
# maximize the browser window
screen_width = browser.execute_script('return screen.width;')
screen_height = browser.execute_script('return screen.height;')
browser.driver.manage.window.resize_to(screen_width,screen_height)
browser.driver.manage.window.move_to(0,0)
# navigate to the URL
url = 'https://www.scrapingcourse.com/ecommerce/product/abominable-hoodie/'
browser.goto(url)
# save screenshot to file
browser.div(:class => 'entry-summary').screenshot('specific_element_screenshot.png')
# close the browser
browser.close
运行此代码将得到以下输出：
您可能已经注意到，输出与我们尝试捕获的输出不同。这是因为该库没有积极维护并且无法裁剪图像。
不幸的是，这种限制在外部库中很常见，使得它们不适合进行大规模网络抓取。
在下一节中我们将了解一种有效的截图方法。
使用 Watir 截屏时避免被屏蔽和禁止
具有反机器人保护系统的网站是最大的网络抓取障碍之一。它们可以阻止您截取屏幕截图，甚至使您面临永久禁令的风险。您需要绕过这些系统才能抓取而不被阻止。
例如，上述截屏方法不适用于 G2 Reviews 等受到严密保护的网站。
亲自看看。获取视口截图脚本并将目标 URL 替换为G2 Reviews页面。
require 'watir'
# initialize the browser
browser = Watir::Browser.new :chrome, headless: true
# navigate to the URL
url = 'https://www.g2.com/products/asana/reviews'
browser.goto(url)
# save screenshot to file
browser.screenshot.save 'g2_blocked_screenshot.png'
# close the browser
browser.close
您不会看到 G2 评论页面，而是会看到以下被阻止的屏幕截图：
集蜂云(beeize.com)是一个可以让开发者在上面构建、部署、运行、发布采集器的数据采集云平台。平台提供了海量任务调度、三方应用集成、数据存储、监控告警、运行日志查看等功能，能够提供稳定的数据采集环境。平台提供丰富的采集模板，简单配置就可以直接运行，快来试一下吧。
结论 在本教程中，您学习了在 Watir 中截屏的三种方法：
- 捕获网页首屏截图。
- 获取整页截图，包括视口之外的部分。
- 对特定的网络元素进行截图。
集蜂云(beeize.com)是一个可以让开发者在上面构建、部署、运行、发布采集器的数据采集云平台。平台提供了海量任务调度、三方应用集成、数据存储、监控告警、运行日志查看等功能，能够提供稳定的数据采集环境。平台提供丰富的采集模板，简单配置就可以直接运行，快来试一下吧。