v1.24.0

Add support for locally produced screenshots

In some scenarios, taking DOM snapshots and sending them to Happo fors creenshots can lead to issues. One such example is if you're using custom web elements. Happo's DOM snapshot won't contain information and/or state from these elements, and won't be able to reproduce the UI on its workers. As a workaround to all this, we're adding a way to take screenshots directly in Cypress. This is how you enable it:

Update cypress/support/commands.js and configure happo-cypress with
localSnapshots: true. E.g.

import { configure } from 'happo-cypress';

configure({
  localSnapshots: true
});

Then, make happo listen for after:screenshot events (in cypress/plugins/index.js):

const happoTask = require('happo-cypress/task');

module.exports = (on) => {
  on('task', happoTask);
  on('after:screenshot', happoTask.handleAfterScreenshot);
};

Once you have these two things configured, the happoScreenshot() method will take a local screenshot (using cy.screenshot()) and upload images to Happo. The rest of the flow is the same as a normal happo-cypress run, meaning you get a link to a report to review, etc.

The downside of this approach is that you can only get screenshots in the browser that Cypress currently runs. If you want cross-browser, you'll have to make sure to run Cypress in the browsers you are interested in.

There might also be consistency issues with the screenshots. Happo's browser workers do a lot of work to ensure that screenshots are
consistently produced, and leaving that work over to Cypress could potentially lead to more spurious diffs.

When you use localSnapshots: true, we ignore the target configuration in .happo.js. Instead, a dynamically resolved target is used based on the browser and the viewport size used during the test.