Laravel PHP

Laravel Duskで連続でスクリーンショットを撮る方法

Laravel Duskで連続スクリーンショットのメモ

1画面でスクリーンショットを撮るのにも挑戦しましたが、ウィンドウサイズを大きい状態で撮ると止まってしまったので画面をスクロールさせて連続撮影するように実装しました。

Laravel Duskで連続スクリーンショット実装

これでスマホ画面などにも対応が可能です。

「/laravel/tests/DuskTestCase.php」に13～50行目をコピーしてください。

<?php

namespace Tests;

use Laravel\Dusk\TestCase as BaseTestCase;
use Facebook\WebDriver\Chrome\ChromeOptions;
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;

abstract class DuskTestCase extends BaseTestCase
{
    ～略～
    /**
     * 連続スクリーンショット
     * @param Browser $browser
     * @return Browser
     */
    public static function screenshot(Browser $browser):Browser
    {
        // ウィンドウ高さ
        $height = $browser->script('return window.innerWidth')[0];
        // ウィンドウ幅
        $width = $browser->script('return window.innerHeight')[0];
        // ウィンドウスクロール量取得
        $allHeight = $browser->script('return document.documentElement.scrollHeight')[0];

        // タイトル用にURL取得
        $title = $browser->driver->getCurrentURL();

        // ファイル禁止文字とAPP_URL削除
        $title = str_replace(Config::get('app.url'), '', $title);
        $error_strs = ['"', '*', '/', ':', '<', '>', '?', '|'];
        foreach ($error_strs as $value) {
            $title = str_replace($value, '', $title);
        }

        // タイトルにウィンドウサイズを追加
        $title .= '_'.$width.'x'.$height;

        // スクリーンショットの連続保存
        $index = 0;
        for ($i = 0; ($i + $height) <= ($allHeight + $height); $i += $height) {
            // 画面スクロール
            $browser->script("window.scrollTo(0, {$i});");
            // スクリーンショット撮影
            $browser->screenshot(date('Ymd_His_') . $title . '_' . str_pad(++ $index, 3, 0, STR_PAD_LEFT));
            // 0.8秒スリープ
            usleep(800000);
        }
        return $browser;
    }
}

実行ファイル側で以下のようにして呼び出せば画面を自動的にスクロールして連続で撮影してくれます。

parent::screenshot($browser);

撮影入るは「現在日時_URL_画面幅x画面高さ_番号（001から連番）」で「/laravel/tests/Browser/screenshots」に出力されます。

browser->scriptを使用して「return」を付けることによってJavascriptの結果をPHP側が受け取ることができ、上記のソースコードを応用すれば確認したい項目までスクロールさせてスクリーンショットを撮ることも可能です。