get-e2e-test-classname

This package allow to guarantee that class names used in e2e tests are unique. Also it adds prefix for every classname to let QA know if some classname can be used by themselves.

Example:

import { getE2ETestClassName } from 'get-e2e-test-classname';

const myClass = getE2ETestClassName('my');

const ReactComp = () => <button className={myClass}>test</button>;

In case of using non-unique className, this package will throw an error. Example:

import { getE2ETestClassName } from 'get-e2e-test-classname';

const myClass = getE2ETestClassName('my');
const myClass2 = getE2ETestClassName('my'); // throw new Error

Default prefix is '-'. So getE2ETestClassName('my') === '-my'

Change prefix

To use custom prefix, you can use next code:

import { getE2ETestClassName, setPrefix } from 'get-e2e-test-classname';

setPrefix('my-prefix-');

getE2ETestClassName('name'); // 'my-prefix-name\

Warn! Created classname is prefix + originalClassName without any separator.

Create scope

To prevent issues with hard-coding long part of classnames to make them unique, you may use scopes. Code without scope:

import { getE2ETestClassName } from 'get-e2e-test-classname';

const e2e = {
  firstNameInput: getE2ETestClassName('my-form-inside-application-first-name-input'),
  lastNameInput: getE2ETestClassName('my-form-inside-application-last-name-input'),
  emailInput: getE2ETestClassName('my-form-inside-application-email-input'),
  passwordInput: getE2ETestClassName('my-form-inside-application-password-input'),
};

It can be replaced with:

import { createScoped } from 'get-e2e-test-classname';

const getE2ETestClassName = createScoped('my-form-inside-application');

const e2e = {
  firstNameInput: getE2ETestClassName('first-name-input'),
  lastNameInput: getE2ETestClassName('last-name-input'),
  emailInput: getE2ETestClassName('email-input'),
  passwordInput: getE2ETestClassName('password-input'),
};

Warn! Code isn't totally equal to unscoped cause created classnames will be different:

Manual	Scoped
-my-form-inside-application-first-name-input	-my-form-inside-application_first-name-input
^	^