Selenium Tips: Finding Elements by their Focus Using :focus, a CSS Pseudo-class

Note - The original article references the :contains pseudo-class, which is no longer a part of the W3C standard and not supported by current browsers. Instead here we’ll tell you another way to identify hard-to-find elements - :focus

As we already mentioned in our previous posts CSS Selectors in Selenium Demystified and Intermediate CSS Selectors in Selenium, CSS is a selection strategy that is easier to read, simple, and generally less brittle than XPATH. Both can be useful; knowing both can be powerful. Today we’ll cover a CSS pseudo-class called focus that allows you to hook to the element that has focus - with working sample code in Ruby.

For those wondering, a Pseudo-class is a way to identify an element only when it is in a special state. For example, only style links a certain way when they are hovered over, or input fields that are enabled. We can also use those pseudo-classes as selectors - to select only the one input field on the page that is enabled.

THE FOCUS PSEUDO-CLASS

The focus pseudo-class allows you to select the element that has focus -- the one with the blinking cursor to type into. Using it can verify that the javascript fired and a specific element has focus. Take for a moment this sample code:

What is your name?
<input id="unpredictable1234" type="text"/><BR/>
What is your quest?
<input id="also_unpredictable1234" type="text"/><BR/>

The ID’s here change every refresh and are not predictable. Perhaps they contain the order ID or user ID or some other unique element that means something to the back-end server. A few things we do know: When the page loads, nothing should have focus. When the user presses tab, the first input should have focus.

css=input:focus

CHECKING PAGE LOAD FOR NO FOCUS

Here’s the ruby code to make sure no element has focus on page load. It assumes an existence in a class with a member variable @driver that is a Selenium::Webdriver object.

    #No element has focus
    found = false
    begin
      element = @driver.find_element :css, 'input:focus'
      found = true
    rescue Selenium::WebDriver::Error::NoSuchElementError
      found = false
     end

TAB AND FIND FOCUS

And the code to send a tab to the page, setting the focus on the first input. The code then gets the selected element, types “Hello WebDriver!” into it, and asserts the text is present using test/unit.

    @driver.action.send_keys(:tab).perform

    element = @driver.find_element :css, 'input:focus'
    sleep(3)

    element.send_keys "Hello WebDriver!"
    assert_equal(element.attribute('value'),"Hello WebDriver!")

The entire program, including the sample code, is available in Github as css_focus.rb and sample.html.

Did you find this useful? Are you still fighting with XPATH or CSS to “just” select a “simple” element under some “simple” conditions? Let us know about it in the comments. Better yet, if you think you are a CSS hero, clone the repository in github and make a change request to press tab, check the second element, which now has focus, and ensure the text is blank. Or change sample.html to make sure the second input has a default value, and it matches that value.

Interested in learning how to use Selenium for your automated testing? Check out Sauce Labs Selenium courses.