Page Object Model in Cypress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a class for the login page in Cypress.

Cypress

class LoginPage {
  visit() {
    cy.[1]('https://example.com/login')
  }
}

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

AvisitPage

BgoTo

Cvisit

Dnavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent Cypress command like cy.goTo or cy.navigate.

The cy.visit() command is used in Cypress to open a URL. The other options are not valid Cypress commands.

2fill in blank

medium

Complete the code to select the username input field using a CSS selector.

Cypress

getUsernameField() {
  return cy.get('[1]')
}

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

A#username

B.username

Cinput[name='user']

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class selector when the element has an ID.

Using a tag name without attribute selectors.

The ID selector #username is the most specific and common way to select the username input. The other options may not match the element correctly.

3fill in blank

hard

Fix the error in the method that types the password in the password field.

Cypress

typePassword(password) {
  cy.get('#password').[1](password)
}

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

AtypePassword

Benter

Cinput

Dtype

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent commands like typePassword or enter.

The correct Cypress command to enter text into an input field is type(). Other options are not valid Cypress commands.

4fill in blank

hard

Fill both blanks to create a method that clicks the login button and asserts the URL contains '/dashboard'.

Cypress

clickLogin() {
  cy.get('[1]').click()
  cy.url().[2]('include', '/dashboard')
}

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

A#loginBtn

Bshould

Cexpect

D.login-button

Attempts:

3 left

💡 Hint

Common Mistakes

Using a class selector when the button has an ID.

Using expect instead of should for Cypress assertions.

The login button is selected by its ID #loginBtn. The assertion uses should('include', ...) to check the URL contains '/dashboard'.

5fill in blank

hard

Fill all three blanks to create a test that uses the LoginPage object to visit, enter credentials, and click login.

Cypress

const loginPage = new LoginPage()
loginPage.[1]()
loginPage.getUsernameField().[2]('user1')
loginPage.typePassword('pass123')
loginPage.[3]()

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

Avisit

Btype

CclickLogin

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent method like submit.

Forgetting to call visit before interacting with the page.

The test first calls visit() to open the page, then types the username with type(), and finally clicks login with clickLogin(). The submit method does not exist here.