Percy integration basics in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Percy in the context of Cypress testing?

Percy is a visual testing tool that integrates with Cypress to capture screenshots and compare them over time to detect visual changes in your web application.

beginner

How do you install Percy in a Cypress project?

You install Percy by running <code>npm install --save-dev @percy/cypress</code> and then adding <code>import '@percy/cypress'</code> in your Cypress support file.

beginner

What command do you use to start a Percy visual test in a Cypress test?

You use cy.percySnapshot('snapshot name') inside your Cypress test to take a visual snapshot for Percy to compare.

beginner

Why is it important to give descriptive names to Percy snapshots?

Descriptive names help you easily identify which page or component the snapshot represents when reviewing visual changes in the Percy dashboard.

intermediate

What environment variable must be set to authenticate Percy in CI?

You must set the PERCY_TOKEN environment variable with your Percy project token to authenticate and upload snapshots during Continuous Integration.

Which command installs Percy for Cypress?

A npm install --save-dev @percy/cypress

B npm install --save-dev cypress-percy

C npm install percy-cypress

D npm install --save-dev @cypress/percy

The correct package name is '@percy/cypress' installed with npm using --save-dev.

How do you take a visual snapshot in a Cypress test using Percy?

A percy.snapshot('name')

B cy.snapshot('name')

C cy.percySnapshot('name')

D cy.takeSnapshot('name')

The correct command is cy.percySnapshot('name') to capture a Percy snapshot.

Where should you import '@percy/cypress' in your Cypress project?

A In the test file

B In the Cypress support file

C In the Cypress plugins file

D In the package.json

You import '@percy/cypress' in the Cypress support file to make Percy commands available globally.

What does Percy compare to detect visual changes?

A HTML code differences

B JavaScript errors

C CSS stylesheets

D Screenshots over time

Percy compares screenshots taken at different times to find visual differences.

What must be set in CI to upload Percy snapshots?

A PERCY_TOKEN

B CYPRESS_TOKEN

C PERFORMANCE_TOKEN

D PERCY_API_KEY

The environment variable PERCY_TOKEN must be set with your Percy project token.

Explain how to integrate Percy with Cypress for visual testing.

Think about installation, setup, usage, and authentication.

Describe why visual testing with Percy is useful in Cypress tests.

Consider the benefits of catching visual differences early.