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

As we already mentioned in our previous post, CSS is a selection scheme that is easier to say, simple, and broadly less brittle than XPATH. Both can be useful; knowing both can be powerful. Today we ’ ll cover a CSS pseudo-class called focusing that allows you to overcharge to the element that has focus - with working sample code in Ruby.

For those wondering, a Pseudo-class is a way to name an constituent solely when it is in a special state. For model, entirely style links a certain way when they are hovered over, or remark fields that are enable. We can also use those pseudo-classes as selectors - to select merely the one input field on the page that is enabled.

THE FOCUS PSEUDO-CLASS

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

What is your name?
& lt; input id= & quot; unpredictable1234 & quot; type= & quot; text & quot; / & gt; & lt; BR/ & gt;
What is your quest?
& lt; input id= & quot; also_unpredictable1234 & quot; type= & quot; text & quot; / & gt; & lt; BR/ & gt;

The ID ’ s hither change every refresh and are not predictable. Perhaps they contain the order ID or user ID or some other alone element that means something to the back-end waiter. A few things we do know: When the page load, nothing should have focus. When the exploiter presses tab, the inaugural stimulus should have focus.

css=input: direction

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

CHECKING PAGE LOAD FOR NO FOCUS

Here ’ s the ruby code to get sure no factor has focus on page load. It acquire an existence in a category with a appendage variable @ driver that is a Selenium: :Webdriver object.

# No element has focus
found = mistaken
    begin
element = @ driver.find_element: css, & # x27; stimulation: focus & # x27;
found = true
rescue Selenium: :WebDriver: :Error: :NoSuchElementError
plant = false
     end

TAB AND FIND FOCUS

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

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

element = @ driver.find_element: css, & # x27; comment: focus & # x27;
    sleep(3)

element.send_keys & quot; Hello WebDriver! & quot;
assert_equal (element.attribute (& # x27; value & # x27;), & quot; Hello WebDriver! & quot;)

The entire programme, including the sampling code, isavailable in Githubas css_focus.rb and sample.html.

Did you find this useful? Are you still fighting with XPATH or CSS to “ just ” select a “ bare ” element under some “ uncomplicated ” conditions? Let us know about it in the comments. Better yet, if you cerebrate you are a CSS hero, clone the depository in github and get a change request to press tab, check the second element, which now has focus, and ensure the textbook is white. Or modification sample.html to make certain the 2nd stimulation has a nonpayment value, and it gibe that value.

Concerned in learning how to use Selenium for your automated testing? Check out.