Element Not Clickable At Point Error in Mink Functional Testing

Introduction

Mink is a software tool that you can use with various PHP frameworks to perform functional or unit tests of your particular system/application. It simulates either a headless or a browser emulator or a browser controller (like Selenium). I started using it because my application uses JavaScript and the headless Goutte PHP Web Scraper which is part of the Symfony framework cannot handle JavaScript functions. Although – I really like the Goutte driver.

When running some of my tests, I ran into the error “Element is not clickable at point …”, which is quite a common problem in Selenium testing. But I actually just found out why I got that error, and wanted to document my finding to help someone out who might run into the same problem.

Here is a cut & paste of the exact error, and looking at it now, it makes more sense (see below) the way the error message is worded:

WebDriver\Exception\UnknownError: Element is not clickable at point (85, 689.86669921875). 
Other element would receive the click:
<div class="sf-toolbar-icon"></div>

My Sample Code

Here is some of the test code I was running, and I’ll mark the line where the error occurred:

$this->visit('/submitPet/6'); // Go directly to submit pet.
$page = $this->getCurrentPage();
$page->fillField('form_pet_course', 'HIST 231');
$page->selectFieldOption('form_pet_division', 'Social Science', false);
$page->selectFieldOption('form_pet_grade', 'B+', false);
$page->fillField('form_cor_units', '4.00');
$page->selectFieldOption('form_school_name', '2', false); // Set to 'BC'.
$page->selectFieldOption('form_during_sem', 'fall', false);
$page->selectFieldOption('form_sem_quarter', 'semester', false);
$page->fillField('form_taken_year', '2014');
$page->fillField('form_sub_requirement', 'TC American History & Institutions');
$page->checkField('form_cal_ID');
$page->fillField('form_cal_ID_text', 'HIST 130');
$page->checkField('form_c2c_equiv');
$page->fillField('form_c2c_equiv_text', 'course2course_text');
$page->checkField('form_pass_along');
$page->fillField('form_pass_along_text', 'passAlong_text');
$page->checkField('form_maj_req_course');
$page->fillField('form_maj_req_course_text', 'HIST 2231');
$page->checkField('form_elect_course');
$page->fillField('form_elect_course_text', 'elect_course');
$page->checkField('form_comp_reading'); // <--- Got the error right here!!!

How I Found Out the Problem

It always failed at line 172 of my source file, which was annoying, because I knew the code was correct and everything looked like it should work. I double checked many times. So then I realized Mink (and Selenium) has a screenshot function. So I added in a screenshot on the line before the failure, just like so:

$page->fillField('form_elect_course_text', 'elect_course');
file_put_contents('/var/www/html/petition/web/sample_data/Fail.png',
                  $this->minkSession->getDriver()->getScreenshot());
$page->checkField('form_comp_reading');

This created a screenshot in that particular web folder and I took a look at it and this is what it looks like:

Do you see the problem? The debug toolbar is hovering over the middle of the page, and you can’t click on anything there. So the error message is correct, but I never realized why until I saw the screenshot.

Workarounds

Two workarounds are possible:

• Close the debug toolbar when doing testing
• Test in the PROD environment

Closing the debug bar is as simple as using Mink to find the element by CSS class for the Symfony debug toolbar, and then clicking on it:

$closeDebug = $page->find('css', '.hide-button');
$closeDebug->click();

Then to use the PROD environment, don’t point your Mink base URL to append app_dev.php.

Closing

Hopefully, this will help someone in the future if they see this kind of error.