behat: element is not clickable at point xxxx

When testing with behat on my laptop I often get the following error shoved up my face:

unknown error: Element <button id="mybutton">...</button> is not clickable at point (126, 698). Other element would receive the click: <span class="sf-toolbar-value sf-toolbar-info-piece-additional">...</span>

Cause: another element is in front of my button. My laptop has a smaller screen what makes this happen. In this case it is the Symfony toolbar which is in front of my button as I am testing it on my development environment.

Solution: scroll! (or maximize your browser window when it pops up)

# file FeatureContext.php

 * Scroll HTML element  into view
 * @Then I scroll element :cssSelector into view
public function iScrollElementIntoView($cssSelector)
    // scroll the element

 * Scroll HTML element with the supplied ID in view so that you can click on it (for example)
public function scrollHtmlElementIntoView($cssSelector)
    $function = <<<JS
      let elem = $('$cssSelector');
      $('html, body').animate({scrollTop:elem.offset().top})
    try {
    } catch (Exception $e) {
        throw new \Exception("ScrollIntoView failed");

And you can use the following step in your test by using a CSS-selector :

# file: FeatureContext.php

Then I scroll element "button#coiCheckButton" into view

Click Here to Leave a Comment Below

Leave a Reply: