waitUntilElementExists.js: Wait DOM element exists in the page with vanilla JS and Promises

waitUntilElementExists.js

const waitUntilElementExists = (DOMSelector, MAX_TIME = 10000) => {
  let timeout = 0;

  const waitForContainerElement = (resolve, reject) => {
    const container = document.querySelector(DOMSelector);
    timeout += 30;

    if (timeout >= MAX_TIME) reject('Element not found');

    if (!container || container.length === 0) {
      setTimeout(waitForContainerElement.bind(this, resolve, reject), 30);
    } else {
      resolve(container);
    }
  };

  return new Promise((resolve, reject) => {
    waitForContainerElement(resolve, reject);
  });
};

waitUntilElementExists.test.js

describe('waitUntilElementExists', () => {
  it('waits until a dom element is in the DOM', () => {
    const elementId = 'elementId';

    const addElementDelayed = (delay) => {
      window.setTimeout(() => {
        const element = document.createElement('DIV');
        element.id = elementId;
        window.document.body.appendChild(element);
      }, delay);
    };

    addElementDelayed(10);

    return waitUntilElementExists(`#${elementId}`, 20)
      .then((el) => {
        expect(el.id).to.equal(elementId);
      })
      .catch((error) => {
        expect(error).to.equal('Element not found');
      });
  });
});