mouse down and take a screenshot of an element

Question

I am trying to simulate a mousedown action on an element then take a snapshot but this doesn't seem to work as the screenshot isn't what I expect.

according to the api docs, this is what it does

mouse.down([options])
options <Object>
button <"left"|"right"|"middle"> Defaults to left.
clickCount <number> defaults to 1. See UIEvent.detail.
returns: <Promise>
Dispatches a mousedown event.

I have tried the following:

  it('primary button visually looks correct on mouse down', async () => {
    await page.goto('my_url_page');
    await page.waitForSelector(testData.button, 20000);
    const elementHandle = await page.$(testData.button);
    await page.mouse.move(0, 0);
    await page.mouse.down();
    const image = await elementHandle.screenshot();

    expect(image).toMatchImageSnapshot();
  });

the button has some animation when the mouse is pressed down and this is what I want to take a screenshot of.

Appreciate the support with this