Cannot click on element that is outside the viewport (bootstrap 5 issue)

[kbond]

$this->pantherBrowser()
    ->visit('/page')
    ->click('.something') // element not in view part
;

// Facebook\WebDriver\Exception\MoveTargetOutOfBoundsException: move target out of bounds

Possible solution:

$this->pantherBrowser()
    ->visit('/page')
    ->use(function (Browser $browser ){

        $x = $browser->client()->findElement(WebDriverBy::cssSelector('.something'))->getLocation()->getX();
        $y = $browser->client()->findElement(WebDriverBy::cssSelector('.something'))->getLocation()->getY();

        $string = 'window.scrollTo({top:'.$y.', left:'.$x.', behaviour: \'auto\'});';

        $browser->client()->executeScript($string);

    })
    ->waitUntilVisible('.something')
    ->click('.something') // element not in view part
;

[kbond]

I cannot recreate the issue with this library's test suite but can manually on a sample app using easyadmin-bundle (wide index, clicking "Add Entity" button). I'm wondering if easyadmin intercepts scrolling somehow?

[kbond]

Found the culprit: https://github.com/symfony/panther/issues/502

In your easyadmin DashboardController, add the following to fix:

public function configureAssets(): Assets
{
    return Assets::new()->addHtmlContentToHead('<style>html{scroll-behavior: auto !important;}</style>');
}

(or add to a custom style sheet)

[gavinerickson]

Found the culprit: symfony/panther#502

In your easyadmin DashboardController, add the following to fix:

public function configureAssets(): Assets
{
    return Assets::new()->addHtmlContentToHead('<style>html{scroll-behavior: auto !important;}</style>');
}

(or add to a custom style sheet)

This works nicely for EasyAdmin; seems more reliable than the scrollTo method

[kbond]

Closing as I don't think there is any action required here.