Purpose
When testing web applications you will often want to use Cascading Style Sheets (CSS) selectors to query the browser DOM for elements based on the scenario under test. This section explains how you can use CSS selectors with Rapise to make your browser testing more flexible and adaptive to changes on the screen.
CSS is an alternative to XPath that is often better at selecting multiple elements from across different parts of the DOM Tree, unlike XPath which is strictly hierarchical. However since CSS is not always able to uniquely locate an object, when Rapise is used in recording mode, it will learn objects automatically using XPath.
CSS Fundamentals
In CSS, selectors are patterns used to select the element(s) you want to style. Here are the different operators that you can use in CSS selectors:
Selector |
Example |
Example description |
CSS |
|---|---|---|---|
.intro |
Selects all elements with class="intro" |
1 |
|
#firstname |
Selects the element with id="firstname" |
1 |
|
* |
Selects all elements |
2 |
|
p |
Selects all <p> elements |
1 |
|
div, p |
Selects all <div> elements and all <p> elements |
1 |
|
div p |
Selects all <p> elements inside <div> elements |
1 |
|
div > p |
Selects all <p> elements where the parent is a <div> element |
2 |
|
div + p |
Selects all <p> elements that are placed immediately after <div> elements |
2 |
|
p ~ ul |
Selects every <ul> element that are preceded by a <p> element |
3 |
|
[target] |
Selects all elements with a target attribute |
2 |
|
[target=_blank] |
Selects all elements with target="_blank" |
2 |
|
[title~=flower] |
Selects all elements with a title attribute containing the word "flower" |
2 |
|
[lang|=en] |
Selects all elements with a lang attribute value starting with "en" |
2 |
|
a[href^="https"] |
Selects every <a> element whose href attribute value begins with "https" |
3 |
|
a[href$=".pdf"] |
Selects every <a> element whose href attribute value ends with ".pdf" |
3 |
|
a[href*="w3schools"] |
Selects every <a> element whose href attribute value contains the substring "w3schools" |
3 |
|
a:active |
Selects the active link |
1 |
|
p::after |
Insert content after every <p> element |
2 |
|
p::before |
Insert content before the content of every <p> element |
2 |
|
input:checked |
Selects every checked <input> element |
3 |
|
input:disabled |
Selects every disabled <input> element |
3 |
|
p:empty |
Selects every <p> element that has no children (including text nodes) |
3 |
|
input:enabled |
Selects every enabled <input> element |
3 |
|
p:first-child |
Selects every <p> element that is the first child of its parent |
2 |
|
p::first-letter |
Selects the first letter of every <p> element |
1 |
|
p::first-line |
Selects the first line of every <p> element |
1 |
|
p:first-of-type |
Selects every <p> element that is the first <p> element of its parent |
3 |
|
input:focus |
Selects the input element which has focus |
2 |
|
a:hover |
Selects links on mouse over |
1 |
|
input:in-range |
Selects input elements with a value within a specified range |
3 |
|
input:invalid |
Selects all input elements with an invalid value |
3 |
|
p:lang(it) |
Selects every <p> element with a lang attribute equal to "it" (Italian) |
2 |
|
p:last-child |
Selects every <p> element that is the last child of its parent |
3 |
|
p:last-of-type |
Selects every <p> element that is the last <p> element of its parent |
3 |
|
a:link |
Selects all unvisited links |
1 |
|
:not(p) |
Selects every element that is not a <p> element |
3 |
|
p:nth-child(2) |
Selects every <p> element that is the second child of its parent |
3 |
|
p:nth-last-child(2) |
Selects every <p> element that is the second child of its parent, counting from the last child |
3 |
|
p:nth-last-of-type(2) |
Selects every <p> element that is the second <p> element of its parent, counting from the last child |
3 |
|
p:nth-of-type(2) |
Selects every <p> element that is the second <p> element of its parent |
3 |
|
p:only-of-type |
Selects every <p> element that is the only <p> element of its parent |
3 |
|
p:only-child |
Selects every <p> element that is the only child of its parent |
3 |
|
input:optional |
Selects input elements with no "required" attribute |
3 |
|
input:out-of-range |
Selects input elements with a value outside a specified range |
3 |
|
input:read-only |
Selects input elements with the "readonly" attribute specified |
3 |
|
input:read-write |
Selects input elements with the "readonly" attribute NOT specified |
3 |
|
input:required |
Selects input elements with the "required" attribute specified |
3 |
|
:root |
Selects the document's root element |
3 |
|
::selection |
Selects the portion of an element that is selected by a user |
|
|
#news:target |
Selects the current active #news element (clicked on a URL containing that anchor name) |
3 |
|
input:valid |
Selects all input elements with a valid value |
3 |
|
a:visited |
Selects all visited links |
1 |
One limitation (as compared to XPath) is that there is not a way to select an element based on its contents. So it would not be possible to locate a cell in a grid (for example) based on the contents of the cell. For that you would need to use XPath.
Rapise CSS Extensions
Since Rapise uses XPath as its primary means of locating an HTML element, when you Learn an object using CSS, Rapise will prefix the Locator (listed under the XPath property for that object in the Object Tree) with css= to let Rapise know that the locator is actually using a CSS selector.
css=html > body > form#ctl01 > div:nth-of-type(3) > div:first-of-type > div:first-of-type
There are several different ways to use CSS selectors in Rapise
Using Web Spy
To most easily use CSS selectors in Rapise, we recommend using the Web Spy tool:
If you enter in the CSS selector at the top, when you click Test CSS it will display all of the DOM elements that match the selector:
You can now refine the query to only find the items you want to test.
Learning Objects
When you have created the query in the Web Spy that returns the HTML elements that you were expecting, you can click on the Learn button to learn that object. What this will do is create a new Rapise object in the Object Tree that maps to this specific CSS. That means that the "object" in Rapise is effectively a pointer to this specific CSS selector.
For example, if you want to find a specific book in a grid of books by its CSS class, style, ID or other attribute, you can search using the appropriate CSS selector, then learn this object as "Book_1" so that you can access it in your code as SeS("Book_1"). Every time you call a function on "Book_1", Rapise will use the learned CSS selector and use that to evaluate which HTML element in the web page to access.
Dynamic Queries
In addition to learning objects based on specific CSS selector, there are a set of general functions that can be used to query for objects in the web page:
SeS('Book_Management').DoDOMQueryCss('tr td[data=book1]');
Will dynamically query for any HTML element that is a child of the learned "Book Management" object that matches the CSS selector. In this example it will look for any table cell in a table row that has the attribute data="book1".