Percy integration basics in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Percy commands in Cypress.

Cypress

import '[1]';

Drag options to blanks, or click blank then click option'

Acypress-percy-plugin

Bcypress-percy

Cpercy-cypress

D@percy/cypress

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect package names like 'cypress-percy' or 'percy-cypress'.

Forgetting to import Percy commands before using them.

You need to import @percy/cypress to enable Percy commands in Cypress tests.

2fill in blank

medium

Complete the code to take a Percy snapshot named 'Homepage'.

Cypress

cy.[1]('Homepage');

Drag options to blanks, or click blank then click option'

ApercySnapshot

Bsnapshot

CtakeSnapshot

Dcapture

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic names like 'snapshot' or 'capture' which are not valid Percy commands.

Misspelling the command name.

The correct command to take a Percy snapshot in Cypress is percySnapshot.

3fill in blank

hard

Fix the error in the code to correctly initialize Percy in Cypress support file.

Cypress

// In cypress/support/e2e.js
import '[1]';

Drag options to blanks, or click blank then click option'

Acypress-percy/support

Bpercy/cypress

C@percy/cypress

D@percy/cypress/support

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect import paths like 'percy/cypress' or 'cypress-percy/support'.

Importing from a non-existent subpath.

You should import @percy/cypress in the support file to initialize Percy commands properly.

4fill in blank

hard

Fill both blanks to configure Percy token and enable Percy in Cypress environment variables.

Cypress

Cypress.env('[1]', '[2]');

Drag options to blanks, or click blank then click option'

APERCY_TOKEN

BpercyToken

CPERCY_PROJECT

Dpercy_enabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase or incorrect keys like 'percyToken' as the key.

Confusing project name with token.

The environment variable key for Percy token is PERCY_TOKEN. The value should be your actual Percy token string, here represented as percyToken.

5fill in blank

hard

Fill all three blanks to write a test that visits the homepage, waits for content, and takes a Percy snapshot named 'Home Page'.

Cypress

describe('Visual test', () => {
  it('checks homepage', () => {
    cy.[1]('/');
    cy.[2](1000);
    cy.[3]('Home Page');
  });
});

Drag options to blanks, or click blank then click option'

Avisit

Bwait

CpercySnapshot

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'wait' to pause.

Using 'snapshot' instead of 'percySnapshot'.

The test visits the homepage with visit, waits 1 second with wait, then takes a Percy snapshot with percySnapshot.

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