data-test-name
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

data-test-name

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

Build Status Coverage Status

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

Package Sidebar

Install

npm i data-test-name

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

29.1 kB

Total Files

17

Last publish

Collaborators

  • futpib