How to use @percy/puppeteer - 10 common examples

(async () => {
  // If a build is from a forked repository, CircleCI does not pass environment
  // environment variables into the build to prevent credential leakage.
  // In that case, exit cleanly so the build does not fail.
  // Once we start using @percy/puppeteer v1 this can be removed as it is
  // checked within Percy. See https://github.com/percy/percy-puppeteer/pull/3
  if (!process.env.PERCY_TOKEN) {
    console.log('No PERCY_TOKEN provided. Skipping snapshots.');
    process.exit();
  }

  const percy = new Percy({
    loaders: [
      new FileSystemAssetLoader({
        buildDir: './playground/build/assets',
        mountPath: '/assets',
      }),
    ],
  });

  const browsers = [
    {
      browser: await puppeteer.launch(),
      taken: new Promise((resolve) => {
        resolve();
      }),
    },
    {

/* Testing Blocks */

    // start by removing all the text
    await selectAllText(input);
    await input.press('Backspace');

    // next, open the Style menu

    // blur input first to test that editor focus works correctly
    await blur(input);

    const styleMenuButton = await getByLabelText(doc, 'Style');
    await styleMenuButton.click();

    await wait(() => getByText(doc, 'Headline H1'));
    await percySnapshot(page, 'RichTextInput - style menu open');

    // then click on the H1 button
    const h1Button = await getByText(doc, 'Headline H1');
    await h1Button.click();

    // now type into the input
    const h1Text = 'here is our first h1';
    await input.type(h1Text);

    // text we typed should be visible on the screen
    await wait(() => getByText(doc, h1Text));

    // h1 should be in document
    numOfTags = await getNumberOfTags('h1');
    expect(numOfTags).toEqual(1);

it('Open', async () => {
    await page.goto(`${HOST}/date-input-open`);
    await page.click('#date-input');
    await expect(page).toMatch('November');
    await percySnapshot(page, 'DateInput - open');

    const doc = await getDocument(page);
    const input = await getByTestId(doc, 'date-input');

    const prevMonthButton = await getByLabelText(doc, 'show prev month');
    await prevMonthButton.click();

    await wait(() => getByText(doc, 'October'));
    // our input should still be focused even though we clicked a header button

    await input.press('Backspace');
    await input.press('Backspace');
    await input.press('Backspace');
    await input.press('Backspace');
    await input.type('2017');
    await wait(() => getByText(doc, '2017'));

it('Default', async () => {
    await expect(page).toMatch('InfoModalPage');
    await percySnapshot(page, 'InfoModalPage');
  });
});

it('Default', async () => {
    await expect(page).toMatch('FormModalPage');
    await percySnapshot(page, 'FormModalPage');
  });
});

it('Default', async () => {
    await page.goto(`${HOST}/date-input`);
    await expect(page).toMatch('minimal');
    await percySnapshot(page, 'DateInput');
  });
  it('Open', async () => {

it('Default', async () => {
    await expect(page).toMatch('Type - Raised, Theme - Light');
    await percySnapshot(page, 'Card');
  });
});

it('CreatableSelectInput', async () => {
    await page.goto('http://localhost:3001/creatable-select-input');
    await expect(page).toMatch('minimal');
    await percySnapshot(page, 'CreatableSelectInput');
  });

it('Open', async () => {
    await page.goto(`${HOST}/select-input/open`);
    await page.click('#select-input');
    await expect(page).toMatch('One');
    await percySnapshot(page, 'SelectInput - open - without option groups');
  });
  it('Open - dark', async () => {

it('Open with option groups', async () => {
    await page.goto(`${HOST}/select-input/open-with-option-groups`);
    await page.click('#select-input');
    await percySnapshot(
      page,
      'SelectInput - open - option group with no divider'
    );
  });
  it('Open with option groups and divider', async () => {