How to pass locator as parameter in cypress?

Question

I wonder if it is possible to pass locators as a parameter to make my function reusable. I tried to do it myself but I am getting "undefined" instead of working test. Cypress error: cy.click() failed because it requires a DOM element. The subject received was:

undefined

My code:

 Cypress.Commands.add(
  "commandName",
  (locator, chartValue1) => {
    const chartValues = [150, 250, 350, 450, 550, 750, 900];
    for (const value of chartValues) {
      locator.click(value, chartValue1).then(() => {
        mainElementsPage
          .mainSideBarHeader()
          .should("not.include.text", "(pon.)")
          .should("not.include.text", "(wt.)")
          .should("not.include.text", "(śr.)");
      });
    }
  }
);

I am using this command in test:

    it("should do something", () => {
    cy.commandName(mainElementsPage.chartRect(), 200);
  });

mainElementsPage content:

class mainElementsPage {

  chartRect() {
    return cy.get("#chart-grid-rect");
  }
}

export default mainElementsPage;

locator in line3 and locator in line6 - this is the parameter. As the attribute, I want to use the correct one in `cy.commandName(mainElementsPage.chartRect(), 200);` — wojnarto, May 24 '22 at 09:31
Assuming `mainElementsPage.chartRect()` returns a locator string, Do you get this locator string in your test where you have written the `cy.commandName()` ? Try logging that. — Alapan Das, May 24 '22 at 09:46
Documentations says that Cypress.Command.add accepts only: "Boolean, String or Array" - so yea, probably it is not possible to pass locator as an argument. — wojnarto, May 24 '22 at 09:58

score 2 · Answer 1 · answered May 24 '22 at 10:45

It looks like you want to make a child command.

Whatever precedes your custom command is passed in as subject (equivalent to locator)

Cypress.Commands.add("commandName", {prevSubject: true}, 
  (subject, chartValue1) => {
    const chartValues = [150, 250, 350, 450, 550, 750, 900];
    for (const value of chartValues) {
      subject.click(value, chartValue1).then(() => {
        mainElementsPage.mainSideBarHeader()
          .should("not.include.text", "(pon.)")
          .should("not.include.text", "(wt.)")
          .should("not.include.text", "(śr.)");
      });
    }
  }
)


cy.get("#chart-grid-rect").commandName(200);

// or

mainElementsPage.chartRect().commandName(200);

class MainElementsPage {

  chartRect() {
    return cy.get("#chart-grid-rect");
  }
}

export default new MainElementsPage;   // note - new keyword here

score 1 · Answer 2 · answered May 24 '22 at 10:21

To make sure you you can use mainElementsPage you have to first import this file into your test like this:

import mainElementsPage from '../<some path>/mainElementsPage.js'

Then you have to create a object for this, like

const mainElements = new mainElementsPage();

Then you can use it as:

mainElements.chartRect()

Mikhail Bolotov · Answer 3 · 2022-05-24T11:32:54.830

In Cypress, it's impossible to have 2 active command chains simultaneously. So you cannot pass a command chain into another command ( including a custom command as you do). So I see 4 different ways of how you can fix the problem:

Use a plain function instead of custom command. So you will be able to pass a chain from your POM object.
Return a string locator instead of a chain from your POM object
Use a child command and chain your logic (see @Fody's answer).
Pass a function reference pointing to your POM object function and call this function inside the custom command (see @wojnarto' answer).

score 1 · Accepted Answer · answered May 24 '22 at 11:07

I went this way:

 Cypress.Commands.add(
  "commandName",
  (locator, chartValue1) => {
    const chartValues = [150, 250, 350, 450, 550, 750, 900];
    for (const value of chartValues) {
      locator()
      .click(value, chartValue1).then(() => {
        mainElementsPage
          .mainSideBarHeader()
          .should("not.include.text", "(pon.)")
          .should("not.include.text", "(wt.)")
          .should("not.include.text", "(śr.)");
      });
    }
  }
);

And in test it looks:

it("should do something", () => {
    cy.commandName(mainElementsPage.chartRect, 200);
  });

So the thing was about add () to the locator in Cypress.Commands.add() and use locator as string in the test.

How to pass locator as parameter in cypress?

4 Answers4