How to use the @percy/puppeteer.percySnapshot function in @percy/puppeteer

/* 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 () => {

it('Default', async () => {
    await expect(page).toMatch('A label text');
    await percySnapshot(page, 'FlatButton');
  });
});