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.

Step1ButtonCSS

As displayed, the location of the button is:

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

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.

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s