Where to configure global options?

[GrayedFox]

Inside my e2e.ts file I am doing the following:

import './commands';

import { ConfigureSelectors } from 'cypress-selectors';

/* Set default attribute id for using By.Attribute decorator */
ConfigureSelectors({
  defaultAttribute: 'data-testid',
});

But the default selector is still cypress-id. Should I be configuring the global options somewhere else?

[GrayedFox]

Only way I could get this working is by configuring the default selector at run time during a test, which I achieved via a BasePage page object - configuring this option inside my support file did nothing.

Note that I am using NX and running Cypress via the NX repo. Workaround here for those that use POM pattern (just make sure all of your POs derive from ta base PO class):

import { ConfigureSelectors } from 'cypress-selectors';

abstract class BasePage {
  static urls = {
    api: 'https://api.someurl.dev/graphql',
  };

  constructor() {
    /* Set default attribute id for using By.Attribute decorator */
    ConfigureSelectors({
      defaultAttribute: 'data-testid',
    });
  }
}

export { BasePage };

[anton-kravchenko]

@GrayedFox the other way of making it work would be calling ConfigureSelectors in before hook in a test suite.

[GrayedFox]

Is there a reason this doesn't work from the support file? Just seems like the more obvious choice for plugin/config stuff you want to happen across all test suites :)

[anton-kravchenko]

@GrayedFox I don't know for sure - since the configuration is done in the module itself (local state), my assumption is that all the modules are being reloaded per every test suite execution. That is causing a configuration reset. Probably this could be addressed by putting the configuration into the cy object.

[GrayedFox]

Other modules also seem to mirror this behaviour so closing this, I think recommended way of configuring cypress extensions is indeed by catching an early event (like window:on:load) or simply doing it per test file in a before hook.