Percy integration basics in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Percy snapshot command output

What is the output result of running this Cypress test code with Percy integration?

Cypress

describe('Visual test', () => {
  it('takes a Percy snapshot', () => {
    cy.visit('https://example.com')
    cy.percySnapshot('Homepage')
  })
})

A Test passes and a Percy snapshot named 'Homepage' is sent to Percy service

B Test fails with 'cy.percySnapshot is not a function' error

C Test passes but no snapshot is sent to Percy

D Test fails with a timeout error on cy.visit

💡 Hint

Check if Percy plugin is properly installed and configured in Cypress.

When Percy is correctly integrated, cy.percySnapshot sends a snapshot to Percy service and the test passes.

❓ assertion

intermediate

Correct assertion for Percy snapshot existence

Which assertion correctly verifies that a Percy snapshot was created during a Cypress test run?

Cypress

cy.percySnapshot('Login Page')
// What assertion verifies snapshot creation?

A cy.contains('Snapshot created').should('be.visible')

B No direct Cypress assertion; snapshot success is verified in Percy dashboard

C cy.get('.percy-snapshot').should('exist')

D cy.percySnapshot('Login Page').should('be.called')

💡 Hint

Percy snapshots are sent to an external service, not visible in the DOM.

Percy snapshots are sent to the Percy service and not directly visible in the Cypress test DOM, so assertions in Cypress cannot verify snapshot creation.

🔧 Debug

advanced

Debugging Percy snapshot failure in Cypress

You run a Cypress test with cy.percySnapshot but no snapshots appear in Percy dashboard. What is the most likely cause?

A The tested page URL is invalid causing cy.visit to fail

B cy.percySnapshot command is misspelled as cy.percySnapShot

C Percy token environment variable is missing or incorrect

D The test does not include any cy.visit command

💡 Hint

Check environment variables and Percy configuration.

Without a valid Percy token, snapshots are not uploaded to Percy service, so they won't appear in the dashboard.

🧠 Conceptual

advanced

Understanding Percy snapshot timing in Cypress tests

When is the best time to call cy.percySnapshot in a Cypress test to capture the correct visual state?

A After all UI elements have loaded and any animations have completed

B Before cy.visit to capture the previous page state

C Immediately after cy.visit, before any UI changes or waits

D At the very end of the test, after cy.clearCookies

💡 Hint

Think about when the page is fully ready visually.

To capture the correct visual state, wait for the page to fully load and animations to finish before taking a Percy snapshot.

❓ framework

expert

Configuring Percy with Cypress in CI environment

Which configuration step is essential to ensure Percy snapshots are uploaded during CI runs with Cypress?

A Install Percy CLI globally on the CI machine only

B Disable all Cypress retries to avoid duplicate snapshots

C Run Cypress tests with --headless flag only

D Set the PERCY_TOKEN environment variable in the CI environment

💡 Hint

Think about authentication with Percy service in CI.

The PERCY_TOKEN authenticates the CI environment to upload snapshots to Percy. Without it, uploads fail silently.