E2Eテストを（ある程度）ノーコードで作れるツールを作っている途中で躓いた点をまとめておく

このドキュメントは？

テストの自動化のハードルが高い方々に向けて、まず最初の一歩を踏み出しやすくするためのツールを作ろうと日々少しずつ作っている中で、「あれ？」と躓いたポイントをメモしておくためのページ。
結果的に皆さんの開発シーンの中で同じような躓きがあったら役立つかもしれないのと、何より忘れっぽい自分のための備忘録。

躓き

aShot を入れたら Selenium が動かなくなった

Selenium を使ってE2Eテストを自動化するのはなかなか古参（？）かも？
個人的にはまだまだ現役だと思っている私ですが、スクリーンショットを撮ろうとすると、その時にブラウザに表示されているエリアしか画像として保存されなくてエビデンス大好きな人たちにとって頭を悩ませるポイントになりがちですよね。
昔は自分で対処していたのですが、ここ最近は aShot というユーティリティがイイ感じにしてくれるらしいので早速 pom.xml に追加したら Selenium が動かなくなった。

環境

• Windows
• Selenide 6.7.2
• aShot 1.5.4

躓き内容

stackTrace

java.lang.NoClassDefFoundError: org/openqa/selenium/remote/AbstractDriverOptions

	at java.base/java.lang.ClassLoader.defineClass1(Native Method)
    ...
    (長いので省略)
    ...
    at com.intellij.rt.junit.JUnitStarter.main(JUnitStarter.java:54)
Caused by: java.lang.ClassNotFoundException: org.openqa.selenium.remote.AbstractDriverOptions
	at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:606)
	at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:168)
	at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:522)
	... 113 more

原因と解決

org.openqa.selenium.remote.AbstractDriverOptions が見つからないということなので、pom.xml にリモートドライバーを追加したら動いた。

pom.xml

    <dependency>
      <groupId>org.seleniumhq.selenium</groupId>
      <artifactId>selenium-remote-driver</artifactId>
      <version>4.4.0</version>
    </dependency>

aShotを利用してもうまくスクリーンショットが撮れない

早速 aShot を利用して縦方向にスクロールしないと収まらないページのスクリーンショットを撮ってみたが、出来上がった画像を見ても収まってないどころか、そもそも横もはみ出した。
サンプルコードのまま実装したのにうまくいかなかった。

躓き内容

aShot の Readme.md に紹介されているサンプルコードをほぼそのままにコードを作成した。

ScreenshotTest.java

import com.codeborne.selenide.Selenide;
import com.codeborne.selenide.WebDriverRunner;
import org.junit.jupiter.api.Test;
import ru.yandex.qatools.ashot.AShot;
import ru.yandex.qatools.ashot.Screenshot;
import ru.yandex.qatools.ashot.shooting.ShootingStrategies;

import javax.imageio.ImageIO;
import java.io.File;
import java.io.IOException;

public class ScreenshotTest {
    @Test
    public void takeScreenshot() {
        Selenide.open("https://www.selenium.dev/ja/");
        Screenshot screenshot = new AShot()
                .shootingStrategy(ShootingStrategies.viewportPasting(200))
                .takeScreenshot(WebDriverRunner.getWebDriver());
        try {
            ImageIO.write(screenshot.getImage(), "PNG", new File("C:\\tmp\\a.png"));
        } catch (IOException e) {
            throw new RuntimeException(e);
        } finally {
            Selenide.closeWebDriver();
        }
    }
}

Seleniumのサイトをそのまま撮っているだけなのだけど、作成された画像は明らかに右側が３～４割削られている。

原因と解決

どうやら高解像度が原因らしく、ディスプレイの設定の「テキスト、アプリ、その他の項目のサイズを変更する」が 100% でないとダメらしい。（150%なんだから50%増しになるんじゃないの？と思ったけどそこはよくわからなかった）

100% にして実行するとコードそのままでもちゃんと撮れた。

解決できてないところ

• 単純にスクロールして画像を結合しているだけだと思うので、このように固定ヘッダのようなものがあると何度も登場してしまいます。これについては自分でなんとかするしかなさそう。数年前のissueがまだ残ってる。(2022/08/19時点)
• スクリーンショットのためにWindowsの設定変えるの大変・・・エビデンスが必要なのは仕事利用が多いと思うので、テスト実行には通常解像度(フルHDとか)モニタにするとか、小さい字のままで仕事するとか。
• Macでも同じ事象が発生するかもしれない。（後で確認して更新）

2022/10/13: これらの問題については別のモジュールを使うことで解決できました。こちらの記事を参照してください