PHP
Selenium
キャプチャ

selenium + php-webdriver で フルスクリーンキャプチャをとる


(課題) seleniumでフルスクリーンキャプチャしたい

selenium いろいろ自動化できて素敵なのですが、フルスクリーンで画面キャプチャがなかなかできませんでした。

結論から言うとヘッドレスモードで動かしたらあっさり撮れたんですが、なかなか結論に行きつけずハマったので挙げておきます。 :grinning:


(前提/参考) selenium + php-webdriver を動かすところまで


seleniumを使ってPHPでChromeの自動操作をする - Qiita

https://qiita.com/Rasukarusan/items/0ca204d5b0f0fb876252

PHPUnit + php-webdriver でWebUIのテストを書く - Qiita

https://qiita.com/zaburo/items/f11357170953a3c34b8f

Selenium × PHP でテスト自動化!【環境構築編】 | DACエンジニアブログ:アドテクゑびす界 http://yebisupress.dac.co.jp/2018/07/06/test_automation_with_selenium-x-php/



(先に結論)ヘッドレスモードで動かしたら撮れた

<?php

// PHP 7.1.23
// selenium-server-standalone-3.4.0.jar

require_once './vendor/autoload.php';

use Facebook\WebDriver\Chrome\ChromeOptions;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\WebDriverDimension;

//ヘッドレスモードで起動
$options = new ChromeOptions();
$options->addArguments(['--headless']);
$capabilities = DesiredCapabilities::chrome();
$capabilities->setCapability(ChromeOptions::CAPABILITY, $options);
$driver = RemoteWebDriver::create('http://localhost:4444/wd/hub', $capabilities);

//繰り返しの処理を入れたければここから
$url = "https://www.yahoo.co.jp/";
$imageName = "example";
$driver->get($url);

// 一旦 ウィンドウサイズを任意に指定
// 縦幅は調整してくれるが、
// 横幅はここの値が引き継がれてるみたい?
$dimension = new WebDriverDimension(1920, 1080); // width, height
$driver->manage()->window()->setSize($dimension);

// 実際のコンテンツサイズを取得して調整
$contentWidth = $driver->executeScript("return Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth, document.documentElement.scrollWidth, document.documentElement.offsetWidth);");
$contentHeight = $driver->executeScript("return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);");
$dimension_content = new WebDriverDimension($contentWidth, $contentHeight);
$driver->manage()->window()->setSize($dimension_content);

$file = __DIR__ . $imageName . ".png";
$driver->takeScreenshot($file);

$driver->close();


(諦めた方法) スクロールして画像を切り貼りする

先達が紹介してくれている方法に、「(実際の画面サイズ以上のキャプチャが撮れないので)画面を一枚ずつとってスクロールして切り貼りする」というのがあるんですが、複雑なのでなんとかならんのかと思ったところ、


php-webdriverを使ってフルスクリーンのキャプチャを撮る | Shimabox Blog https://blog.shimabox.net/2017/07/31/take_full_screen_capture_with_php-webdriver/

Chromeでフルサイズのスクリーンショットを撮るためのパッチ - Qiita https://qiita.com/myhr/items/dff7cee30182ab56f737

Selenium でページ全体のスクリーンショットを撮る (Python) | Aqua Ware つぶやきブログ https://aquasoftware.net/blog/?p=1090



ヘッドレスモードだったら撮れるらしい?

こちらはpythonだけど「ヘッドレスモード」だったら撮れるとのこと


Python: Selenium + Headless Chrome で Web ページ全体のスクリーンショットを撮る - CUBE SUGAR CONTAINER https://blog.amedama.jp/entry/2018/07/28/003342


ヘッドレスブラウザとは


ヘッドレスブラウザは、GUI を持つ必要のない自動テスト環境やサーバー環境にとてもよいツールです。例としては、実際のウェブページに対してなにかテストを実行する、そのページの PDF を生成する、またはただ、そのページがどう表示されるかを検証するなどが挙げられるでしょうか。 https://developers.google.com/web/updates/2017/04/headless-chrome?hl=ja


php-webdriverでのヘッドレスモードの記載はこちらを参考に


ヘッドレスChromeとヘッドレスFirefoxをphp-webdriverで試す | Shimabox Blog https://blog.shimabox.net/2017/11/15/try_headless_chrome_and_firefox_with_php-webdriver/



……でヘッドレスモード動かしたらあっさり行けました(バージョン的な問題だったのかはわかっていません :bow: )。

いまのところの注意点としては、繰り返しキャプチャを行う際に一旦画面の縦幅をリセットしないと異様に縦長の画像が撮れてしまったりします。

とりあえずこちらからは以上です。