Where to store selectors in Cypress.io

Question

I am new to Cypress. What is the best way to avoid hard coding selectors/locators into each spec. In other frameworks we would create a config file with all of the selectors and have the spec reference it.

Scenario: I may have a selector being used in multiple specs. If the selector changes I do not want to have to change it in each spec. I would rather change it in one location only.

Answer 1

You don't need to do any magic. Simply put your selectors into a file, and import it.

// cypress/support/selectors.js

export default {
  mySelector: '.my-selector',
  mySelector2: '.my-selector-2'
};

// cypress/integration/one.spec.js

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

describe('test', () => {
  it('test', () => {
    cy.get(selectors.mySelector);
  });
});