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
    

    Install

    npm i data-test-name

    DownloadsWeekly Downloads

    89

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    29.1 kB

    Total Files

    17

    Last publish

    Collaborators

    • futpib