App Actions pattern in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the test result of this Cypress App Action?

Consider this Cypress App Action that logs in a user and verifies the dashboard heading. What will be the test execution result?

Cypress

class LoginActions {
  login(username, password) {
    cy.get('#username').type(username);
    cy.get('#password').type(password);
    cy.get('button[type=submit]').click();
    return this;
  }
  verifyDashboard() {
    cy.get('h1').should('contain.text', 'Dashboard');
    return this;
  }
}

const login = new LoginActions();

describe('User Login Test', () => {
  it('logs in and verifies dashboard', () => {
    cy.visit('/login');
    login.login('user1', 'pass123').verifyDashboard();
  });
});

A Test fails because the login method does not return a promise to chain verifyDashboard.

B Test fails because cy.get('#username') selector is invalid.

C Test fails due to missing cy.visit() before login action.

D Test passes because the dashboard heading is correctly asserted after login.

💡 Hint

Check if the methods return 'this' to allow chaining and if the selectors are valid.

The login method types username and password, clicks submit, and returns 'this' allowing chaining. The verifyDashboard method asserts the heading text. The test visits the login page first, so all steps are valid and the test passes.

❓ assertion

intermediate

Which assertion correctly verifies a success message in an App Action?

You want to create an App Action method that checks if a success alert with text 'Saved successfully' is visible. Which assertion is correct?

Cypress

class SaveActions {
  verifySuccess() {
    // Which assertion is correct here?
  }
}

A cy.get('.alert-success').should('be.visible').and('contain.text', 'Saved successfully');

B cy.get('.alert-success').should('be.visible').and('have.value', 'Saved successfully');

C cy.get('.alert-success').should('have.text', 'Saved successfully').and('be.visible');

D cy.get('.alert-success').should('contain', 'Saved successfully').and('visible');

💡 Hint

Use correct chaining of Cypress assertions and valid assertion names.

Option A correctly uses 'should' with 'be.visible' and 'contain.text' chained. Option A uses invalid 'visible' assertion. Option A uses 'have.text' which requires exact text match and might fail if extra spaces exist. Option A uses 'have.value' which is for input elements, not alerts.

🔧 Debug

advanced

Why does this App Action fail to click the submit button?

This App Action method is supposed to click a submit button but fails with 'Timed out retrying' error. What is the likely cause?

Cypress

class FormActions {
  submit() {
    cy.get('button.submit').click();
  }
}

// Test code
const form = new FormActions();
form.submit();

A The selector 'button.submit' does not match any element because the button uses an ID, not a class.

B The click() command is missing a wait() before it to ensure the button is visible.

C The submit() method does not return 'this' so chaining fails.

D The test is missing cy.visit() to load the page before calling submit().

💡 Hint

Check if the selector matches the actual button element in the HTML.

The error 'Timed out retrying' usually means the selector did not find any element. If the button uses an ID like '#submit' but the selector uses 'button.submit' (class), it won't find it. The other options do not cause this specific error.

❓ framework

advanced

Which App Actions pattern improves test readability and reuse in Cypress?

You want to organize your Cypress tests using the App Actions pattern. Which approach best follows this pattern?

A Use global functions without returning anything to perform actions.

B Write all Cypress commands directly inside test cases without abstraction.

C Create classes with methods for user actions that return 'this' to allow chaining in tests.

D Put all selectors and commands inside Cypress custom commands only.

💡 Hint

Think about how to make tests readable and maintainable with chaining.

The App Actions pattern uses classes with methods representing user actions that return 'this' to enable chaining. This improves readability and reuse. Writing commands directly or using global functions without chaining reduces clarity. Custom commands are useful but do not replace the App Actions pattern.

🧠 Conceptual

expert

What is the main benefit of using the App Actions pattern in Cypress tests?

Why do testers prefer the App Actions pattern when writing Cypress tests for complex applications?

A It automatically generates test reports with screenshots and logs.

B It centralizes user interactions into reusable methods, improving test readability and reducing duplication.

C It replaces the need for assertions by validating UI elements implicitly.

D It allows tests to run faster by skipping unnecessary commands.

💡 Hint

Consider how organizing actions helps maintain tests as apps grow.

The App Actions pattern groups user interactions into reusable methods, making tests easier to read and maintain. It does not generate reports, replace assertions, or speed up tests by skipping commands.