cellxgene/client/__tests__/e2e/puppeteerUtils.js

export const puppeteerUtils = page => ({
  async waitByID(testId, props = {}) {
    return page.waitForSelector(`[data-testid='${testId}']`, props);
  },

  async waitByClass(testClass, props = {}) {
    return page.waitForSelector(`[data-testclass='${testClass}']`, props);
  },

  async waitForAllByIds(testIds) {
    await Promise.all(
      testIds.map(testId => page.waitForSelector(`[data-testid='${testId}']`))
    );
  },

  async getAllByClass(testClass) {
    return page.$$eval(`[data-testclass=${testClass}]`, eles =>
      eles.map(ele => ele.dataset.testid)
    );
  },

  async typeInto(testId, text) {
    // blueprint's  typeahead is treating typing weird, clicking & waiting first solves this
    // only works for text without special characters
    await this.waitByID(testId);
    const selector = `[data-testid='${testId}']`;
    // type ahead can be annoying if you don't pause before you type
    await page.click(selector);
    await page.waitFor(200);
    await page.type(selector, text);
  },

  async clearInputAndTypeInto(testId, text) {
    await this.waitByID(testId);
    const selector = `[data-testid='${testId}']`;
    // only works for text without special characters
    // type ahead can be annoying if you don't pause before you type
    await page.click(selector);
    await page.waitFor(200);
    // select all
    await page.click(selector, { clickCount: 3 });
    await page.keyboard.press("Backspace");
    await page.type(selector, text);
  },

  async clickOn(testid, options = {}) {
    await this.waitByID(testid);
    const click = await page.click(`[data-testid='${testid}']`, options);
    await page.waitFor(50);
    return click;
  },

  async getOneElementInnerHTML(selector) {
    await page.waitForSelector(selector);
    return page.$eval(selector, el => el.innerHTML);
  },

  async getOneElementInnerText(selector) {
    await page.waitForSelector(selector);
    return page.$eval(selector, el => el.innerText);
  },

  async getElementCoordinates(testid) {
    return page.$eval(`[data-testid='${testid}']`, elem => {
      const { left, top } = elem.getBoundingClientRect();
      return [left, top];
    });
  }
});