Get a GIF of That Failing Selenium Test

It is said that a picture is worth a thousand words. How much would a GIF be worth?

I've recently published a custom driver wrapped over Selenium WebDriver that is capable of taking screenshots during the execution of a test and bundle them in a GIF either when the test ends or on demand.

The integration of the driver in your existing automation framework requires minimal changes; all you would need to do apart from adding the dependency (in case you're not using maven, you can check out this link on how to import the driver with other build tools) in your project to initialize the GifWebDriver with the instance of your desired browser.

Once that's done, the GifWebDriver will take screenshots whenever there's a click action performed by the driver (further actions could be added to take screenshots as well), and when the driver quits (driver.quit() is called), GifWebDriver will create a GIF and will store it on the disk so that you could archive it as an artefact if you're using any CI tool to run your automated tests and reference it later on if needed.

GifWebDriver also allows you to take a screenshot on demand if there are cases in your automated tests that are of big importance, in case the test fails and you want to troubleshoot it faster.

Having a GIF of an automated test that fails would come in handy when you're going to file in a bug report; you can attach it and the developers will get a glimpse on what went wrong and the flow the automated test took in order to easily reproduce it.

Here's a snippet on how to get started GifWebDriver:

public void sampleGifDriver(){
    // initialize your desired driver
    WebDriver driver=new GifWebDriver(new ChromeDriver());
    //WebDriver driver = new GifWebDriver(new FirefoxDriver());
    //WebDriver driver = new GifWebDriver(new RemoteWebDriver());

    // you can use either driver webdriver/gifdriver instance
    GifWebDriver gifDriver=(GifWebDriver)driver;

    // screenshots will be taken implicitly on click events
    driver.findElement(By.id("someIDon a page")).click();

    // if you want to control when gifs are generated you can do it through the API
    File gifFile=gifDriver.getGifScreenshotWorker().createGif();

    //of course you can create screenshots explicitly
    gifDriver.getGifScreenshotWorker().takeScreenshot();

    // on quit the driver will generate the gifs
    driver.quit();

    // if you don't know where the screenshots are taken or where the gifs are created
    String rootFolder=gifDriver.getGifScreenshotWorker().getRootDir();

    // more options about where the gifs are created can be accomplished by using these methods
    GifScreenshotWorker gifWorker=gifDriver.getGifScreenshotWorker();
    gifWorker.setTimeBetweenFramesInMilliseconds(1000);
    gifWorker.setRootDir("some place where files screenshots and gifs will be placed");
    gifWorker.setLoopContinuously(true);

    // these properties can be set during initialization as well
    GifScreenshotWorker myPreciousWorker=new GifScreenshotWorker(
    new ChromeDriver(),
    "rootDir",
    "screenshots folder name",
    "generatedGifs folder name",
    true
    );

    WebDriver myPreciousDriver=new GifWebDriver(new ChromeDriver(),myPreciousWorker);
    // and from here it's pretty much all the same
}

Looking forward towards extending the support of this project!

Thanks.