element screenshot

An example how to take element screenshot using Selenium 4 devtools API.

Take element screenshot

First step is to get DevTools and create session:

    private DevTools chromeDevTools;
    private final String gitHubUrl = "https://github.com/";
    private final String fileName = "github_screenshot.png";

    @BeforeEach
    public void setup() {
        open(gitHubUrl);
        ChromeDriver driver = (ChromeDriver) getWebDriver();
        chromeDevTools = driver.getDevTools();
        chromeDevTools.createSession();
    }

After that we can use chromeDevTools for taking screenshots. In order to do this we need to utilize Page.captureScreenshot method:

    @Test
    public void elementScreenshotTest() throws IOException {
        SelenideElement logo = $("header .octicon-mark-github");
        Viewport viewport = new Viewport(logo.getLocation().getX(), logo.getLocation().getY(),
                logo.getSize().getWidth(), logo.getSize().getHeight(), 1);

        String image = chromeDevTools.send(Page.captureScreenshot(Optional.of(PNG), Optional.empty(),
                Optional.of(viewport), Optional.empty()));
        writeToFile(image, fileName);

        Path content = Paths.get(fileName);
        assertEquals(content.getFileName().toString(), fileName);

        try (InputStream is = Files.newInputStream(content)) {
            Allure.addAttachment("Screenshot_Devtools", is);
        }
    }

The screenshot will be saved with ‘github_screenshot.png’ name to project’s root folder and attached to Allure test report.

After all required actions and verifications let’s clean up and delete our screenshot:

    @AfterEach
    public void cleanup() throws IOException {
        Path path = Paths.get(fileName);
        Files.deleteIfExists(path);
    }

Voilà. In the same manner it is possible to take screenshots of full page with the help of devtools in Selenium 4.

Full code example is here.