Examples

Wait before taking screenshot with JavaScript and Cypress

Install Cypress

npm install cypress

Cypress is an end-to-end testing framework, so screenshots are taken from inside a test. Save the example as cypress/e2e/screenshot.cy.js and run it with npx cypress run — screenshots land in cypress/screenshots/.

Take a screenshot and save to file

Wait for the page to settle before taking the screenshot.

// cypress/e2e/screenshot.cy.js
describe('screenshot', () => {
  it('waits before capturing', () => {
    cy.visit('https://www.htmltoimage.com/demo');
    // Wait for late content — here an element that appears after 2 seconds.
    cy.get('#delayed-banner').should('be.visible');
    cy.screenshot('wait', { capture: 'viewport' });
  });
});

Find out how to take a full-page screenshot with JavaScript and Cypress.

That was 9 lines of code — plus a browser to run in production

Keeping headless browsers fed, patched and scaled is a job in itself. We built Urlbox so the same screenshot is one API call: 

curl "https://api.urlbox.com/v1/YOUR_API_KEY/png?url=https://example.com"

Try the Urlbox screenshot API — free trial, no browser babysitting.