awinogradov / dom-objects

DOM Objects declarations for tests, e2e, cypress and etc.

DOM Objects

DOM Objects declarations for tests, e2e, cypress and etc.

npm i -D dom-objects

Usage

// utils/objects.ts
import { configureDomObjects } from 'dom-objects';


const DO = configureDomObjects({
  attributeName: 'cy',
});

export const header = DO('header');
export const createMenu = header.add('createMenu');
export const createButton = createMenu.add('createButton');

// src/components/button.tsx
import { createButton } from '../../utils/objects';

export const Page = () => (
  <main>
    <form>
      <button {...createButton.attrs}>Submit</button>
    </form>
  </main>
)

// cypress/e2e/test.cy.ts
import { createButton } from '../../utils/objects';

describe('Test', () => {
  it('must be', () => {
    //...
    cy.get(createButton.query).click();
    //...
  });
});

License MIT