The Record & Replay tool is most useful when implementing these Best Practices.
Developing with Unique Elements for Record Targeting
The Recorder works best when your website is developed with the most modern web standards. Here is a quick list of recommended patterns to follow. The Recorder is looking for the most unique CSS Selector to target when building your script. The more unique & simplistic your CSS selection path, the more reliable your script will be on Playback.
- Unique Element Ids: W3 docs
<div id="uniqueId" class="green section padding-small">Content</div> <p> - Unique Input Names: W3 docs
<input name="submit" type="submit" value="Submit"> <input name="Username" type="text"> - Unique Button Text: W3 docs
<button type="button">Login</button> - Targeting Nested (child) Elements: CSS Tricks
ul.team li.members:nth-of-type(2) > a
Recording your Script
- Don’t click the browsers back button or switch tabs during recording.
- Don’t close tabs during recording session.
- Clean up & Remove any extraneous/accidental clicks or scrolls.
- Input Fields Click input fields before entering text – instead of using the tab Key to switch element focus.
- Form Submit Click submit button instead of pressing enter to submit forms.
- Adding Hover: Exposing elements under a CSS :hover (pseudo class), use the Add Hover
step instead of using the cursor. - Adding Sleep: If your scripting a low webpage or running async scripts, use the Add Sleep
Step when recording.
Unsupported Cases:
- Basic Auth – URLs protected by Basic Authentication are unsupported. Though you may be able to enter username/password on recording, the credentials are not stored nor can be replayed in your scripts.
- CAPTCHA – Forms with this security feature will fail on replays
- iFrames – Action performed on content within iframes will get recorded but replays will fail (planned future support)
Additional Tips:
- When clicking or adding an expect to an element, keep the element in the browser viewport.
- Remember these steps are intentional. Click with intent to record. Not exploratory testing.
- Avoid Testing Dynamic or Random generated content.
Bonus Tools:
Here are a list of tools/exercises that will help you understand CSS Selectors when developing:
- CSS Diner Game – Test your skills!
- Evaluate and validate XPath/CSS selectors in Chrome Developer Tools
- developers.google – Test Selectors in Chrome Dev tools:
