Make webdriver wait for an element to become visible with Selenium Python

It’s a problem I’ve encountered many times: building out a test and getting to an element I need to click on or test its attributes or text only to find out that it’s being dynamically loaded by Javascript. When this happens I always get the same error in the console.

ElementNotVisibleException: Message: element not visible

It’s frustrating since virtually all help threads Ive found on Stack Overflow and on other blogs are close but never offered help that actually works. Maybe because my issue is not quite the same or because I write my tests differently, but truly I’ve never gotten any of those solutions to work. The following is a list of things that are either really bad ideas or just never worked for me:

  • Sleep the browser
  • Programmatically move the cursor 1px in order to find a button hit state
  • Injecting click actions into the browser developer console (ewww)
  • Use XPATH instead of CSS Locator
  • Get the size of the element first then click
  • etc

Finally just breaking down and looking at the Docs for Waits in Selenium/Python there, of course seems to be some promise. The example they give is as follows:

from selenium import webdriver
from import By
from import WebDriverWait
from import expected_conditions as EC

driver = webdriver.Firefox()
    element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.ID, "myDynamicElement"))

Scanning the code quickly, I figured this was right up my alley. I copied the code, changed the placeholder element to the one I’m looking for, saved the file, rebuilt Docker, and ran the test. Same failure. Literally this code changed nothing. It didn’t wait, the element was still not visible and the test still failed. Ugg.

I read back through the code more thoroughly and noticed the Expected Condition line of


which caught my eye. Presence. Ahh, right ok. My issue was not that the element was not present, which can also happen. My issue this time as you recall above was that the element was not Visible. Ok, dig deeper into the docs and look at the full list of Expected Conditions which are:

element_to_be_clickable - it is Displayed and Enabled.

Ahh, look at this. Visibility conditions. This is looking promising! Let’s make a quick change to something like:

from selenium import webdriver
from import By
from import WebDriverWait
from import expected_conditions as EC

driver = webdriver.Firefox()
    element = WebDriverWait(driver, 10).until(
        EC.visibility_of_element_located((By.ID, "myDynamicElement"))

Save the file, rebuild Docker, run the test. While testing in our dev environment I have Docker run the test with a headed browser, usually Chrome or FF so I’m able to watch it run. This time around something is different. The test properly pauses while the page content is loading in dynamically then once loaded the test proceeded. Success! That was it.

Chrome inspector’s 0 variable

Ever noticed a little commented-out expression hanging off your code in Chrome’s inspector that looks something like ==$0?

Chrome Inspector 0 variable

Google Chrome’s inspector assigning the above line a variable of 0.

I have, but never gave it much mind. I finally thought I’d look into it today and wish I had a long time ago. Turns out what the expression means is that if you click on a line of code in the inspector or right click inspect an element the variable 0 gets assigned to that node and its children.

Calling this variable by typing $0 into the console of Chrome will then display just that node and its children. Super helpful if you’re like me and prefer to focus on certain lines or nodes without the clutter of everything else in the DOM.

Google Chrome console

By typing $0 into the console of the browser just the selected line of code in the inspector will display along with its children.

Pretty handy trick, right? Well, you can also use $1 $2 $3 $4 to go back and look at previous nodes that you inspected before the most current $0 inspection. Stack Overflow user deadlock, has the winning explanation here.

Tell Protractor where your Angular app lives, avoid sync issues

A handy trick (read: best practice) I ran into today was about how to properly inform Protractor where to look for your Angular application when it pols the DOM.

In my early Protractor tests I always started out with something like:

// ignore Angular and sync
beforeEach(function() {
    browser.ignoreSynchronization = true;

I have a few tests that need to run back and fourth between Angular and non-Angular pages and this worked in a pinch but I never really looked into the details of it.

Today while working on a new test that’s being extremely finicky, I needed to debug that line a bit and came across a great post by Vincent Tunru. In essence, adding a browser.ignoreSynchronization = true;  line to each test works, but in reality it’s better to simply tell protractor in your config file where your Angular app will exist and let it sort out whether or not there’s Angular on the page.

You can accomplish this by adding to your cons.js file the following:

exports.config = {
  rootElement: '*[ng-app]', 


Which will tell Protractor that your Angular app should be found on an element with the attribute of ng-app whether your Angular app is in the default body tag or most likely not.

Neat and much cleaner. Thanks, Vincent!