Back to Codeceptjs

customLocator

docs/plugins/customLocator.md

4.0.02.4 KB
Original Source
<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

customLocator

Creates a custom locator by using special attributes in HTML.

If you have a convention to use data-test-id or data-qa attributes to mark active elements for e2e tests, you can enable this plugin to simplify matching elements with these attributes:

js
// replace this:
I.click({ css: '[data-test-id=register_button]');
// with this:
I.click('$register_button');

This plugin will create a valid XPath locator for you.

Configuration

  • enabled (default: false) should a locator be enabled
  • prefix (default: $) sets a prefix for a custom locator.
  • attribute (default: data-test-id) to set an attribute to be matched.
  • strategy (default: xpath) actual locator strategy to use in query (css or xpath).
  • showActual (default: false) show in the output actually produced XPath or CSS locator. By default shows custom locator value.

Examples:

Using data-test attribute with $ prefix:

js
// in codecept.conf.js
plugins: {
 customLocator: {
   enabled: true,
   attribute: 'data-test'
 }
}

In a test:

js
I.seeElement('$user'); // matches => [data-test=user]
I.click('$sign-up'); // matches => [data-test=sign-up]

Using data-qa attribute with = prefix:

js
// in codecept.conf.js
plugins: {
 customLocator: {
   enabled: true,
   prefix: '=',
   attribute: 'data-qa'
 }
}

In a test:

js
I.seeElement('=user'); // matches => [data-qa=user]
I.click('=sign-up'); // matches => [data-qa=sign-up]

Using data-qa OR data-test attribute with = prefix:

js
// in codecept.conf.js
plugins: {
 customLocator: {
   enabled: true,
   prefix: '=',
   attribute: ['data-qa', 'data-test'],
   strategy: 'xpath'
 }
}

In a test:

js
I.seeElement('=user'); // matches => //*[@data-qa=user or @data-test=user]
I.click('=sign-up'); // matches => //*[data-qa=sign-up or @data-test=sign-up]
js
// in codecept.conf.js
plugins: {
 customLocator: {
   enabled: true,
   prefix: '=',
   attribute: ['data-qa', 'data-test'],
   strategy: 'css'
 }
}

In a test:

js
I.seeElement('=user'); // matches => [data-qa=user],[data-test=user]
I.click('=sign-up'); // matches => [data-qa=sign-up],[data-test=sign-up]

Parameters

  • config