happo-cypress
Advanced tools
The happo-cypress module adds Happo.io cross-browser
screenshots to your Cypress.io test suite.
Before you start following the instructions here, you'll need a working Cypress test suite and a Happo account.
In your project, install the happo-cypress and the happo.io npm modules.
npm install --save-dev happo-cypress happo.io
Import the happo-cypress module in your cypress/support/commands.js file:
// At the top of cypress/support/commands.js
import 'happo-cypress';
Then, add the provided happoTask in your cypress/plugins/index.js file:
// In cypress/plugins/index.js
const happoTask = require('happo-cypress/task');
module.exports = (on, config) => {
on('task', happoTask);
};
Add a .happo.js file with some minimal/required configuration:
// .happo.js
const { RemoteBrowserTarget } = require('happo.io');
module.exports = {
apiKey: <your api key>,
apiSecret: <your api secret>,
targets: {
chrome: new RemoteBrowserTarget('chrome', {
viewport: '1024x768',
}),
},
};
See https://github.com/happo/happo.io#targets for more configuration options.
NOTE: For security reasons, you'll most likely want to pass in apiKey and
apiSecret via environment variables:
// .happo.js
module.exports = {
apiKey: process.env.HAPPO_API_KEY,
apiSecret: process.env.HAPPO_API_SECRET,
// ... more config
};
To record Happo screenshots in your test suite, use happoScreenshot:
describe('Home page', function() {
it('loads properly', function() {
cy.visit('/');
cy.get('.header').happoScreenshot();
});
});
Happo focuses more on component screenshots as opposed to full-page
screenshots. Because of that, you always need to select a child before you
call happoScreenshot. If you still need a full-page screenshot you can use
the <body> element:
cy.get('body').happoScreenshot();
Happo identifies screenshots by component and variant. By default, the
component name and variant are inferred from the current test case. If you want
more control, you can provide these in an options argument:
// Full control, pass in both component and variant:
cy.get('.header').happoScreenshot({ component: 'Header', variant: 'large' });
// Control the component name, but let variant be auto-assigned
cy.get('.footer').happoScreenshot({ component: 'Footer' });
// Control variant, but let component name be inferred
cy.get('.footer').happoScreenshot({ variant: 'dark' });
// No control, infer component and variant from current test
cy.get('.footer').happoScreenshot();
If you run the test suite in a CI environment, the happo-cypress module will
do its best to auto-detect your environment and adapt its behavior accordingly:
To get the results of the Happo jobs back to your PRs/commits, you need to
install and configure the Happo GitHub app. Instructions are available in the
happo.io
README.
Happo auto-detects the following CI environments:
If you are using a different CI service, you'll have to set a few environment variables before invoking the test suite:
HAPPO_PREVIOUS_SHA the commit sha that the branch/PR is based on (usually a
commit on master). Only set this for PR builds.HAPPO_CURRENT_SHA the sha of the commit currently under test. Always set this.HAPPO_BASE_BRANCH the default/base branch you use. Defaults to "master", so
you only need to set this if you are using a different base branch.HAPPO_CHANGE_URL a url to the PR/commit. Optional.We're here to help — send an email to support@happo.io and we'll assist you.
The happo-cypress module will disable itself if it can't detect any api
tokens (apiKey and apiSecret in config). Check to make sure your
.happo.js config is properly set up. There might also be more information in
the console logs from Cypress. Look for lines starting with [HAPPO].
During test suite execution, Happo will only record information. All screenshots are taken asynchronously outside of the test run. This means that your test suite will finish sooner than the Happo job is done. To follow along the progress, look for a url logged by Happo:
[HAPPO] https://happo.io/a/284/async-reports/34
Styles and assets are collected automatically during your test suite. If you notice styles/images/fonts etc are missing, one of a few things might have happened:
#start-page .header { color: red } and screenshoot
.header, the red color will be missing. This is because Happo only sees the
.header element, never the surrounding page.happo-cypress collects styles and assets. Reach
out to support@happo.io and we'll triage.FAQs
A Happo integration with Cypress.io
The npm package happo-cypress receives a total of 4,062 weekly downloads. As such, happo-cypress popularity was classified as popular.
We found that happo-cypress demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.