SeleniumWebDriverの拡張ライブラリ『markableWebDriver』がいい感じ

たまたま発見しました。
GitHub - jgoza25/markableDriver: Extends of Selenium
Selenium Web Driverの拡張ライブラリです。
これはSeleniumで画面キャプチャを行った際に、以下のことが実施できます。

  1. 選択した部品に赤枠を付ける。
  2. 選択した部品に赤枠とコメントを付ける。
  3. 選択した部品をマスキングする。

がしかし、、、3つ目のマスキングはコンパイルエラーとなり実装できませんでした。

ということで機能した部分だけ、以下にサンプルを示します。
ちなみにライブラリはJavaのみのようです。

Javaで実装してみる

Githubページにサンプルが既に載っていますが、かんけんを表示、検索するサンプルを以下のとおり作成してみました。

import java.io.File;

import org.apache.commons.io.FileUtils;
import org.jgoza25.selenium.MarkableWebDriver;
import org.jgoza25.selenium.MarkableWebElement;
import org.jgoza25.selenium.MarkableWebElementImpl;
import org.openqa.selenium.By;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.remote.RemoteWebDriver;
public class MarkTest {
    public static void main(String[] args) {
        try {
            WebDriver driver = new MarkableWebDriver(new FirefoxDriver());
            driver.get("http://kanken.wackwack.net");

            WebElement keyElement = driver.findElement(By.name("keyword"));
            keyElement.sendKeys("Oracle");
            keyElement.submit();
            Thread.sleep(3000);

            // 選択した部品にはキャプチャ時に赤枠が付きます
            keyElement = driver.findElement(By.name("keyword"));

            // 赤枠+コメントを付ける            
            MarkableWebElementImpl containerElement =
                     (MarkableWebElementImpl)driver.findElement(By.cssSelector("div.container"));
            containerElement.addComment("コメントも付けられます");
            
            File file = ((TakesScreenshot) markableDriver).getScreenshotAs(OutputType.FILE);
            FileUtils.copyFile(file, new File("./test.png"));

            driver.quit();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
}

結果はこんな感じです。
今回は検索ワード部分に赤枠を付け、検索結果部分にコメント付き赤枠を付けてみました。

通常のWebDriverの代わりに、MarkableWebDriverを利用してWebElementを取得するだけで、キャプチャ取得時に自動で赤枠が付加されます。
さらにMakableWeblementImplのaddCommentを実行することで、コメントを付ける事もできます。


ちなみにMarkableWebDriverがJavascriptExcutorクラスへのキャストが行えないため、Javascriptを実行したい場合には一旦WebDriverインスタンスを作成してから,RemoteWebDriverとMarkableWebDriverそれぞれのインスタンスを作る方がいいかと思います。



エビデンスを整理するのって結構時間かかりますよね。むしろテストより時間使っていたり・・・
結構使えるライブラリなのではないでしょうか。

しかしなんでマスキングが使えないんだろう・・・?