Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Rigor Scripting Guide
Best Practices, Conventions, & Helpful Tips for Building Multi-
Step Real Browser Checks
Selectors & Types
What is a selector?
Patterns used to select and identify
items to interact with in the DOM
Selector Type...
Selector Types
id
target the unique identifier of an element on the page
name
target an element with matching name attribute
Selector Types
xpath
target an element in the DOM by using XML syntax
Selector Types
Selector Types
css
target an element by using HTML/CSS syntax
● selector
Selector Types
css
target an element by using HTML/CSS syntax
● CSS path
form > div.row-fluid > input[placeholder='email']
Selector Types
link
target 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...
● HTML Attributes provide additional info about HTML elements
● Always specified in the start tag
● Attributes come in nam...
4 Different Combinators:
1. Descendant selector (space)
2. Child selector (>)
3. Adjacent sibling selector (+)
4. General ...
Used to define a special state of an element. Append to a simple CSS
selector.
Important Pseudo Classes for CSS Paths:
● :...
CSS Path: Examples
tag
class
attribute (name/value pair)
combinator
general syntax
input[placeholder='Email' ]
input.login...
Choosing a Selector
● use developer tools to interact with DOM
(inspector) and JavaScript (console) to
interact with eleme...
Real Browser: Check Steps
Wait
● Wait for text present
● Wait for text not present
● Wait for element present
● Wait for e...
Accept Alert
When the JavaScript window.alert() or window.confirm() method is
executed on a page, the "Accept Alert" actio...
RBC Steps - Action
Clear
This action will clear the value of a specified element.
● text field
● radio
● checkbox
● dropdo...
RBC Steps - Action
Click
Emulates a click operation for any element on the page. Takes in a selector as
an argument.
div.h...
RBC Steps - Action
window.alert('This is a JavaScript alert');
Dismiss Alert
When the JavaScript window.confirm() method i...
Fill in field
Take a selector as an argument and specify a value.
● In some cases, you must precede the 'Fill in field' ac...
Fill in password field
This action operates similarly to the "Fill in field" action, but will mask the
input value in Rigo...
Run javascript
Execute any javascript on the current page in the check; similar to what
would be available in the browser ...
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 - Action
Save text from element
This action takes in a selector and saves the associat...
?date=2/26/2016&q=30305
RBC Steps - Action
Save return value from javascript
Execute javascript and return a value that wi...
Switch to iframe
Interact with the elements inside an iframe by specifying the iframe's
corresponding selector. Once this ...
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" a...
Wait for text
RBC Steps - Wait
● Present - scans the DOM searching for a text match. Will continue to the
next step when t...
● Wait for element present - scans the DOM searching for an id, css,
xpath, name, or link selector. Will continue to the n...
● Wait for element visible - scans the page searching for an id, css, xpath,
name, or link selector to be visible on the p...
Upcoming SlideShare
Loading in …5
×

Real Browser Check Scripting Guide - Rigor Monitoring

1,174 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Real Browser Check Scripting Guide - Rigor Monitoring

  1. 1. Rigor Scripting Guide Best Practices, Conventions, & Helpful Tips for Building Multi- Step Real Browser Checks
  2. 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. 3. Selector Types id target the unique identifier of an element on the page
  4. 4. name target an element with matching name attribute Selector Types
  5. 5. xpath target an element in the DOM by using XML syntax Selector Types
  6. 6. Selector Types css target an element by using HTML/CSS syntax ● selector
  7. 7. Selector Types css target an element by using HTML/CSS syntax ● CSS path form > div.row-fluid > input[placeholder='email']
  8. 8. Selector Types link target a link associated with an anchor tag (<a>) by specifying the anchor text
  9. 9. Selector Type: CSS Path HTML Tag HTML Attributes CSS Combinators CSS Pseudo Classes 1 2 3 4
  10. 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. 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. 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. 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. 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. 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. 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. 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. 18. RBC Steps - Action Clear This action will clear the value of a specified element. ● text field ● radio ● checkbox ● dropdown
  19. 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. 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. 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. 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. 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. 24. Select Select an item from a list by specifying a selector and a corresponding index, label, or value. RBC Steps - Action
  25. 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. 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. 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. 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. 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. 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. 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

×