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.