data-test-name

Helpers for clean and maintainable selectors in browser (end-to-end, puppeteer) tests

Example

// test.js
import { selector } from 'data-test-name';

const loginForm = selector('login');

await page.waitFor(loginForm());
await page.type(selector(loginForm, 'email')(), 'user@example.com');
await page.type(selector(loginForm, 'password')(), 'secret');
await page.click(selector(loginForm, 'submit')());

// LoginForm.jsx

export const LoginForm = ({ onSubmit }) => (
	<form
		onSubmit={onSubmit}
		data-test-name="login"
	>
		<input
			type="email"
			data-test-name="email"
		/>

		<input
			type="password"
			data-test-name="password"
		/>

		<button
			type="submit"
			data-test-name="submit"
		>
	</form>
);

Why

When selectors in your tests do not use classnames, ids or names, you can easily change styles, swap commponents, etc. without breaking the tests. Just keep the same data-test-name values.

Install

yarn add --dev data-test-name