Panther doesn't work with bootstrap 5 => 'Click intercepted' because of scroll (see repository)

[bastien70]

Description

After migrated from bootstrap 4 to bootstrap 5, something weird is happening. Panther tests that worked with bootstrap 4 no longer work with bootstrap 5.

It seems to come from a bug triggered during scrolling.

Context

When I run a test with Panther, and it wants to go to an element on the page, it gradually scrolls until it gets there, and this results in this error:

Facebook\WebDriver\Exception\ElementClickInterceptedException : element click intercepted: Element is not clickable at point (570, 1407)
  (Session info: chrome=93.0.4577.63)

In fact the rest of the test is carried out before it has completely finished scrolling, which means that the click will completely bug.

When I was using bootstrap 4 it would scroll sharply to the page element, and I didn't have this problem

Repository to test

This is a repository with strict minimum to show by yourself : https://github.com/bastien70/pantherBootstrap5

The plan will be as follows:

We will have two pages with exactly the same content, with a button at the very bottom of the page, requiring scrolling to access it.

One page will use bootstrap 4 while the other will use bootstrap 5.

A test will be performed on each of them in which Panther will try to click on the same button.

You will see that for bootstrap 4, it works, it goes in an instant to the button level, while with bootstrap 5, it will proceed to a progressive scroll until reaching the button level. This will cause a "click intercepted" bug

[mathieu-dumoutier]

I have exactly the same behavior after a migration Bootstrap 4 to Bootstrap 5 on many tests.

[domis86]

can you try scrolling with javascript and then clicking?

[mathieu-dumoutier]

Yes I tried and I can see button with scrolling but when I use the click() method the scroll move and trigger the error message.

[adrienfr]

Hi, we have the same issue with Behat when migrating from Bootstrap 4 to Bootstrap 5

[lwillems]

Got the same issue with panther and boostrap5 I fixed it temporaly by using location of my attribute and javascript scrolling

$client->executeScript("window.scrollTo({$attribute->getLocation()->getX()}, {$attribute->getLocation()->getY()})");

[dunglas]

In my opinion this should be reported to Bootstrap, and documented in the readme. But we'll not implement non-standard behaviors of third party libraries directly in Panther.

[adrienfr]

Thanks @dunglas! I just found this on Bootstrap's Github, https://github.com/twbs/bootstrap/issues/35536#issuecomment-992327098, checking if this fix the issue right now

[adrienfr]

I can confirm this solution fix my issues with Behat on Bootstrap 5+:

html {
    scroll-behavior: auto !important;
}

[mathieu-dumoutier]

I confirm @adrienfr's solution solved many tests break down until here.

[bastien70]

I take this opportunity to provide the solution I found at the time (sorry I had completely forgotten this issue).

I just modified a bootstrap 5 variable like this to disable smooth scroll, in my .scss file

$enable-smooth-scroll: false;

[dunglas]

Awesome, thanks for sharing the fix! Would you mind adding a note in the readme referencing the Bootsrap issue?

[bastien70]

Awesome, thanks for sharing the fix! Would you mind adding a note in the readme referencing the Bootsrap issue?

Done

[arderyp]

Wow, I can't believe so many people have this issue too. I will test the $enable-smooth-scroll: false; fix and, if that doesn't work, the html {scroll-behavior: auto !important;} fix and report back tomorrow.

[arderyp]

$enable-smooth-scroll: false; worked for me, thanks @adrienfr and @bastien70.

In all honesty, smooth scrolling is getting more popular and I don't see any reason why panther/selenium/headless clients shouldn't work with this setting. So, in my mind, this does still seem like a bug. However, I doubt the bug is with Panther but rather the headless browser engines.

Since I'd rather not override the default behavior of Bootstrap 5, and because this seems like an actual crawler bug to me, I opted to actually set the scrolling behavior on demand, in my base Panther test:

 private function javaScriptSetScrollBehaviorToAuto(): void
{
    $this->client->executeScript('document.documentElement.style.scrollBehavior = "auto";');
}

Calling this function after crawling to a page is another approach to solving this issue.

[gimler]

You can disable the smooth-scrolling for chrome globally via google feature flag disable-smooth-scrolling capabilities -> goog:chromeOptions -> args