Python+Seleniumによるページの指定要素のスクリーンショット(スクリーンショット可能要素)

3463 ワード

スコットアンの時間
WebElementのスクリーンショット
WebDriver.Chromeが独自の方法では、現在のウィンドウをスクリーンショットするだけで、特定の要素を指定することはできません.特定の要素を切り取ったり、ウィンドウが1画面を超えたりする必要がある場合は、別の道を開くしかありません.
WebDriver.PhantomJSが独自の方法で、Webページ全体のスクリーンショットをサポートします.
以下、いくつかの考え方を提供します.
方式一
WebDriver.に対してChrome
WebDriverのjsスクリプト注入機能により、曲線救国.
  • サードパーティhtmlを注入canvasを転送するjsライブラリ(下の推奨を参照)
  • 取得要素htmlソース
  • htmlをcanvas
  • に変換
  • ダウンロードcanvas
  • 利点:長図の切り取りが容易
    欠点:サードパーティ製ライブラリのロードに時間がかかります.変換原理はこの記事を参照してください.
    DOMオブジェクトをcanvasに描画する
    方式2
    WebDriver.に対してChrome
    全図を切り取って、自分で裁断して、つなぎ合わせます
  • 要素の位置、サイズ
  • を取得する.
  • ウィンドウサイズ
  • を取得する.
  • 要素を含むウィンドウ
  • を切り取る.
  • は、対応する裁断および接合を行う.

  • 具体的なアルゴリズムの構想ははっきりしているが,注意すべき細部が多い.ここでは余計なことは言わない.サンプルコードを移動してください:
    [Github]PythonSpiderLibs
    利点:js作業をあまり必要とせず、python+jsコードを少量で完了
    欠点:つなぎ合わせなどの作業はWebDriverの実現の違い、画像のロード速度などの要素に影響されますので、注意してください.スクリーンショットの品質を保証する場合、速度が遅い
    方程式3
    WebDriver.に対してPhantomJS
    インタフェース実装の違いにより、PhantomJSはChromeよりもウェブページ全体を切り取ることができます.指定した要素のスクリーンショットを取得するのも簡単です
  • ページ全図
  • を切り取る
  • 指定要素
  • を切り取る
        driver = webdriver.Chrome()
        driver.get('http://stackoverflow.com/')
        driver.save_screenshot('screenshot.png')
    
        left = element.location['x']
        top = element.location['y']
        right = element.location['x'] + element.size['width']
        bottom = element.location['y'] + element.size['height']
    
        im = Image.open('screenshot.png') 
        im = im.crop((left, top, right, bottom))
        im.save('screenshot.png')
    
    **  **:     
    
    **  **:                 ,      ,           12.8M。
    
    ####             
    
      : [   Python + Selenium        ](http://codingpy.com/article/take-screenshot-of-web-page-using-selenium/)
    
                JavaScript   ,            ,       ,     。                    。
    
    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")
    
    
    

    異なるwewbdriverはいくつかの方法の実現に対して異なっています
    ChromeとPhantomJSのインタフェースの違い
    時を知る穴をつかんで、
  • ChromeはWebElement.textで正常に値を得ることができ、PhantomJSではWebElement.get_attribute('innerHTML')
  • しか使えない.
  • WebDriver.Chromeスクリーンショットは現在の画面領域のみを切り取ることができます.WebDriver.PhantomJSのスクリーンショットでは、ページ全体の長い図を取得できます.

  • 他にも発見を待つ穴があります
    推奨
  • html 2 canvasライブラリ
  • DOMオブジェクトをcanvasの
  • に描画
  • Python+Selenium自動化高速スクリーンショット