利用 Python + Selenium 自动化快速截图

Earlene0026 8年前
   <p> </p>    <p>Selenium 是一个可以让浏览器自动化地执行任务的工具,常用于自动化测试。与bs4等结合使用,也适合爬取动态网页数据。不过没想到,它居然可以用于网页截图,而且由于可编程性,用法更具想象空间。</p>    <p>目前,Selenium 支持 Java、C#、Ruby 以及 Python 四种客户端语言。如果你使用 Python,则只需要在命令行里输入 pip install selenium 并回车,即可安装 selenium 的 Python 版本客户端支持。</p>    <h2>如何截取整个网页窗口</h2>    <p>如果想截取整个窗口的话,可以使用 driver.save_screenshot() 。下面以编程派的网站为例,编写一个脚本截取首页的截图:</p>    <pre>  <code class="language-python">from selenium import webdriver    browser = webdriver.Firefox()  url = "http://codingpy.com"  browser.set_window_size(1200, 900)  browser.get(url)    browser.save_screenshot("codingpy.png")  browser.close()</code></pre>    <p>我们运行这段代码之后,会当前目录创建名为codingpy.png的图片文件。我们看一下实际效果(我已对图片进行裁剪,只保留了前面一部分)。</p>    <p>我们发现,第二篇文章的配图没有加载出来,是空白的。这是因为我在设计时要求窗口滚动到元素位置时才加载图片。</p>    <h2>先执行JS脚本再截图</h2>    <p>不过还好 Selenium 支持注入JS脚本。我们先在首页上执行一段 JavaScript 脚本,将页面的滚动条拖到最下方,然后再拖回顶部,最后才截图。这样可以解决像上面那种按需加载图片的情况。</p>    <p>下面是改进后的代码,封装进了一个名为 `take_screenshot 的函数中:</p>    <pre>  <code class="language-python">from selenium import webdriver  import time      def take_screenshot(url, save_fn="capture.png"):      browser = webdriver.Firefox() # Get local session of firefox      browser.set_window_size(1200, 900)      browser.get(url) # Load page      browser.execute_script("""          (function () {              var y = 0;              var step = 100;              window.scroll(0, 0);                function f() {                  if (y < document.body.scrollHeight) {                      y += step;                      window.scroll(0, y);                      setTimeout(f, 100);                  } else {                      window.scroll(0, 0);                      document.title += "scroll-done";                  }              }                setTimeout(f, 1000);          })();      """)        for i in xrange(30):          if "scroll-done" in browser.title:              break          time.sleep(10)        browser.save_screenshot(save_fn)      browser.close()      if __name__ == "__main__":        take_screenshot("http://codingpy.com")</code></pre>    <h2>如何截取某个网页元素</h2>    <p>有时候我们只想截取某个网页元素的图片呢?比如说会动态变化的验证码。本来 Selenium 也提供了对元素截图的支持,只要在选中的元素上调用其 screenshot() 方法即可。</p>    <p>但是在实际使用时却遇到了 Unrecognized command 这个异常,经过一段时间检索也没有找到解决办法。所以,只能曲线救国,利用 Selenium 执行JS代码,将页面上不需要的元素一一删除,只保留我们希望留下的元素,然后再利用上面的窗口截屏功能。</p>    <p>例如,如果我们只截取编程派网站右侧的二维码,可以执行这样一段JQuery代码:</p>    <pre>  <code class="language-python">$('#main').siblings().remove();  $('#related__wrapper').siblings().remove();  $('.ui.sticky').siblings().remove();  $('.follow-me').siblings().remove();  $('img.ui.image').siblings().remove();</code></pre>    <p>代码执行完毕之后,就只剩下二维码的图片了。然后我们再截屏。不过这样有一点不好,就是截屏图片的下方会有大量空白内容。</p>    <h2>结语</h2>    <p>虽然对元素截图出现了问题,但是 Selenium 的这个截图功能还是非常强大的。如上所示,它可以在页面上注入并执行一段 JavaScript 代码,还可以模拟鼠标点击等行为;而且可以同时运行多个实例,多个线程同时截图。</p>    <p>总的来说,使用 Selenium 进行网页截图是个不错的选择。</p>    <h3>参考资料</h3>    <ul>     <li><a href="/misc/goto?guid=4959672532680736767" rel="nofollow,noindex">Capture with Selenium</a></li>     <li><a href="/misc/goto?guid=4959672532767810326" rel="nofollow,noindex">Selenium Python Docs</a></li>    </ul>    <p>来自: http://www.codingpy.com/article/take-screenshot-of-web-page-using-selenium/</p>