title: Selenium skips clicking on an element for no apparent reason if I place a different image in the src attribute of the img tag?
body: <p>This is ridiculous. Why does it happen??</p>
  
  <p>HTML source code:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;WTF&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body id="b"&gt;
  &lt;map name="Map" id="Map"&gt;
      &lt;area
              id="clickhereyoustupidselenium" alt="" title=""
              href="javascript:document.getElementById('b').innerHTML = 'adsf'"
              shape="poly" coords="51,29,155,25,247,87,156,129,52,132,23,78,84,56,104,35" /&gt;
      &lt;img usemap="#Map" src="http://placehold.it/350x150" alt="350 x 150 pic"&gt;
  &lt;/map&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Selenium test code:</p>
  
  <pre class="lang-python prettyprint-override"><code>from django.contrib.staticfiles.testing import StaticLiveServerTestCase
  from selenium.webdriver.firefox.webdriver import WebDriver
  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support.expected_conditions import text_to_be_present_in_element
  from selenium.webdriver.common.by import By
  
  class SeleniumTest(StaticLiveServerTestCase):
      @classmethod
      def setUpClass(cls):
          super(SeleniumTest, cls).setUpClass()
          cls.selenium = WebDriver()
  
      @classmethod
      def tearDownClass(cls):
          cls.selenium.quit()
          super(SeleniumTest, cls).tearDownClass()
  
      def test_wtf(self):
          self.selenium.get('%s%s' % (self.live_server_url, '/'))
          self.selenium.find_element_by_id('clickhereyoustupidselenium').click()
          WebDriverWait(self.selenium, 100).until(text_to_be_present_in_element((By.TAG_NAME, "body"), "adsf"))
          self.assertEqual(self.selenium.find_element_by_tag_name('body').text, 'adsf')
  </code></pre>
  
  <p>The test passes beautifully.</p>
  
  <p>OK, so now let's replace <code>src="http://placehold.it/350x150"</code> with a different image, let's say this one: <code>src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/POL_location_map.svg/500px-POL_location_map.svg.png"</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;WTF&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body id="b"&gt;
  &lt;map name="Map" id="Map"&gt;
      &lt;area
              id="clickhereyoustupidselenium" alt="" title=""
              href="javascript:document.getElementById('b').innerHTML = 'adsf'"
              shape="poly" coords="51,29,155,25,247,87,156,129,52,132,23,78,84,56,104,35" /&gt;
      &lt;img usemap="#Map" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/POL_location_map.svg/500px-POL_location_map.svg.png" alt="350 x 150 pic"&gt;
  &lt;/map&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Let's not touch Selenium code not a teeny tiny bit.</p>
  
  <p>Result? Selenium raises: <code>selenium.common.exceptions.TimeoutException</code></p>
  
  <p>And indeed, the Firefox window that shows up still shows the map of Poland, and not 'adsf'. If I click on this area in the Firefox window that shows up until the timeout of 100 seconds passes then Selenium immediately concludes the test has passed. But it was Selenium that was supposed to click on this element!!</p>
  
  <p>What is happening and how to stop this madness?</p>
  
  <p>Geckodriver 0.18.0. Selenium 3.5.0. Firefox 55.0.2. Python 3.5.2. And, if this matters, the dev server is Django 1.11.4.</p>