Clicking/Focusing element out of view is not possible

[intellix]

Clicking on an element states that the method scrolls the element into view and then clicks it. It appears this doesn't work and I'm assuming it's because I'm using a custom scroll element (for mobile infinite scrolling reasons).
I'd say it should scroll the closest parent to the element or allow you to force a click regardless of it being visible.

I'm trying to speed up screenshotting my SPA. I've got a list of URLs to visit like: ['home', 'contact']. In order to not trigger a full page reload, I'm first querying the page for an anchor and clicking it like so:

const link = await this.page.$(`a[href="${path}"]`);
if (link) {
  await link.click();
} else {
  await this.page.goto(`${domain}${path}`);
}

Also tried and guessing fails for same reason during focus:

await link.press('Enter');

It all works fine and dandy on Desktop as the viewport is generally large enough to see and click the link, but on mobile and tablet devices it's failing.

Some options that would greatly help me:

• page.goto() for SPA that doesn't trigger a full reload
• Ability to click/focus/press things out of view (perhaps an option to ignore visibility?)
• Scroll to element to support closest scroller
• Promise to reject if element can't be scrolled into view, so I can fallback to goto for out of view elements

Steps to reproduce

1. Create a custom scroller element using Images overflow to next page in PDF export in screen mode #896
2. Place link outside of viewport
3. Click it via element.click();

Tell us about your environment:

• Puppeteer version: 1.1.1
• Platform / OS version: OSX Sierra
• URLs (if applicable):
• Node.js version: 8.9.1

What is the expected result?
Element is clicked

What happens instead?
Element is not clicked

Temporary workaround

const link = await this.page.$(linkSelector);
if (link) {
  await this.page.evaluate(selector => document.querySelector(selector).click(), linkSelector);
}

[JoelEinbinder]

Can you provide some code to reproduce the issue? I can't reproduce it from the issue you linked.

If your link can accept focus, but doesn't scroll into view when focused, something is seriously going wrong.

[aslushnikov]

Indeed, we can't click things that are not on screen, so we try to scroll them in. If website has a custom logic around scrolling, this might break.

Since there's no general way solution for this, we can't handle this on pptr-side, so I'd recommend coming up with your own helper function that will tackle this specific case.

[intellix]

I think it might be worth noting in the documentation that all of the click/mouse functionality depends on emulating real clicks where the link needs to be visible.

I'm not sure about other people, but I personally assumed it worked like jQuery where it just expects the element to exist on the page and would trigger an event on it.

Perhaps it should still throw if the element click didn't work

[aslushnikov]

I think it might be worth noting in the documentation that all of the click/mouse functionality depends on emulating real clicks where the link needs to be visible.

I'm not sure about other people, but I personally assumed it worked like jQuery where it just expects the element to exist on the page and would trigger an event on it.

@intellix Feel free to send PRs to improve documentation; this might save hours to somebody else in future.

Perhaps it should still throw if the element click didn't work

It turns out to be tricky to figure if clicking actually hits the target: e.g. event might be captured and cancelled during bubbling up, but technically the click did go through.

In your case, you probably want to fail when scrolling into view didn't work. We can add this check, but it will make clicking slower since it will require one more roundtrip to the page. We also won't mitigate a bunch of other specific cases: in-between scrolling and clicking, page can do anything to its DOM, so clicking is inherently flaky.

Let's see if situations similar to yours will occur often to our users. If they do, we'll need to do something to mitigate some common usecases.

[theArina]

Hi, I have the same issue and the same temporary solution. But still, would've been cool if it'll work without it.

[anitawoodruff]

I think I have a similar issue, where an element added dynamically after page load (by clicking on another element in the ui) cannot be scrolled into view to be clicked on. However, the workaround above doesn't work for me - document.querySelector returns null so I can't click on it that way either.

So my very hacky workaround at the moment is to increase the viewport a bit so the element doesn't need to be scrolled into view.. this is obviously not ideal though!