Real Browser Check Scripting Guide - Rigor Monitoring

Rigor Scripting GuideBest Practices, Conventions, & Helpful Tips for Building Multi-

Step Real Browser Checks

Selectors & TypesWhat is a selector?

Patterns used to select and identify items to interact with in the DOM

Selector Types Rigor:

● id● name● css● link● xpath

Selector Typesidtarget the unique identifier of an element on the page

nametarget an element with matching name attribute

Selector Types

xpathtarget an element in the DOM by using XML syntax

Selector Types

Selector Typescsstarget an element by using HTML/CSS syntax● selector

Selector Typescsstarget an element by using HTML/CSS syntax● CSS path

form > div.row-fluid > input[placeholder='email']

Selector Typeslinktarget a link associated with an anchor tag (<a>) by specifying the anchor text

Selector Type: CSS Path

HTML Tag

HTML Attributes

CSS Combinators

CSS Pseudo Classes

1

2

3

4

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 PathHTML Element/Tag

HTML elements are written with a start tag, end tag, & content in between.

● HTML Attributes provide additional info about HTML elements● Always specified in the start tag● Attributes come in name='value' pairs

CSS PathHTML Attribute

Common HTML attributes:● class● href● name● style● type

HINT: always use single quotes ('single quotes') and turn Smart Quotes OFF

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 PathCombinators

"A combinator is something that explains the relationship between the selectors"-- W3Schools.ocm

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 PathPseudo Classes

form > div:nth-child(2) > input

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')

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

Real Browser: Check StepsWait

● 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

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.');

RBC Steps - ActionClear

This action will clear the value of a specified element.

● text field● radio● checkbox● dropdown

RBC Steps - ActionClick

Emulates a click operation for any element on the page. Takes in a selector as an argument.

div.hidden-phone > input[type='submit]

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.

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

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

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

Select

Select an item from a list by specifying a selector and a corresponding index, label, or value.

RBC Steps - Action

http://rigor.com/Features

RBC Steps - ActionSave 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.

?date=2/26/2016&q=30305

RBC Steps - ActionSave 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)

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

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

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.

● 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

● 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