Examples of usage

Page screenshots

• Take screenshot and save to default location (./screenshots/):

  Shutterbug.shootPage(driver).save();

• Take screenshot and specify location to save to:

  Shutterbug.shootPage(driver).save("C:\\testing\\screenshots\\");

• Wait for condition before taking screenshot:

   Shutterbug.wait(visibilityOfElementLocated(By.id("someId")), 5).shootPage(driver, Capture.FULL).save();

• Take screenshot and scroll in both directions (Will make full page screenshot in Chrome):

  Shutterbug.shootPage(driver, Capture.FULL_SCROLL).save();

• Take screenshot and scroll in both directions with half a second scrolling timeout (Will make full page screenshot in Chrome) and use devicePixelRatio - for retina displays:

  Shutterbug.shootPage(driver, Capture.FULL_SCROLL ,500,true).save();

• Take screenshot of the whole page using Chrome DevTools. This is applicable for Chrome only. Use this one instead of ScrollStrategy.WHOLE_PAGE if page has sticky header or any other sticky elements.

  Shutterbug.shootPage(driver, Capture.FULL,true).save();

WebElement screenshots

• Take screenshot of specified WebElement only:

  Shutterbug.shootElement(driver, element).save();

Screenshots comparison

• Compare screenshot taken with the expected one with specified deviation rate:

  Shutterbug.shootPage(driver).equals(otherImage,0.1);

• Compare screenshot taken with the expected one with specified deviation rate and create new image with differences highlighted:

  Shutterbug.shootPage(driver).equalsWithDiff(otherImage,pathToNewImage,0.1);

• Compare screenshot taken with the expected one and create new image with differences highlighted:

  Shutterbug.shootPage(driver).equalsWithDiff(otherImage,pathToNewImage);

Screenshots Thumbnails

• Take screenshot and save thumbnail as well (with specified resize ratio):

  Shutterbug.shootPage(driver).withThumbnail(0.4).save();

Frame screenshots

• Take screenshot of scrollable frame locatable by supplied frameID:

driver.switchTo().defaultContent();
Shutterbug.shootFrame(driver, "frameID", CaptureElement.FULL_SCROLL).save();

• Take screenshot of scrollable frame web element:

driver.switchTo().defaultContent();
Shutterbug.shootFrame(driver, frameWebElement, CaptureElement.FULL_SCROLL).save();

Please note

• Currently full scrollable frame screenshot is only possible when the full frame is visible in the viewport. If frame size is greater than viewport size UnsupportedOperationException will be throws suggesting to use CaptureElement.VIEWPORT instead.
• Need to perform driver.switchTo().defaultContent(); before frame screensot. After the screenshot is taken driver will stay switched to the target frame.

Scrollable WebElements screenshots

• Take screenshot of scrollable web element. Horizontal capture only:

Shutterbug.shootElement(driver, webElement, Capture.HORIZONTAL_SCROLL).save();

Operations chaining

To demonstrate how it all can be pieced together the example follows:

    System.setProperty("webdriver.chrome.driver", "your path to  chromedriver.exe");
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.google.com/imghp");
        WebElement googleLogo = driver.findElement(By.id("hplogo"));
        WebElement searchBtn = driver.findElement(By.id("sblsbb"));
        WebElement searchBox = driver.findElement(By.className("gsfi"));

        searchBox.sendKeys("Testing");

        Shutterbug.shootPage(driver)
                .blur(searchBox)
                .highlight(searchBtn)
                .monochrome(googleLogo)
                .highlightWithText(googleLogo, Color.blue, 3, "Monochromed logo",Color.blue, new Font("SansSerif", Font.BOLD, 20))
                .highlightWithText(searchBox, "Blurred secret words")
                .withTitle("Google home page - " + new Date())
                .withName("home_page")
                .withThumbnail(0.7)
                .save("C:\\testing\\screenshots\\");
        driver.quit();

Available capture types

VIEWPORT - capture visible part of the viewport only

FULL - full page screenshot using devtools

FULL_SCROLL - full page/element/frame screenshot using scroll & stitch method

VERTICAL_SCROLL - vertical scroll page/element/frame screenshot using scroll & stitch method

HORIZONTAL_SCROLL - horizontal scroll page/element/frame screenshot using scroll & stitch method