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 &amp; 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:

Fail

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 work arounds 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 helps someone in the future if they see this kind of error.

Advertisements

About Alvin Bunk
Hi, I'm a software developer at Taft College.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: