Testim.ioChangelogStart Testim Free

Screenshots

Takes screenshots of parts of the viewport

Suggest Edits

🚧

This is a TDK feature

This is not supported in Testim's visual editor

screenshot.viewport();

Takes a screenshot of the whole screen. Returns said screenshot as a base 64 string.

screenshot.stitch()

Takes a screenshot of the whole page by scrolling down and taking screenshots of the different parts and stitching them together.

screenshot.element(element)

  • element {string | TDKStepLocator} a css selector or smart locator
// ✅ take a screenshot of the whole screen
await screenshot.viewport();
// ✅ take a screenshot of an element
await screenshot.element('.foo');
// ✅ take a screenshot of the whole page by scrolling
await screenshot.stitch();

// ❌ bad, element requires a selector
await screenshot.selector();

Full code example

'use strict';

const chai = require('chai');
const {expect} = chai;
chai.use(require('chai-string'));

const {go, screenshot, test, resize} = require('testim');

test("screenshot", async () => {
    await go("http://jsbin.testim.io/qib/2");

    const fullScreenImage = await screenshot.viewport();
    // fullScreenImage is a base 64 data url of the screen
  
    const elementImage = await screenshot.element("#element");
    expect(elementImage).to.startsWith('data:image/png;base64,');
    const stitchedImage = await screenshot.stitch();
    expect(stitchedImage).to.startsWith('data:image/png;base64,');
});

Updated almost 3 years ago