Cypress architecture (runs in browser) - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to start a Cypress test that runs in the browser.

Cypress

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.[1]('https://example.cypress.io')
  })
})

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

Avisit

Bclick

Ctype

Dwait

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.click() instead of cy.visit() to open a page.

Trying to type a URL with cy.type(), which is for input fields.

The cy.visit() command loads a web page in the browser where Cypress runs the test.

2fill in blank

medium

Complete the code to select an element by its CSS class in Cypress.

Cypress

cy.[1]('.btn-primary').click()

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

Aget

Bcontains

Cfind

Dselect

Attempts:

3 left

💡 Hint

Common Mistakes

Using cy.contains() which looks for text, not selectors.

Using cy.select() which is for dropdowns.

The cy.get() command selects elements by CSS selectors in the browser.

3fill in blank

hard

Fix the error in the Cypress command to wait for 2 seconds.

Cypress

cy.[1](2000)

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

Adelay

Bpause

Csleep

Dwait

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent commands like cy.sleep() or cy.delay().

Using cy.pause() which pauses for manual control, not time.

The correct Cypress command to pause test execution is cy.wait() with milliseconds.

4fill in blank

hard

Fill both blanks to assert that an element contains specific text in Cypress.

Cypress

cy.get('.message').[1]('contain', 'Hello World').[2]('be.visible')

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

Ashould

Bexpect

Cassert

Dverify

Attempts:

3 left

💡 Hint

Common Mistakes

Using expect() or assert() directly on cy.get() without wrapping.

Using verify() which is not a Cypress command.

In Cypress, should() is used to make assertions about elements, such as text content and visibility.

5fill in blank

hard

Fill all three blanks to create a custom command in Cypress that logs in a user.

Cypress

Cypress.Commands.[1]('login', (email, password) => {
  cy.get('[2]').type(email)
  cy.get('[3]').type(password)
})

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

Aadd

B#email-input

C#password-input

Dcreate

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'create' instead of 'add' to define commands.

Using class selectors instead of ID selectors for inputs.

Use Cypress.Commands.add() to create custom commands. The selectors #email-input and #password-input target input fields by their IDs.