Component testing vs E2E in Cypress - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a Cypress component test for a Button component.

Cypress

describe('Button component', () => {
  it('renders correctly', () => {
    cy.[1](<Button />)
  })
})

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

Aget

Bvisit

Cmount

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.visit() which is for page navigation, not component rendering.

In Cypress component testing, cy.mount() is used to render the component for testing.

2fill in blank

medium

Complete the code to start an E2E test visiting the home page.

Cypress

describe('Home page', () => {
  it('loads successfully', () => {
    cy.[1]('/')
  })
})

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

Avisit

Bmount

Cclick

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.mount() which is for component tests, not E2E page visits.

In Cypress E2E tests, cy.visit() is used to open a web page URL.

3fill in blank

hard

Fix the error in the E2E test code to check if a button with text 'Submit' exists.

Cypress

cy.get('button').[1]('Submit')

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

Avisit

Bcontains

Cmount

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.get('button').click('Submit') which is invalid syntax.

The contains command finds an element with specific text content.

4fill in blank

hard

Fill both blanks to create a component test that mounts a component and checks if it contains text 'Hello'.

Cypress

cy.[1](<Greeting />)
cy.get('div').[2]('Hello')

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

Amount

Bclick

Ccontains

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.visit() in component tests or cy.get().click() instead of contains.

First, mount renders the component. Then, contains checks for text inside an element.

5fill in blank

hard

Fill all three blanks to write an E2E test that visits the login page, types username, and clicks the submit button.

Cypress

cy.[1]('/login')
cy.get('input[name="username"]').[2]('user123')
cy.get('button[type="submit"]').[3]()

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

Amount

Btype

Cclick

Dvisit

Attempts:

3 left

💡 Hint

Common Mistakes

Using mount in E2E tests or missing the click action on the button.

Use visit to open the page, type to enter text, and click to press the button.