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
    $this->scrollHtmlElementIntoView($cssSelector);
}

/**
 * Scroll HTML element with the supplied ID in view so that you can click on it (for example)
 */
public function scrollHtmlElementIntoView($cssSelector)
{
    $function = <<<JS
(
    function(){
      let elem = $('$cssSelector');
      $('html, body').animate({scrollTop:elem.offset().top})
    }
)()
JS;
    try {
        $this->getSession()->executeScript($function);
    } 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

Behat 3 + Mink + Selenium

Installation

We will be installing the following:

• Behat version 3 – the testingframework
• Mink – for controlling real webbrowsers to run your tests
• PHPUnit – for using the handy ‘assert’ methods PHPUnit provides.
• Selenium Standalone Server – this will act as a service to accept connections and map them to browsers.

Continue reading