Date post: | 11-Apr-2017 |
Category: |
Software |
Upload: | anthony-ferrari |
View: | 123 times |
Download: | 0 times |
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 Typescsstarget an element by using HTML/CSS syntax● CSS path
form > div.row-fluid > input[placeholder='email']
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