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.

Practice

1. What is the main purpose of integrating Percy with Cypress tests?

easy

A. To speed up test execution time

B. To catch visual bugs by taking screenshots during tests

C. To generate test data automatically

D. To write unit tests for backend APIs

Solution

1. Step 1: Understand Percy's role in testing

   Percy is used to capture screenshots during tests to detect visual changes.

2. Step 2: Compare options with Percy's purpose

   Only To catch visual bugs by taking screenshots during tests matches Percy's function of catching visual bugs via screenshots.

3. Final Answer:

   To catch visual bugs by taking screenshots during tests -> Option B

4. Quick Check:

   Percy purpose = Visual bug detection [OK]

Hint: Percy = visual snapshots during tests [OK]

Common Mistakes:

• Thinking Percy speeds up tests
• Confusing Percy with test data tools
• Assuming Percy writes backend tests

2. Which of the following is the correct syntax to take a Percy snapshot in a Cypress test?

easy

A. percy.cySnapshot('Homepage')

B. cy.snapshotPercy('Homepage')

C. cy.percySnapshot('Homepage')

D. cy.takePercySnapshot('Homepage')

Solution

1. Step 1: Recall Percy snapshot command syntax

   The correct command is cy.percySnapshot('name') to capture snapshots.

2. Step 2: Match options with correct syntax

   Only cy.percySnapshot('Homepage') matches the exact syntax cy.percySnapshot('Homepage').

3. Final Answer:

   cy.percySnapshot('Homepage') -> Option C

4. Quick Check:

   Correct Percy command = cy.percySnapshot() [OK]

Hint: Look for exact cy.percySnapshot() syntax [OK]

Common Mistakes:

• Swapping method and object order
• Adding extra words like 'take'
• Using wrong method names

3. Given this Cypress test snippet with Percy integration:

describe('Visual test', () => {
  it('checks homepage', () => {
    cy.visit('/')
    cy.percySnapshot('Homepage loaded')
    cy.get('#login').click()
    cy.percySnapshot('Login clicked')
  })
})

How many Percy snapshots will be captured during this test run?

medium

A. 1

B. 3

C. 0

D. 2

Solution

1. Step 1: Count cy.percySnapshot calls in the test

   There are two calls: one after visiting homepage, one after clicking login.

2. Step 2: Confirm each call triggers a snapshot

   Each cy.percySnapshot() call captures one snapshot, so total is 2.

3. Final Answer:

   2 -> Option D

4. Quick Check:

   Number of snapshots = 2 [OK]

Hint: Count cy.percySnapshot() calls in test [OK]

Common Mistakes:

• Counting only one snapshot
• Assuming snapshots auto-capture without calls
• Confusing clicks with snapshots

4. You wrote this Cypress test with Percy snapshot:

it('checks page', () => {
  cy.visit('/page')
  cy.percySnapshot()
})

But Percy dashboard shows no snapshots. What is the likely problem?

medium

A. Missing snapshot name argument in cy.percySnapshot()

B. cy.visit() must be called after cy.percySnapshot()

C. Percy snapshots only work on mobile viewport

D. You must call cy.percySnapshot() twice per test

Solution

1. Step 1: Check cy.percySnapshot usage

   The cy.percySnapshot() command requires a name string argument to identify the snapshot.

2. Step 2: Identify missing argument issue

   Since no name is given, Percy does not capture or upload the snapshot.

3. Final Answer:

   Missing snapshot name argument in cy.percySnapshot() -> Option A

4. Quick Check:

   Snapshot name required = true [OK]

Hint: Always provide a name string to cy.percySnapshot() [OK]

Common Mistakes:

• Thinking visit order matters
• Believing Percy only works on mobile
• Assuming multiple snapshots are mandatory

5. You want to test a form with Percy snapshots at three steps: before filling, after filling, and after submission. Which code snippet correctly integrates Percy snapshots in Cypress?

hard

A. cy.visit('/form')
cy.percySnapshot('Before filling')
cy.get('#input').type('data')
cy.percySnapshot('After filling')
cy.get('#submit').click()
cy.percySnapshot('After submission')

B. cy.visit('/form')
cy.percySnapshot()
cy.get('#input').type('data')
cy.percySnapshot()
cy.get('#submit').click()
cy.percySnapshot()

C. cy.visit('/form')
cy.get('#input').type('data')
cy.percySnapshot('After filling')
cy.get('#submit').click()

D. cy.visit('/form')
cy.get('#submit').click()
cy.percySnapshot('After submission')

Solution

1. Step 1: Identify required Percy snapshots

   Snapshots needed at three steps: before filling, after filling, after submission.

2. Step 2: Check which snippet has all three snapshots with names

   Only cy.visit('/form') cy.percySnapshot('Before filling') cy.get('#input').type('data') cy.percySnapshot('After filling') cy.get('#submit').click() cy.percySnapshot('After submission') has three named cy.percySnapshot() calls at correct steps.

3. Final Answer:

   Code snippet with three named Percy snapshots at correct steps -> Option A

4. Quick Check:

   Three named snapshots = cy.visit('/form') cy.percySnapshot('Before filling') cy.get('#input').type('data') cy.percySnapshot('After filling') cy.get('#submit').click() cy.percySnapshot('After submission') [OK]

Hint: Name each snapshot and place at correct test steps [OK]

Common Mistakes:

• Omitting snapshot names
• Missing snapshots at required steps
• Calling snapshots before visit