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.

Practice

1. What is the main purpose of using the Page Object Model in Cypress testing?

easy

A. To write tests without any assertions

B. To avoid using selectors in tests

C. To speed up the browser loading time

D. To organize page interactions into reusable classes

Solution

1. Step 1: Understand the role of Page Object Model

   The Page Object Model (POM) organizes web page elements and actions into classes to reuse code easily.

2. Step 2: Identify the main benefit in Cypress tests

   Using POM makes tests easier to write, read, and maintain by grouping page logic separately from test logic.

3. Final Answer:

   To organize page interactions into reusable classes -> Option D

4. Quick Check:

   Page Object Model = reusable page classes [OK]

Hint: POM groups page actions into classes for reuse [OK]

Common Mistakes:

• Thinking POM speeds up browser loading
• Believing POM removes need for assertions
• Assuming POM avoids selectors entirely

2. Which of the following is the correct way to define a method inside a Cypress Page Object class to click a button with selector button.submit?

easy

A. clickSubmit() { cy.get('button.submit').click(); }

B. clickSubmit() => { cy.get('button.submit').click(); }

C. function clickSubmit() { cy.get('button.submit').click(); }

D. clickSubmit: function() { cy.get('button.submit').click(); }

Solution

1. Step 1: Recognize class method syntax in JavaScript

   Inside a class, methods are defined as methodName() { ... } without the function keyword or arrow syntax.

2. Step 2: Match the correct syntax for Cypress command

   The method should call cy.get('button.submit').click(); inside the method body.

3. Final Answer:

   clickSubmit() { cy.get('button.submit').click(); } -> Option A

4. Quick Check:

   Class method syntax = clickSubmit() { cy.get('button.submit').click(); } [OK]

Hint: Class methods use name() { } syntax, no function keyword [OK]

Common Mistakes:

• Using arrow functions inside class methods incorrectly
• Adding 'function' keyword inside class method
• Using object literal syntax inside class

3. Given this Page Object class snippet:

class LoginPage {
  visit() {
    cy.visit('/login')
  }
  enterUsername(name) {
    cy.get('#username').type(name)
  }
  enterPassword(pass) {
    cy.get('#password').type(pass)
  }
  submit() {
    cy.get('button[type=submit]').click()
  }
}

What will happen when the test calls:
const page = new LoginPage(); page.visit(); page.enterUsername('user1'); page.enterPassword('pass1'); page.submit();

medium

A. The login page loads, username and password are typed, and submit button is clicked

B. Only the login page loads, but no typing or clicking happens

C. Syntax error because methods are not async

D. The test fails because selectors are incorrect

Solution

1. Step 1: Analyze method calls in sequence

   The test creates a LoginPage object and calls methods to visit the page, type username and password, then click submit.

2. Step 2: Confirm Cypress commands are correct

   Selectors like #username, #password, and button[type=submit] are valid and commands are chained properly.

3. Final Answer:

   The login page loads, username and password are typed, and submit button is clicked -> Option A

4. Quick Check:

   Method calls execute Cypress commands in order [OK]

Hint: Methods run Cypress commands sequentially as called [OK]

Common Mistakes:

• Thinking Cypress commands need async/await
• Assuming selectors are invalid without checking
• Believing only visit() runs without chaining

4. You have this Page Object method:

login(username, password) {
  cy.get('#user').type(username)
  cy.get('#pass').type(password)
  cy.get('button.login').click()
}

But your test calls cy.visit('/login') before login(), yet fails because the username input is not found. What is the likely problem?

medium

A. The click() command must come before typing

B. The selector #user is incorrect or outdated

C. The method should use cy.find() instead of cy.get()

D. You forgot to call cy.visit() before login

Solution

1. Step 1: Identify cause of element not found error

   If the username input is not found, the selector #user might be wrong or changed on the page.

2. Step 2: Evaluate other options

   While missing cy.visit() can cause failure, the question states the failure is specifically about the username input not found, pointing to selector issue.

3. Final Answer:

   The selector #user is incorrect or outdated -> Option B

4. Quick Check:

   Element not found = wrong selector [OK]

Hint: Element not found usually means wrong selector [OK]

Common Mistakes:

• Assuming cy.find() fixes selector issues
• Thinking click() must come before typing
• Ignoring the need to visit page first

5. You want to create a Page Object for a form with multiple input fields and a submit button. Which approach best follows Cypress Page Object Model best practices?

hard

A. Use global variables for selectors and call Cypress commands directly in tests

B. Write all test steps directly inside the test without any class or methods

C. Create a class with methods for each field interaction and a submit method, using clear selectors

D. Create one method that types all fields and clicks submit without separate methods

Solution

1. Step 1: Understand POM best practices

   Best practice is to create a class that groups page elements and actions into clear, reusable methods with good selectors.

2. Step 2: Compare options

   Writing all steps in tests or using global variables reduces reusability and clarity. One big method reduces flexibility and readability.

3. Final Answer:

   Create a class with methods for each field interaction and a submit method, using clear selectors -> Option C

4. Quick Check:

   Clear methods + selectors = POM best practice [OK]

Hint: Use classes with clear methods for each page action [OK]

Common Mistakes:

• Putting all steps directly in tests
• Using global selectors without encapsulation
• Combining all actions into one big method