こちらは、Selenium/Appium Advent Calendar 2014の5日目の記事となります。
前日は hiroshitoda-prospire さんの「Seleniumを動かすための環境の構成管理について」でした。

こんにちは。テストエンジニアをやっておりますmyhrと申します。
今日はChromeでフルサイズのスクリーンショットを撮るためのパッチについてご紹介します。
既に他の記事でも紹介されているかと思いますが、今回は初心者向けに細かく説明したいと思います。

背景

背景については去年の hiroshitoda-prospire さんの記事「Selenium WebDriver でスクリーンショットを取得するときのtips」を参考にさせていただきました。

同じくFirefoxとChromeでスクリーンショットを撮ってみました。

縦に長いページの場合

横に長いページの場合

Firefoxはページの最後までちゃんと撮れていますが、Chromeはブラウザーの画面にみえる範囲しか写っていません。
そのためFirefoxと違い、スクリーンショットを撮る度にわざわざ操作中のブラウザーを手前に持ってきていることがわかります。

RemoteWebDriver Modes
The remote webdriver comes in two flavours:

Client mode: where the language bindings connect to the remote instance. This is the way that the FirefoxDriver, OperaDriver and the RemoteWebDriver client normally work.

Server mode: where the language bindings are responsible for setting up the server, which the driver running in the browser can connect to. The ChromeDriver works in this way.

ChromeDriverだけ挙動が違う原因はおそらくこの辺りが関係しているかと思いますが詳しい方教えていただけると幸いです。

動作環境

env	version
Python	3.4.2
Pillow ※	2.4.0
selenium	2.44.0
ChromeDriver	2.9.248307
Chrome	39.0.2171.71 (64-bit)

※ 画像処理ライブラリ。インストール：pip instsall Pillow

やり方

やり方はシンプルです。強引且つ泥臭い方法でやります。

変数の設定

var	description	var	description
view_width ※	ブラウザーの横サイズ	stitched_image	スクリーンショットになる画像
view_height ※	ブラウザーの縦サイズ	tmp_image	スクリーンショットの一部になる画像
total_width ※	ページの横サイズ	row_count	縦にスクロールした回数
total_height ※	ページの縦サイズ	col_count	横にスクロールした回数
scroll_width	スクロールした横サイズの計	new_width	ページの残りの横サイズ
scroll_height	スクロールした縦サイズの計	new_height	ページの残りの縦サイズ

※ 固定値

次のようにページ全体のサイズがブラウザーの縦横ともに大きいと想定します。

この時、scroll_width, scroll_height, row_count, col_count = 0に初期化します。
ページの右端に当たるまでスクリーンショットを撮って画面の横幅の分スクロールするのを繰り返していきます。

横にスクロールする度にcol_countを増やします。
必須うではないですがtmp_imageのファイル名はtmp_{row_count}_{col_count}.pngとかにすると後でファイルだけ見た時にわかりやすいです。
tmp_imageをstitched_imageにscroll_widthとscroll_heightの位置に貼り付けます。
スクロールサイズがページの残りサイズを超えたら残りの分だけ切り出してtmp_imageに保存しstitched_imageに貼り付けます。

そして画面の高さ分縦にスクロールし、横スクロールは左側に戻します。
scroll_height+=view_height; row_count++; scroll_width, col_count=0
上記のプロセスをページの右下に到達するまで繰り返します。(縦のスクロールMAXの時も横スクロールと同じやり方で切り取ってペーストする)
最後にstitched_imageを指定のfilename(引数で渡される)に保存し、Trueを返します。

コード

https://gist.github.com/yui3880/a63ced61806d8517c4a3

from PIL import Image
import time

def save_screenshot(self, filename, fullsize=False):
    filepath = '/'.join(filename.split('/')[:-1])
    if fullsize:
        # ページの左上までスクロール
        self.execute_script("window.scrollTo(0, 0);")

        # ページサイズ取得
        total_height = self.execute_script("return document.body.scrollHeight")
        total_width = self.execute_script("return document.body.scrollWidth")

        # 画面サイズ取得
        view_width = self.execute_script("return window.innerWidth")
        view_height = self.execute_script("return window.innerHeight")

        # 画像処理用
        stitched_image = Image.new("RGB", (total_width, total_height))

        # スクロール操作用
        scroll_width = 0
        scroll_height = 0

        row_count = 0
        # 縦スクロールの処理§
        while scroll_height < total_height:
            # 横スクロール初期化
            col_count = 0
            scroll_width = 0
            self.execute_script("window.scrollTo(%d, %d)" % (scroll_width, scroll_height)) 
            # 横スクロールの処理
            while scroll_width < total_width:
                if col_count > 0:
                    # 画面サイズ分横スクロール
                    self.execute_script("window.scrollBy("+str(view_width)+",0)") 

                tmpname = filepath + '/tmp_%d_%d.png' % (row_count, col_count)
                self.get_screenshot_as_file(tmpname)
                time.sleep(3)

                # 右端か下端に到達したら画像を切り取ってstitched_imageに貼り付ける
                if scroll_width + view_width >= total_width or scroll_height + view_height >= total_height:
                    new_width = view_width
                    new_height= view_height
                    if scroll_width + view_width >= total_width:
                        new_width = total_width - scroll_width
                    if scroll_height + view_height >= total_height:
                        new_height = total_height - scroll_height
                    tmp_image = Image.open(tmpname)
                    tmp_image.crop((view_width - new_width, view_height - new_height, view_width, view_height)).save(tmpname)
                    stitched_image.paste(Image.open(tmpname), (scroll_width, scroll_height))
                    scroll_width += new_width

                # 普通に貼り付ける
                else:
                    stitched_image.paste(Image.open(tmpname), (scroll_width, scroll_height))
                    scroll_width += view_width
                    col_count += 1

            scroll_height += view_height
            time.sleep(3)


        # 指定のfilenameにstitched_image格納
        stitched_image.save(filename)
        return True

    # fullsize=Falseの場合は通常のスクリーンショットを取得
    else:
        self.get_screenshot_as_file(filename)

どこに当てる？

ラッパーとか使っていない場合

直接言語バインディングの方に当てちゃいましょう。

pythonの場合：{$PYTHONPATH}/site-packages/webdriver/chrome/webdriver.py

  ...
  from selenium.common.exceptions import WebDriverException
  from .service import Service
  from .options import Options
+ from PIL import Image
+ import time

  class WebDriver(RemoteWebDriver):
  ...
+     def save_screenshot(self, filename, fullsize=False):
+         # ページのサイズを取得
+         total_width = self.execute_script("return document.body.scrollWidth")
+         total_height = self.execute_script("return document.body.scrollHeight")
  ...

メリット：入れておけばChromeのスクリーンショットに関しては全てこのやり方で撮ってくれる、呼び出し方も従来通り
デメリット：seleniumのバージョン変える都度パッチを当てる必要がある。環境によって動かない場合がある。

ラッパーとか社内ライブラリとか使っている場合

お使いのスクリーンショットのメソッドの中にselfをwebdriverとかに変えて入れてください。

バトンタッチ

次は nkns165 さんです。よろしくお願いします。