自動テストツール開発を通してわかったこと〜 Mac × Selenium × Java でフルスクリーンショット〜

ソフトウェアテスト Advent Calendar 2018の13日目です。

はじめまして、植村です。
今年の4月に新卒でヒューマンクレストという会社に入社し、8月からはエンジニアとして日々勉強の毎日を送っています。
現在は主にテストツールの開発を行っており、今回の記事では、複数のブラウザで自動的にフルスクリーンショットを取得するツールを開発してみてわかったことをまとめたいと思います。

やったこと

ツール概要

Seleniumを用いてGoogle Chrome, Firefox, Safariの3ブラウザでフルスクリーンショットの取得

環境

macOS 10.13.6
Java 1.8.0_181
Selenium 3.141.59

ブラウザごとの特徴

Google Chrome

bodyを取得してキャプチャを取得するとフルスクリーンになりました。比較的素直。

public static void Chrome() throws IOException {
        //ドライバへのパスを記述
        System.setProperty("webdriver.chrome.driver", "[ドライバへのパス]/chromedriver");
        WebDriver driver = new ChromeDriver();

        //window最大化
        driver.manage().window().maximize();

        //URLを開く
        driver.get("https://www.humancrest.co.jp/");

        //bodyを取得
        WebElement element = driver.findElement(By.tagName("body"));

        //キャプチャを取得
        Path CapturePath = Paths.get("[保存先のパス]/chrome_capture.png");
        Files.write(CapturePath, element.getScreenshotAs(OutputType.BYTES));

        //ブラウザの終了
        driver.quit();
    }

Firefox

Chromeと同じ方法だと、可視部のみしかキャプチャを取得できませんでした。
ウィンドウのサイズはディスプレイのサイズより広げることができなかったので、headlessモードにして縦幅をbodyのサイズまで広げることでフルスクリーンのキャプチャを取得できました。

    public static void FireFox() throws IOException {
        //capability定義
        DesiredCapabilities capabilities = new DesiredCapabilities();
        //capability設定
        FirefoxOptions options = new FirefoxOptions();
        options.addArguments("--headless");
        options.addArguments("--lang=ja");
        capabilities = DesiredCapabilities.firefox();
        capabilities.setCapability(FirefoxOptions.FIREFOX_OPTIONS, options);
        //ドライバへのパスを記述
        System.setProperty("webdriver.gecko.driver", "[ドライバへのパス]/geckodriver");
        WebDriver driver = new FirefoxDriver(capabilities);

        //URLを開く
        driver.get("https://www.humancrest.co.jp/");

        //bodyを取得
        WebElement element = driver.findElement(By.tagName("body"));

        //bodyのsize取得
        Dimension BodySize = element.getSize();
        //Heightを抜き出し
        int BodyHeight = BodySize.getHeight();
        //任意の横幅を設定
        int Width = 1680;
        //Dimension形式にする
        Dimension WindowSize = new Dimension(Width, BodyHeight);
        //ウィンドウにセット
        driver.manage().window().setSize(WindowSize);

        //キャプチャを取得
        Path CapturePath = Paths.get("[保存先のパス]/firefox_capture.png");
        Files.write(CapturePath, element.getScreenshotAs(OutputType.BYTES));

        //ブラウザの終了
        driver.quit();
    }

Safari

Firefox同様、bodyを取得するだけではうまくキャプチャを取得することができませんでした。しかし、ウィンドウのサイズをディスプレイのサイズよりも大きく設定することが可能だったので縦幅を無理やり広げることでフルスクリーンのキャプチャを取得できました。

    public static void Safari() throws IOException {
        //ドライバを設定
        WebDriver driver = new SafariDriver();

        //URLを開く
        driver.get("https://www.humancrest.co.jp/");

        //bodyを取得
        WebElement element = driver.findElement(By.tagName("body"));

        //bodyのsize取得
        Dimension BodySize = element.getSize();
        //Heightを抜き出し
        int BodyHeight = BodySize.getHeight();
        //任意の横幅を設定
        int Width = 1680;
        //Dimension形式にする
        Dimension WindowSize = new Dimension(Width, BodyHeight);
        //ウィンドウにセット
        driver.manage().window().setSize(WindowSize);

        //キャプチャを取得
        Path CapturePath = Paths.get("[保存先のパス]/safari_capture.png");
        Files.write(CapturePath, element.getScreenshotAs(OutputType.BYTES));

        //ブラウザの終了
        driver.quit();

    }

これらのコードでうまくできないこと

bodyとして読み込めていない部分のキャプチャは取得できない

Timeline形式(無限スクロール)など全てのhtmlを読み込んでいない場合
ページの一部(全体)がbodyに入っていない場合

わかったこと

同じことをしようとしても、ブラウザごとに必要な記述や方法が異なり、試行錯誤しながら進めました。
フルスクリーンショットについて掲載している記事があっても、特定のブラウザのみしか掲載されていない場合が多く、調査にも労力を要しました。なので、この記事が少しでもどなたかの参考になれば幸いです。

今回は実行環境がMacということもあり、Internet ExplorerとMicrosoft Edgeについては詳しく言及していませんが、Microsoft Edgeについてはほぼ同様の方法で実装できました。

さらに、ブラウザやSeleniumの更新により、これまでの方法では実装できないことがありました。環境の更新があった際、より少ない労力で修正できるような、メンテナンス性の高いコードを書くべきだと感じました。

今後もSeleniumに関して打開できた問題や、気づいたことや新しい取り組みなどあれば、積極的に記事にしていきたいです。