Visual regression testing concept in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to take a screenshot for visual regression testing.

Cypress

cy.visit('https://example.com')
cy.[1]('homepage')

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

Areload

Btype

Cclick

Dscreenshot

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'click' instead of 'screenshot' will not capture the page image.

Using 'type' or 'reload' does not take screenshots.

The screenshot command captures the current page view for visual regression testing.

2fill in blank

medium

Complete the code to compare the current screenshot with the baseline image.

Cypress

cy.matchImageSnapshot([1])

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

A'homepage'

B'homepage.png'

C'baseline.png'

D'compare'

Attempts:

3 left

💡 Hint

Common Mistakes

Including file extensions causes errors.

Using unrelated strings will not match the correct snapshot.

The matchImageSnapshot function takes a name string to identify the snapshot, usually without file extension.

3fill in blank

hard

Fix the error in the code to properly set the viewport size for visual regression testing.

Cypress

cy.viewport([1], 800)

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

A1024

Bwidth

C'1024'

D'1024px'

Attempts:

3 left

💡 Hint

Common Mistakes

Using strings with units like '1024px' causes errors.

Using variable names instead of numbers is incorrect here.

The viewport width must be a number, not a string.

4fill in blank

hard

Fill both blanks to create a dictionary of viewport sizes and filter only those wider than 500 pixels.

Cypress

const viewports = { 'small': 320, 'medium': 768, 'large': 1024 };
const filtered = Object.entries(viewports).filter(([[1], [2]]) => [2] > 500);

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

Akey

Bvalue

Cwidth

Dsize

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names that do not match the entries structure.

Comparing the key instead of the value.

When filtering entries, the first element is the key and the second is the value.

5fill in blank

hard

Fill all three blanks to create a test that visits a page, sets viewport, and takes a snapshot named 'homepage'.

Cypress

describe('Visual test', () => {
  it('checks homepage', () => {
    cy.visit([1])
    cy.viewport([2], 800)
    cy.screenshot([3])
  })
})

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

A'https://example.com'

B1024

C'homepage'

D'/home'

Attempts:

3 left

💡 Hint

Common Mistakes

Using partial URLs or paths in visit causes errors.

Passing viewport width as a string causes errors.

Not naming the screenshot properly.

The test visits the full URL, sets viewport width as a number, and names the screenshot 'homepage'.