Page Object Model in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test using Page Object Model?

Given the following Page Object and test code, what will be the test result?

Cypress

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

describe('Login Test', () => {
  it('logs in with valid credentials', () => {
    const login = new LoginPage()
    login.visit()
    login.fillUsername('user1')
    login.fillPassword('pass1')
    login.submit()
    cy.url().should('include', '/dashboard')
  })
})

A Test fails because cy.url() assertion is missing parentheses and throws a syntax error.

B Test fails because the selector '#username' is invalid and causes a timeout error.

C Test fails because the submit button selector is incorrect and click() does nothing.

D Test passes because the Page Object methods correctly interact with the page elements and URL assertion matches after login.

💡 Hint

Check if the selectors match typical HTML input IDs and if the assertion syntax is correct.

The Page Object methods use valid selectors and Cypress commands. The test visits the login page, fills username and password, clicks submit, and asserts the URL includes '/dashboard'. This matches expected behavior, so the test passes.

❓ locator

intermediate

Which locator is best practice for Page Object Model in Cypress?

Choose the best locator strategy for selecting a login button in a Page Object class.

A cy.get('button#loginBtn')

B cy.get('button').contains('Login')

C cy.get('[data-cy=login-button]')

D cy.get('button:nth-child(3)')

💡 Hint

Consider maintainability and stability of selectors when the UI changes.

Using a custom data attribute like data-cy is best practice because it is stable and does not depend on styling or text changes. IDs can change, text can vary, and nth-child is fragile.

❓ assertion

advanced

Which assertion correctly verifies a success message after login?

Given a Page Object method that returns the success message element, which assertion is correct?

Cypress

class DashboardPage {
  getSuccessMessage() {
    return cy.get('.success-msg')
  }
}

const dashboard = new DashboardPage()
dashboard.getSuccessMessage()

A dashboard.getSuccessMessage().should('have.text', 'Login successful')

B dashboard.getSuccessMessage().should('contain.text', 'Login successful')

C dashboard.getSuccessMessage().should('include.text', 'Login successful')

D dashboard.getSuccessMessage().should('contain', 'Login successful')

💡 Hint

Check Cypress assertion syntax for partial text matching.

contain.text checks if the element's text includes the given substring. have.text requires exact match. include.text is invalid syntax. contain works but is less specific than contain.text.

🔧 Debug

advanced

Why does this Page Object test fail with 'Timed out retrying' error?

Analyze the code and identify the cause of the failure.

Cypress

class ProfilePage {
  getSaveButton() {
    return cy.get('.btn-save')
  }
}

describe('Profile update', () => {
  it('saves profile changes', () => {
    const profile = new ProfilePage()
    profile.getSaveButton().click()
    cy.contains('Profile saved').should('be.visible')
  })
})

A The selector '.btn-save' does not exist on the page, causing cy.get() to time out.

B The click() command is missing parentheses, so the button is not clicked.

C The cy.contains() command is used incorrectly and should be cy.get().contains().

D The assertion 'should(be.visible)' is missing quotes around 'be.visible'.

💡 Hint

Check if the element targeted by the selector is present on the page.

If the selector '.btn-save' does not match any element, Cypress will retry until timeout. The other options have correct syntax: click() is called properly, 'be.visible' is quoted, and cy.contains() is valid.

❓ framework

expert

How to implement reusable login with Page Object Model in Cypress for multiple tests?

You want to reuse login steps across many tests using Page Object Model. Which approach is best?

A Create a LoginPage class with login() method and call it inside a beforeEach() hook in test files.

B Write login steps directly inside each test without Page Object to avoid abstraction overhead.

C Use Cypress commands (Cypress.Commands.add) to define login globally and call it in tests without Page Object.

D Create a separate login.spec.js test and run it before other tests to ensure login is done.

💡 Hint

Think about maintainability and reusability with Page Object Model and Cypress hooks.

Using a LoginPage class with a login() method encapsulates login steps. Calling it in beforeEach() ensures login runs before each test, promoting reuse and clarity. Writing login steps in each test duplicates code. Cypress commands are useful but separate from Page Object. Running a separate login test does not share state.