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