How to use mugshot - 8 common examples

export async function expectIdenticalScreenshots(
  screenshot: Buffer,
  baselineName: string,
  message?: string
) {
  const { BROWSER } = process.env;

  const baseline = await fs.readFile(
    path.join(__dirname, `./screenshots/${BROWSER}/${baselineName}.png`)
  );

  // eslint-disable-next-line no-unused-expressions
  expect((await pixelDiffer.compare(baseline, screenshot)).matches, message).to.be.true;
}

runnerBefore(function connectToSelenium() {
    const options = {
      host: SELENIUM_HOST,
      desiredCapabilities: { browserName: BROWSER }
    };

    rootSuiteBrowser = remote(options).init();

    const adapter = new WebdriverIOAdapter(rootSuiteBrowser);

    rootSuiteMugshot = new Mugshot(adapter, {
      rootDirectory: path.join(__dirname, 'screenshots', BROWSER),
      acceptFirstBaseline: false
    });

    return rootSuiteBrowser;
  });

before('Connecting to Selenium', function() {
  this.timeout(10 * 1000);

  const options = {
    host: SELENIUM_HOST,
    desiredCapabilities: { browserName: BROWSER }
  };

  const client = remote(options).init();
  const adapter = new WebdriverIOAdapter(client);

  mugshot = new Mugshot(adapter, {
    rootDirectory: path.join(__dirname, 'screenshots', BROWSER),
    acceptFirstBaseline: false
  });

  global.browser = client;

  return client;
});

getElementRect = async (selector: string) => {
    const rects = (await this.browser.execute(getBoundingRect, selector)) as
      | DOMRect
      | DOMRect[]
      | null;

    if (!rects) {
      throw new ElementNotFoundError(selector);
    }

    if (Array.isArray(rects)) {
      return rects.map(rect => {
        if (
          rect.x === 0 &&
          rect.y === 0 &&
          rect.width === 0 &&
          rect.height === 0
        ) {
          throw new ElementNotVisibleError(selector);
        }

        return {
          x: rect.x,
          y: rect.y,

getElementRect = async (selector: string) => {
    const elements = await this.page.$$(selector);

    if (!elements.length) {
      throw new ElementNotFoundError(selector);
    }

    const rects = await Promise.all(
      elements.map(async element => {
        const rect = await element.boundingBox();

        if (!rect) {
          throw new ElementNotVisibleError(selector);
        }

        return rect;
      })
    );

    return rects.length === 1 ? rects[0] : rects;
  };

return rects.map(rect => {
        if (
          rect.x === 0 &&
          rect.y === 0 &&
          rect.width === 0 &&
          rect.height === 0
        ) {
          throw new ElementNotVisibleError(selector);
        }

        return {
          x: rect.x,
          y: rect.y,
          width: rect.width,
          height: rect.height
        };
      });
    }

elements.map(async element => {
        const rect = await element.boundingBox();

        if (!rect) {
          throw new ElementNotVisibleError(selector);
        }

        return rect;
      })
    );

getElementRect = async (selector: string) => {
    const rect: DOMRect | null = await this.browser.execute(
      getBoundingRect,
      selector
    ) as DOMRect | null;

    if (!rect) {
      throw new ElementNotFound(selector);
    }

    return {
      x: rect.x,
      y: rect.y,
      width: rect.width,
      height: rect.height
    };
  };