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.

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