This page is maintained for older versions of Rapise only. The latest documentation can be found at: https://rapisedoc.inflectra.com
CSS

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

.class

.intro

Selects all elements with class="intro"

1

#id

#firstname

Selects the element with id="firstname"

1

*

*

Selects all elements

2

element

p

Selects all <p> elements

1

element,element

div, p

Selects all <div> elements and all <p> elements

1

element element

div p

Selects all <p> elements inside <div> elements

1

element>element

div > p

Selects all <p> elements where the parent is a <div> element

2

element+element

div + p

Selects all <p> elements that are placed immediately after <div> elements

2

element1~element2

p ~ ul

Selects every <ul> element that are preceded by a <p> element

3

[attribute]

[target]

Selects all elements with a target attribute

2

[attribute=value]

[target=_blank]

Selects all elements with target="_blank"

2

[attribute~=value]

[title~=flower]

Selects all elements with a title attribute containing the word "flower"

2

[attribute|=value]

[lang|=en]

Selects all elements with a lang attribute value starting with "en"

2

[attribute^=value]

a[href^="https"]

Selects every <a> element whose href attribute value begins with "https"

3

[attribute$=value]

a[href$=".pdf"]

Selects every <a> element whose href attribute value ends with ".pdf"

3

[attribute*=value]

a[href*="w3schools"]

Selects every <a> element whose href attribute value contains the substring "w3schools"

3

:active

a:active

Selects the active link

1

::after

p::after

Insert content after every <p> element

2

::before

p::before

Insert content before the content of every <p> element

2

:checked

input:checked

Selects every checked <input> element

3

:disabled

input:disabled

Selects every disabled <input> element

3

:empty

p:empty

Selects every <p> element that has no children (including text nodes)

3

:enabled

input:enabled

Selects every enabled <input> element

3

:first-child

p:first-child

Selects every <p> element that is the first child of its parent

2

::first-letter

p::first-letter

Selects the first letter of every <p> element

1

::first-line

p::first-line

Selects the first line of every <p> element

1

:first-of-type

p:first-of-type

Selects every <p> element that is the first <p> element of its parent

3

:focus

input:focus

Selects the input element which has focus

2

:hover

a:hover

Selects links on mouse over

1

:in-range

input:in-range

Selects input elements with a value within a specified range

3

:invalid

input:invalid

Selects all input elements with an invalid value

3

:lang(language)

p:lang(it)

Selects every <p> element with a lang attribute equal to "it" (Italian)

2

:last-child

p:last-child

Selects every <p> element that is the last child of its parent

3

:last-of-type

p:last-of-type

Selects every <p> element that is the last <p> element of its parent

3

:link

a:link

Selects all unvisited links

1

:not(selector)

:not(p)

Selects every element that is not a <p> element

3

:nth-child(n)

p:nth-child(2)

Selects every <p> element that is the second child of its parent

3

:nth-last-child(n)

p:nth-last-child(2)

Selects every <p> element that is the second child of its parent, counting from the last child

3

:nth-last-of-type(n)

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

:nth-of-type(n)

p:nth-of-type(2)

Selects every <p> element that is the second <p> element of its parent

3

:only-of-type

p:only-of-type

Selects every <p> element that is the only <p> element of its parent

3

:only-child

p:only-child

Selects every <p> element that is the only child of its parent

3

:optional

input:optional

Selects input elements with no "required" attribute

3

:out-of-range

input:out-of-range

Selects input elements with a value outside a specified range

3

:read-only

input:read-only

Selects input elements with the "readonly" attribute specified

3

:read-write

input:read-write

Selects input elements with the "readonly" attribute NOT specified

3

:required

input:required

Selects input elements with the "required" attribute specified

3

:root

:root

Selects the document's root element

3

::selection

::selection

Selects the portion of an element that is selected by a user

 

:target

#news:target

Selects the current active #news element (clicked on a URL containing that anchor name)

3

:valid

input:valid

Selects all input elements with a valid value

3

:visited

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:

web_spy_css1

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:

web_spy_css2

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".