Utilizing multiple page objects within a single method in Cypress JS

Question

Utilizing multiple page objects within a single method in Cypress JS

I have been grappling with the concept of utilizing multiple page objects within a single method. I haven't been able to come up with a suitable approach for implementing this logic. For instance, consider the following methods in my page object named "usersTable":

 get rolesAndStatusMenu() {
    return cy.get("#menu- > .MuiPaper-root > .MuiMenu-list>li");
  }

  get usersPartialRow() {
    return cy.get(".MuiTableBody-root>tr>td");
  }

settings(options: string) {
    return cy
      .get(
        "[style='position: fixed; z-index: 1300; inset: 0px;'] > .MuiPaper-root > .MuiList-root",
      )
      .contains(options);
  }

  menuButton(userId: string) {
    return cy.get(`.user_${userId}>td>button`);
  }

  userRow(userId?: string) {
    const userrow = ".MuiTableBody-root>tr";

    if (userId === undefined) {
      return cy.get(userrow);
    }

    return cy.get(userrow).get(`.user_${userId}`);
  }

Previously, I utilized the userRow method in my test as shown below:

usersTable.userRow(userId).should("not.exist");

In addition, I used the userMenu and settings methods in this test:

usersTable.menuButton(userId).click();
usersTable.settings("Impersonate").click();

Now, I want to combine different methods in a single call, but I'm uncertain about how to achieve this. For example:

usersTable.userRow(userId).settings.menuButton.click()

usersTable.userRow(userId).settings.impersonate.click()

Is it possible to use methods in this manner? Any suggestions are welcome.

Update

I have another page object where I encapsulated the usersTable component, called usersPage:

    import { UsersTable } from "../components/UsersTable ";
    
    export class Users {
      visit() {
        return cy.visit("/users");
      }
      get headingText() {
        return cy.get(".MuiTypography-h5");
      }
      get inviteUserBtn() {
        return cy.get(".MuiGrid-root> .MuiButtonBase-root");
      }
      get inviteUserModal() {
        return cy.get(".MuiDialogContent-root");
      }
    get usersTable() {
    return new UsersTable();
  }
    }

My code now appears like this:

usersPage.usersTable.menuButton(userId).click();
usersPage.usersTable.settings("Impersonate").click();
usersPage.visit();
usersPage.usersTable.menuButton(userId).click();
usersPage.usersTable.settings("Delete").click();
usersPage.usersTable.userRow(userId).should("not.exist");

For example, I am considering creating a class inside UsersTable:

export class UsersTable {
...
}
class userTableRow {
}
**and returning it in `UsersTable` or something like that ?**

Second Update

Now I have created a class within the UsersTable file:

class UserRow {
  userRow(userId?: string) {
    const userrow = ".MuiTableBody-root>tr";
    if (userId === undefined) {
      return cy.get(userrow);
    }

    return cy.get(userrow).find(`.user_${userId}`);
  }
  get menuButton() {
    return this.userRow(`>td>button`); //I am unsure if this line is correct;
  }
  get impersonate() {
    return cy
      .get(
        "[style='position: fixed; z-index: 1300; inset: 0px;'] > .MuiPaper-root > .MuiList-root",
      )
      .contains("Impersonate");
  }
  get delete() {
    return cy
      .get(
        "[style='position: fixed; z-index: 1300; inset: 0px;'] > .MuiPaper-root > .MuiList-root",
      )
      .contains("Delete");
  }
}

To integrate this class returned in the UsersTable class:

 userRow(userId?: string) {
    const userrow = ".MuiTableBody-root>tr";

    if (userId === undefined) {
      return cy.get(userrow);
    }

    return new UserRow(userId); **// but got error, it says Expected 0 arguments, but got 1.**
  }

If I utilize the following method in the comment section:

 // get UserRow() {
  //   return new UserRow();  
  // }

I can access everything within the user but cannot use my test like this:

   usersPage.usersTable.UserRow(userId).settings.menuButton.click()

or perhaps

usersPage.usersTable.UserRow.userRow(userId).settings.menuButton.click()

But I can use it like this:

 usersPage.usersTable.UserRow.menuButton.click()

How can I define userId?: string for UserRow? The userId constantly varies and is obtained from an API within the test, making it impossible to define in advance.

javascript typescript cypress pageobjects chainable

Answer 1

Answer №1

To ensure smooth flow in class methods, it is important to remember to return this each time.

class UsersTable {

  settings(options: string) {
    cy.get(...).contains(options);
    return this                         // move on to the next method using the return value
  }

  menuButton(userId: string) {
    return cy.get(`.user_${userId}>td>button`); // unable to call another method after this one
  }

  userRow(userId?: string) {
    cy.get(userrow).get(`.user_${userId}`);
    return this;                              // move on to the next method using the return value
  }
}

This setup should work:

usersTable.userRow(userId).settings().menuButton().click()

However, if you need to access the values from the first two methods, you will need to store them in the class.

class UsersTable {

  userId: string = '';
  setting: string = '';

  settings(options: string) {
    cy.get(...).contains(options)
      .invoke('text')
      .then(text => this.setting = text)

    return this                        
  }

  menuButton() {                     
    return cy.get(`.user_${this.setting}>td>button`); 
  }

  userRow() {            
    cy.get(userrow).get(`.user_${this.userId}`)
      .invoke('text')
      .then(text => this.userId = text)

    return this;                              
  }
}

Keep in mind that this approach may lead to a loss of flexibility, as the methods become tightly coupled and are no longer independent.

Answer 2

To ensure smooth flow in class methods, it is important to remember to return this each time.

class UsersTable {

  settings(options: string) {
    cy.get(...).contains(options);
    return this                         // move on to the next method using the return value
  }

  menuButton(userId: string) {
    return cy.get(`.user_${userId}>td>button`); // unable to call another method after this one
  }

  userRow(userId?: string) {
    cy.get(userrow).get(`.user_${userId}`);
    return this;                              // move on to the next method using the return value
  }
}

This setup should work:

usersTable.userRow(userId).settings().menuButton().click()

However, if you need to access the values from the first two methods, you will need to store them in the class.

class UsersTable {

  userId: string = '';
  setting: string = '';

  settings(options: string) {
    cy.get(...).contains(options)
      .invoke('text')
      .then(text => this.setting = text)

    return this                        
  }

  menuButton() {                     
    return cy.get(`.user_${this.setting}>td>button`); 
  }

  userRow() {            
    cy.get(userrow).get(`.user_${this.userId}`)
      .invoke('text')
      .then(text => this.userId = text)

    return this;                              
  }
}

Keep in mind that this approach may lead to a loss of flexibility, as the methods become tightly coupled and are no longer independent.

Answer 3

Answer №2

In the UserTable methods, the return type is Cypress.Chainable. Therefore, to pass it to the next method, you must unwrap the result.

Additionally, the method returns the element, but the next method requires text content. So, you will also need to extract the text.

usersTable.userRow(userId)
  .then((userIdElement: JQuery<HTMLElement>) => {  // unwrap Chainable
    const text = userIdElement.text()              // extract text
    usersTable.settings(text)
  })
  .then((settingsElement: JQuery<HTMLElement>) => {  // unwrap Chainable
    const text = settingsElement.text()              // extract text
    usersTable.menuButton(text).click()
  })

If any of the elements are HTMLInputElement, use userIdElement.val() instead.

An adjustment to userRow():

class UsersTable {

  ...

  userRow(userId?: string): Cypress.Chainable<JQuery<HTMLElement>> {  
    const userrow = ".MuiTableBody-root>tr";

    if (userId === undefined) {
      return cy.get(userrow);
    }

    return cy.get(userrow)
      .find(`.user_${userId}`)  // use find instead of get
  }
}

Implementing Custom Commands instead of pageObject

Chaining is a common code pattern for Cypress commands, so it's advisable to use Custom Commands

commands.js

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject = any> {
    settings(options?: string): Chainable<JQuery<HTMLElement>>;
    menuButton(userId?: string): Chainable<JQuery<HTMLElement>>;
    userRow(userId?: string): Chainable<JQuery<HTMLElement>>;
  }
}

Cypress.Commands.add('settings', {prevSubject: 'optional'}, (subject: any, options?: string): Cypress.Chainable<JQuery<HTMLElement>>  => {
  if (options === undefined) {
    options = subject as string;
  }
  return cy.get("[style='position: fixed; z-index: 1300; inset: 0px;'] > .MuiPaper-root > .MuiList-root")
    .contains(options)
})

Cypress.Commands.add('menuButton', {prevSubject: 'optional'}, (subject: any, userId?: string): Cypress.Chainable<JQuery<HTMLElement>> => {
  if (userId === undefined) {
    userId = subject as string;
  }
  return cy.get(`.user_${userId}>td>button`);
})

Cypress.Commands.add('userRow', (userId?: string): Cypress.Chainable<JQuery<HTMLElement>> => {
  const userrow = ".MuiTableBody-root>tr";

  if (userId === undefined) {
    return cy.get(userrow);
  }

  return cy.get(userrow)
    .find(`.user_${userId}`)
})

test

it('tests with userId from userRow()', () => {
  const userId = '1'

  cy.userRow(userId)
    .settings()      // as child command, userId from previous command
    .menuButton()
    .click()
});

it('tests with userId hard-coded', () => {

  cy.settings('abc')    // as parent command, userId passed as parameter
    .menuButton()
    .click()
});

Answer 4

In the UserTable methods, the return type is Cypress.Chainable. Therefore, to pass it to the next method, you must unwrap the result.

Additionally, the method returns the element, but the next method requires text content. So, you will also need to extract the text.

usersTable.userRow(userId)
  .then((userIdElement: JQuery<HTMLElement>) => {  // unwrap Chainable
    const text = userIdElement.text()              // extract text
    usersTable.settings(text)
  })
  .then((settingsElement: JQuery<HTMLElement>) => {  // unwrap Chainable
    const text = settingsElement.text()              // extract text
    usersTable.menuButton(text).click()
  })

If any of the elements are HTMLInputElement, use userIdElement.val() instead.

An adjustment to userRow():

class UsersTable {

  ...

  userRow(userId?: string): Cypress.Chainable<JQuery<HTMLElement>> {  
    const userrow = ".MuiTableBody-root>tr";

    if (userId === undefined) {
      return cy.get(userrow);
    }

    return cy.get(userrow)
      .find(`.user_${userId}`)  // use find instead of get
  }
}

Implementing Custom Commands instead of pageObject

Chaining is a common code pattern for Cypress commands, so it's advisable to use Custom Commands

commands.js

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject = any> {
    settings(options?: string): Chainable<JQuery<HTMLElement>>;
    menuButton(userId?: string): Chainable<JQuery<HTMLElement>>;
    userRow(userId?: string): Chainable<JQuery<HTMLElement>>;
  }
}

Cypress.Commands.add('settings', {prevSubject: 'optional'}, (subject: any, options?: string): Cypress.Chainable<JQuery<HTMLElement>>  => {
  if (options === undefined) {
    options = subject as string;
  }
  return cy.get("[style='position: fixed; z-index: 1300; inset: 0px;'] > .MuiPaper-root > .MuiList-root")
    .contains(options)
})

Cypress.Commands.add('menuButton', {prevSubject: 'optional'}, (subject: any, userId?: string): Cypress.Chainable<JQuery<HTMLElement>> => {
  if (userId === undefined) {
    userId = subject as string;
  }
  return cy.get(`.user_${userId}>td>button`);
})

Cypress.Commands.add('userRow', (userId?: string): Cypress.Chainable<JQuery<HTMLElement>> => {
  const userrow = ".MuiTableBody-root>tr";

  if (userId === undefined) {
    return cy.get(userrow);
  }

  return cy.get(userrow)
    .find(`.user_${userId}`)
})

test

it('tests with userId from userRow()', () => {
  const userId = '1'

  cy.userRow(userId)
    .settings()      // as child command, userId from previous command
    .menuButton()
    .click()
});

it('tests with userId hard-coded', () => {

  cy.settings('abc')    // as parent command, userId passed as parameter
    .menuButton()
    .click()
});

Utilizing multiple page objects within a single method in Cypress JS

Answer №1

Answer №2

Implementing Custom Commands instead of pageObject

Similar questions

Adding URL path in Angular 7's .ts file

Creating a BPMN web-based designer using JavaScript

Challenge when providing particular strings in Typescript

How can I include the cypress.io baseUrl environment variable in my package.json run scripts?

Using Angular 6 HttpClient to retrieve an object of a specific class

Encountered an unexpected interpolation ({{}}) in column 3 of Data Bind RouterLink (Angular 2) that was expecting an expression

Difficulty Loading Static JavaScript File in Express.js

"Exploring the process of comparing dates using HTML, AngularJS, and Ionic

Exploring the integration of d3 in an Express application - encountering an error: document is not recognized

Error: The function initMap() is not recognized in the Google Maps API

Catching exceptions with jQuery Ajax

Jquery Error: Unable to split object

Alter text within a string situated between two distinct characters

Access the JavaScript variable in a webview and store it in an Android variable

What is the best way to utilize window.find for adjusting CSS styles?

Struggling to retrieve the value in Node.js

Optimizing jqGrid: Enhancing saveRow function to properly synchronize with editRow function

The Angularfire library encountered an issue when trying to access the 'push' property of a null object

Ways to circumvent ng switch and create a component based on type

Storing the array with the highest length in a temporary array using Javascript