3

I know Cypress team encourage to use actions instead of page objects, so which would be the best choice when having to reuse an element?

I don't want to be updating a selector in many places so I went for this option:

Cypress.Commands.add('getStartDateInput',() => cy.get('input[t-selector="startDate"]');

So If I have to interact with this element in some other places I will just call this new action. Even though this is leading me to have many new 'mini' actions like this in my commands file just in order to not have to update selectors in many places.

Am I doing it right? Any other suggestion?

Vicente
  • 45
  • 2

1 Answers1

1

I use a very simple javascript way to manage and reuse my locators. You can use this too if it works with your use case.

Step 1: Create a pageObject folder(I created it inside the integration folder) and inside that create a js file. Let's name this as selectors.js. Inside the selectors.js file, write all your selectors like this:

export default {
    toDoBtn: 'button[type="submit"]',
    starteDate: 'input[t-selector="startDate"]',
    input: 'form > input',
    listItems: 'ul > li'
};

Step 2: Now import this file into your spec file using the import command.

import selectors from './pageObject/selectors.js';

And then in your test you can use:

cy.get(selectors.starteDate).should('be.visible')
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • how to import such file in commands.ts file? after using import, all my commands are broken: Argument of type '"Command_Name"' is not assignable to parameter of type 'keyof Chainable' – harmider Jan 19 '22 at 08:49