cypress.ts

import Chainable = Cypress.Chainable;

const getDialog = (name: string | RegExp) => {
  return cy.findByRole('dialog', { name });
};

const getForm = (subject: Chainable, name: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByRole('form', {
    name,
    exact: false,
  });
};

const getGroup = (subject: Chainable, name: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByRole('group', {
    name,
    exact: false,
  });
};

const getInput = (subject: Chainable, label: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByLabelText(label, {
    selector: 'input',
    exact: false,
  });
};

const getTextarea = (subject: Chainable, label: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByLabelText(label, {
    selector: 'textarea',
    exact: false,
  });
};

const getSelect = (subject: Chainable, label: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByLabelText(label, {
    selector: 'select',
    exact: false,
  });
};

const getListbox = (subject: Chainable, name: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByRole('listbox', { name });
};

const getOption = (subject: Chainable, name: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByRole('option', { name });
};

const getButton = (subject: Chainable, name: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByRole('button', {
    name,
    exact: false,
  });
};

const getTable = (subject: Chainable, label: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByRole('table', {
    name: label,
    exact: false,
  });
};

const getRepeatable = (subject: Chainable, label: string | RegExp) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByLabelText(label, {
    selector: 'table',
    exact: false,
  });
};

const getError = (subject: JQuery) => {
  expect(subject)
    .to
    .have
    .attr('aria-invalid', 'true');
  expect(subject)
    .to
    .have
    .attr('aria-errormessage');

  return cy.get(`#${subject.attr('aria-errormessage') as string}`);
};

const getValue = (subject: JQuery) => {
  switch (subject[0].tagName) {
    case 'INPUT':
      expect(subject)
        .to
        .have
        .attr('value');

      return cy.wrap(subject.attr('value'));

    default:
      throw new Error('Subject does not support getValue');
  }
};

const press = (subject: JQuery) => {
  cy.wrap(subject)
    .focus();
  cy.focused()
    .type('{enter}');

  return cy.wrap(subject);
};

const getRow = (subject: JQuery, index: number) => {
  return cy.wrap(subject)
    .findAllByRole('row')
    .filter(`[aria-rowindex=${index}]`)
    .first();
};

const getCell = (subject: JQuery, label: string) => {
  return cy.wrap(subject)
    .findByRole('cell', { name: label });
};

const getList = (subject: JQuery, label: string) => {
  const chain = subject ? cy.wrap(subject) : cy;

  return chain.findByRole('list', { name: label });
};

const getListItem = (subject: JQuery, label: string) => {
  return cy.wrap(subject)
    .findByRole('listitem', { name: label });
};

const select = (originalFn: any, subject: JQuery, name: string) => {
  if (subject.attr('role') === 'listbox') {
    return cy.wrap(subject)
      .findByRole('option', { name })
      .press();
  }

  return originalFn(subject, name);
};

Cypress.Commands.add('getDialog', getDialog);

Cypress.Commands.add('getForm', { prevSubject: 'optional' }, getForm);
Cypress.Commands.add('getGroup', { prevSubject: 'optional' }, getGroup);
Cypress.Commands.add('getInput', { prevSubject: 'optional' }, getInput);
Cypress.Commands.add('getTextarea', { prevSubject: 'optional' }, getTextarea);
Cypress.Commands.add('getSelect', { prevSubject: 'optional' }, getSelect);
Cypress.Commands.add('getListbox', { prevSubject: 'optional' }, getListbox);
Cypress.Commands.add('getOption', { prevSubject: 'optional' }, getOption);
Cypress.Commands.add('getButton', { prevSubject: 'optional' }, getButton);
Cypress.Commands.add('getRepeatable', { prevSubject: 'optional' }, getRepeatable);

Cypress.Commands.add('getError', { prevSubject: 'element' }, getError);
Cypress.Commands.add('getValue', { prevSubject: 'element' }, getValue);
Cypress.Commands.add('press', { prevSubject: 'element' }, press);

Cypress.Commands.add('getTable', { prevSubject: 'optional' }, getTable);
Cypress.Commands.add('getRow', { prevSubject: 'element' }, getRow);
Cypress.Commands.add('getCell', { prevSubject: 'element' }, getCell);

Cypress.Commands.add('getList', { prevSubject: 'optional' }, getList);
Cypress.Commands.add('getListItem', { prevSubject: 'element' }, getListItem);

Cypress.Commands.overwrite('select', select);

declare namespace Cypress {
  interface Chainable {
    getDialog: (label: string | RegExp) => Chainable;
    getForm: (label: string | RegExp) => Chainable;
    getGroup: (label: string | RegExp) => Chainable;
    getInput: (label: string | RegExp) => Chainable;
    getTextarea: (label: string | RegExp) => Chainable;
    getSelect: (label: string | RegExp) => Chainable;
    getListbox: (label: string | RegExp) => Chainable;
    getOption: (label: string | RegExp) => Chainable;
    getButton: (label: string | RegExp) => Chainable;
    getRepeatable: (label: string | RegExp) => Chainable;
    getTable: (label: string | RegExp) => Chainable;
    getRow: (index: number) => Chainable;
    getCell: (label: string | RegExp) => Chainable;
    getList: (label: string | RegExp) => Chainable;
    getListItem: (label: string | RegExp) => Chainable;
    getError: () => Chainable;
    getValue: () => Chainable;
    press: () => Chainable;
  }
}