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

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

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 4
Comments: 15 (6 by maintainers)

Most upvoted comments

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

html {
    scroll-behavior: auto !important;
}

adrienfr on Jan 4, 2022

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()})");

lwillems on Jan 4, 2022

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;

bastien70 on Jan 4, 2022

$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.

arderyp on Aug 11, 2022

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

Done

bastien70 on Jan 19, 2022

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

dunglas on Jan 4, 2022

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

mathieu-dumoutier on Dec 3, 2021