How to use @percy/agent - 6 common examples

} finally {
    // restore replaced canvases
    for (const { image, canvas } of replacements) {
      image.parentElement.replaceChild(canvas, image);
    }

    // restore element visibility
    document.head.removeChild(styleElement);
    remove(['body'], 'hideInPercy');
    remove(show, 'showInPercy');
    remove(hide, 'hideInPercy');
  }
}

export const takePercySnapshotWithAgent = `
  ${readFileSync(agentJsFilename(), 'utf8')}

  return (${takePercySnapshot.toString()}).apply(null, arguments);
`;

export async function percySnapshot(browser: any, name: string, options: any = {}) {
  if (!browser) {
    throw new Error("WebdriverIO 'browser' object must be provided.");
  }
  if (!name) {
    throw new Error("'name' must be provided. In Mocha, this.test.fullTitle() is a good default.");
  }

  if (! await isAgentRunning()) {
     return
  }

  await browser.execute(fs.readFileSync(agentJsFilename()).toString(), []);

  // WebdriverIO v4 returns an object with the return value from the execute command
  // WebdriverIO v5 returns whatever is returned from the execute command
  const browserResult: any = await browser.execute((name: string, options: any) => {
    var percyAgentClient = new PercyAgent({ handleAgentCommunication: false });

    return percyAgentClient.snapshot(name, options);
  }, name, options);

  const resultIsString = typeof browserResult === "string";
  const domSnapshot = resultIsString ? browserResult : browserResult.value;

  await postDomSnapshot(name, domSnapshot, await browser.getUrl(), options);
}

export async function percySnapshot(browser: any, name: string, options: any = {}) {
  if (!browser) {
    throw new Error("WebdriverIO 'browser' object must be provided.");
  }
  if (!name) {
    throw new Error("'name' must be provided. In Mocha, this.test.fullTitle() is a good default.");
  }

  if (! await isAgentRunning()) {
     return
  }

  await browser.execute(fs.readFileSync(agentJsFilename()).toString(), []);

  // WebdriverIO v4 returns an object with the return value from the execute command
  // WebdriverIO v5 returns whatever is returned from the execute command
  const browserResult: any = await browser.execute((name: string, options: any) => {
    var percyAgentClient = new PercyAgent({ handleAgentCommunication: false });

    return percyAgentClient.snapshot(name, options);
  }, name, options);

  const resultIsString = typeof browserResult === "string";
  const domSnapshot = resultIsString ? browserResult : browserResult.value;

public async snapshot(options: SnapshotOptions = {}) {
      log.debug('Capturing percy snapshot');

      if (!currentTest) {
        throw new Error('unable to determine current test');
      }

      const [domSnapshot, url] = await Promise.all([
        this.getSnapshot(options.show, options.hide),
        browser.getCurrentUrl(),
      ]);
      const stats = getStats(currentTest);
      stats.snapshotCount += 1;

      const { name } = options;
      const success = await postSnapshot({
        name: `${currentTest.fullTitle()} [${name ? name : stats.snapshotCount}]`,
        url,
        domSnapshot,
        clientInfo: `kibana-ftr:${pkg.version}`,
        ...DEFAULT_OPTIONS,
      });

      if (!success) {
        throw new Error('Percy snapshot failed');
      }
    }

async function postDomSnapshot(name: string, domSnapshot: any, url: string, options: any) {
  const postSuccess = await postSnapshot({
    name,
    url,
    domSnapshot,
    clientInfo: clientInfo(),
    ...options,
  });

  if (!postSuccess) {
    console.log('[percy] Error posting snapshot to agent');
  }
}

cy.task('percyHealthCheck').then((percyIsRunning: boolean) => {
    if (percyIsRunning) {
      const percyAgentClient = new PercyAgent({
        handleAgentCommunication: false,
        domTransformation: options.domTransformation
      })

      name = name || cy.state('runnable').fullTitle()

      cy.document().then((doc: Document) => {
        options.document = doc
        const domSnapshot = percyAgentClient.snapshot(name, options)
        return cy.request({
          method: 'POST',
          url: `http://localhost:${percyAgentClient.port}/percy/snapshot`,
          failOnStatusCode: false,
          body: {
            name,
            url: doc.URL,