Using Selectors in Web Journey Manager
Selectors are extremely useful for locating elements on the page. Selectors can be used to click, input text, and do a variety of other actions. In the Web Journey Manager it can be used to ensure that the correct elements will be selected on playback and re-runs. Download the Web Journey Manager here.
Web Journey Manager
In the Web Journey Manager, toggle between different types of selectors at each step. Additionally, you can and add up to 15 selectors for each step to cater to pages that are more dynamic in nature. Click the blue plus icon to add additional selectors.
Toggle between different selector types as you add more selectors.
Different Selector Types
The different selector types available are ID, Name, CSS, XPath and Attributes. For more details on XPath and CSS selectors, see Using XPaths and CSS Selectors. There are different pros and cons to using each selector.
Found in the element itself:
<a href="/user/login" id="link-login">. Advantages of using this selector is it is unique to the page. Disadvantages is it is not always used and can change.
Found in the element itself:
<a href="/blog" name="blog-link">. There is no prefix required for the name selector. The advantage of this selector is that it is used more often than IDs. The disadvantage is that it is not unique to the page.
Cascading Style Sheets (CSS)
CSS selector syntax locates items on a page based on their color, font family, positioning etc. Advantages of using the CSS selector is that it is frequently used and can combine with other elements in the document hierarchy:
#secondary-menu > li > a.menu-button. It is easy to locate CSS selectors, but web pages that are more dynamic in nature may fail in locating the element. Additionally, CSS selectors are not unique to a page so accuracy in locating it is not as good. This is what a CSS selector looks like on jpstyle.us when the Login button is clicked:
XML Path Language (XPATH)
XPath is used to locate items in a structured document. XML syntax is used for finding items in structured data. Advantages of using XML is that it is almost always available and easy to copy. If the code is organized well, it will still locate the item regardless if the CSS styling has changed. Disadvantages of the selector is that it contains a more complex syntax. The XML selector looks like this for the same Login button as above:
For attributes, all outer HTML elements are captured for the selector field. HTML elements are the web page code. Advantages of the attribute selector is that it is always available and easy to copy. Disadvantages are that it may not be unique. This selector is the anchor tag of the HTML element and will look like this for the same Login button as above:
<a href="/user/login" id="link-login">Log in</a>
There are many use cases for selectors. Upon playback you may find that your recording runs into some errors.