Getting custom element using puppeteer and then do click action

Question

I've created a custom attribute called data-testId and I am trying to reach to using puppeteer and then do a click action, but for some reason, I'm unable to get this element and facing with errors. I've tried these 2 options:

const element = await page.$('[data-testId="testid-button-refresh"]');
await page.click(element, { clickCount: 1 });

and this:

const refreshButton = await page.evaluateHandle(() => {
return document.querySelector('[data-testId=testid-button-refresh]').value;
});
await page.click(element, { clickCount: 1 });

On them both I am getting this error:

JSHandles can be evaluated only in the context they were created!

What I am doing wrong? and what does it means this error?

Answer 1

With element you've created an ElementHandle which can be clicked with elementHandle.click and not with page.click.

This should work:

const element = await page.$('[data-testId="testid-button-refresh"]') // this is an ElementHandle
await element.click({ clickCount: 1 })

Or you can still use page.click, but to keep the click in the same context you should use the selector, and not the ElementHandle as the first argument:

await page.click('[data-testId="testid-button-refresh"]', { clickCount: 1 })