Using CSS Selectors to Target Webpage Elements (Part 1)

For Selenium IDE, locating page elements using CSS selectors is strongly recommended.

Let’s look at an example below. Using Firebug, inspecting the View rooms and prices button in the page shows us its location.


As displayed, the location of the button is:

button id=”btnNext” class=”btn btn-primary btn-large translate enable”
View rooms and prices >>

Using this, we can write in Selenium IDE the target element as any of the following:

    • Element Selector: css=button
    • Text Selector: css=button:contains(“View rooms and prices »”)
    • ID Selector: css=button#btnNext
    • Class Selector: css=button.btn.btn-primary.btn-large.translate.enable

Of these four, ID and Class selectors are more often used. Automation testers stray away from Element selectors because they easily break when there are multiple elements of the same type in the webpage. Text selectors, meanwhile, break when text inside elements changes according to requirements of the application.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.