This resource contains best practices, common conventions, and helpful tips for utilizing multi-step Real Browser Checks in Rigor Monitoring. Testing mission critical user flows on your site to ensure optimal user experience is a necessity; use this guide to assist with creating and maintaining these scripts.

1. Rigor Scripting Guide
Best Practices, Conventions, & Helpful Tips for Building Multi-
Step Real Browser Checks

2. Selectors & Types
What is a selector?
Patterns used to select and identify
items to interact with in the DOM
Selector Types Rigor:
● id
● name
● css
● link
● xpath

3. Selector Types
id
target the unique identifier of an element on the page

4. name
target an element with matching name attribute
Selector Types

5. xpath
target an element in the DOM by using XML syntax
Selector Types

6. Selector Types
css
target an element by using HTML/CSS syntax
● selector

7. Selector Types
css
target an element by using HTML/CSS syntax
● CSS path
form > div.row-fluid > input[placeholder='email']

8. Selector Types
link
target a link associated with an anchor tag (<a>) by specifying the anchor text

9. Selector Type: CSS Path
HTML Tag
HTML Attributes
CSS Combinators
CSS Pseudo Classes
1
2
3
4

10. HTML tags designate the element type.
Common HTML tags:
● Heading: <h1>, <h2>,....,<h5>, <h6>
● Paragraph: <p>
● DIV: <div>
● Input: <input>
● Button: <button>
● Iframe: <iframe>
CSS Path
HTML Element/Tag
HTML elements are written with a start tag, end tag, & content in between.

11. ● HTML Attributes provide additional info about HTML elements
● Always specified in the start tag
● Attributes come in name='value' pairs
CSS Path
HTML Attribute
Common HTML attributes:
● class
● href
● name
● style
● type
HINT: always use
single quotes ('single
quotes') and turn
Smart Quotes OFF

12. 4 Different Combinators:
1. Descendant selector (space)
2. Child selector (>)
3. Adjacent sibling selector (+)
4. General sibling selector (~)
Used to combine simple CSS selectors into a path.
CSS Path
Combinators
"A combinator is
something that
explains the
relationship between
the selectors"
-- W3Schools.ocm

13. Used to define a special state of an element. Append to a simple CSS
selector.
Important Pseudo Classes for CSS Paths:
● :nth-child(index)
● :nth-of-type(index)
CSS Path
Pseudo Classes
form > div:nth-child(2) > input

14. CSS Path: Examples
tag
class
attribute (name/value pair)
combinator
general syntax
input[placeholder='Email' ]
input.login-input[placeholder='Email' ]
form > div.row-fluid > input[id='email']
#email (CSS version of id='email')

15. Choosing a Selector
● use developer tools to interact with DOM
(inspector) and JavaScript (console) to
interact with elements of a site
● use 'command + f' in inspector to ensure
that there is only one instance of the
selector you are using
● id first, xpath last
● watch out for dynamic selectors
Best Practices

16. Real Browser: Check Steps
Wait
● Wait for text present
● Wait for text not present
● Wait for element present
● Wait for element not present
● Wait for element visible
● Wait for element not visible
Action
● Accept Alert
● Clear
● Click
● Dismiss Alert
● Fill in field
● Fill in password field
● Go to URL
● Run javascript
● Select
● Save text from Element
● Save return value from javascript
● Switch to iframe
● Switch to main

17. Accept Alert
When the JavaScript window.alert() or window.confirm() method is
executed on a page, the "Accept Alert" action will accept this alert.
RBC Steps - Action
window.alert('This is a JavaScript alert');
window.confirm('Confirm this alert.');

18. RBC Steps - Action
Clear
This action will clear the value of a specified element.
● text field
● radio
● checkbox
● dropdown

19. RBC Steps - Action
Click
Emulates a click operation for any element on the page. Takes in a selector as
an argument.
div.hidden-phone > input[type='submit]

20. RBC Steps - Action
window.alert('This is a JavaScript alert');
Dismiss Alert
When the JavaScript window.confirm() method is called, the "Dismiss
Alert" action will reject the request and return false to the console.

21. Fill in field
Take a selector as an argument and specify a value.
● In some cases, you must precede the 'Fill in field' action with a 'Click' action..
RBC Steps - Action

22. Fill in password field
This action operates similarly to the "Fill in field" action, but will mask the
input value in Rigor to protect passwords from non-admin users.
RBC Steps - Action

23. Run javascript
Execute any javascript on the current page in the check; similar to what
would be available in the browser console.
RBC Steps - Action

24. Select
Select an item from a list by specifying a selector and a corresponding index,
label, or value.
RBC Steps - Action

25. http://rigor.com/Features
RBC Steps - Action
Save text from element
This action takes in a selector and saves the associated text value to a
variable. Call this variable in a subsequent step by using the {{custom.
your_variable_here}} tag.

26. ?date=2/26/2016&q=30305
RBC Steps - Action
Save return value from javascript
Execute javascript and return a value that will be saved to a variable. Similar
to the "Save text from element" step, you can call this variable in subsequent
steps via the {{custom.your_variable_here}} tag.
1
2
Example: adding tomorrow’s date (2/26/2016) as a parameter to a URL)

27. Switch to iframe
Interact with the elements inside an iframe by specifying the iframe's
corresponding selector. Once this step is run, the browser can interact with
elements contained in the iframe.
RBC Steps - Action

28. Switch to main
If you used the "Switch to iframe" step and need to jump out into the main
page, use the "Switch to main" action.
RBC Steps - Action

29. Wait for text
RBC Steps - Wait
● Present - scans the DOM searching for a text match. Will continue to the
next step when the specified text is present.
● Not present - scans the DOM searching for a text match. If the specified
text is present, the step will fail. If the text does not appear in the DOM
the check will continue to the next step.

30. ● Wait for element present - scans the DOM searching for an id, css,
xpath, name, or link selector. Will continue to the next step in the check
when the specified element is present.
● Wait for element not present - scans the DOM searching for an id, css,
xpath, name, or link selector. If the element doe not appear in the DOM,
the check will continue to the next step.
Wait for element
RBC Steps - Wait

31. ● Wait for element visible - scans the page searching for an id, css, xpath,
name, or link selector to be visible on the page. If an element is present in
the DOM but not visible on the page, this step will fail.
● Wait for element not visible - scans the page searching for an id, css,
xpath, name, or link selector that is not visible on the page. If this element
is present in the DOM but not visible on the page, this step will pass.
Wait for element
RBC Steps - Wait