Cypress custom command that finds a visible element rendered visually below the previous subject. Using it to find inputs below labels that miss accessible identifiers. https://twitter.com/sompylasar/status/982027453764792320

Cypress.Commands.getVisuallyBelow.js

// `queries.matches` is this function: https://github.com/kentcdodds/testing-workshop/blob/888201516879d067adddc6b6dd3c76394f0b2bee/cypress/support/queries.js#L74-L82

Cypress.Commands.add('getVisuallyBelow', { prevSubject: 'element' }, (subject, matcher) => {
  const domNode = subject.get(0);

  const log = Cypress.log({
    name: 'GET_VISUALLY_BELOW',
    message: '' + (
      String(
        domNode.nodeName +
        '.' + domNode.className.replace(/^\s+|\s+$/g, '').replace(/\s+/, '.')
      ) + ' ' +
      String(matcher)
    ),
    consoleProps() {
      return {
        subject: subject,
        matcher: matcher,
      };
    },
  });

  const doc = domNode.ownerDocument;
  const normalizedMatcher = (
    typeof matcher === 'function'
      ? matcher
      : (el) => queries.matches(el.innerText, el, matcher)
  );

  return cy
    .window({ log: false })
    .then(getCommandWaiter(doc, () => {
      if (!Cypress.dom.isVisible(domNode)) { return null; }

      const rect = domNode.getBoundingClientRect();
      if (!rect) { return null; }

      const foundEls = Array.from(doc.querySelectorAll('*'))
        .filter((el) => (
          Cypress.dom.isVisible(el) && normalizedMatcher(el)
        ))
        .map((el) => {
          const rectBelow = el.getBoundingClientRect();
          const dist = (rectBelow.top - rect.bottom);
          return { el, dist };
        })
        .filter(({ dist }) => (dist >= 0));

      foundEls.sort((left, right) => (left.dist - right.dist));

      return (foundEls[0] ? foundEls[0].el : null);
    }))
    .then(($el) => {
      log.set({ $el }).snapshot().end();
    });
});