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 post CSS Selectors in Selenium Demystified, 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.
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.
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
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.
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.