Skip to content

Examples of usage

Glib Briia edited this page Aug 11, 2020 · 14 revisions

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:
Shutterbug.shootFrame(driver, "frameID", Capture.FULL_SCROLL).save();
  • Take screenshot of scrollable frame web element:
Shutterbug.shootFrame(driver, frameWebElement, Capture.FULL_SCROLL).save();

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

Clone this wiki locally