Using Selectors in Web Journey Manager

Overview

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.

Add up to 15 selectors per step.

Toggle between different selector types as you add more selectors.

See the information below for more details on each selector.

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.

ID

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.

Name

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:
#link-login.

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:
//a[contains(@href, '/user/login')]

Attributes

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>

Troubleshooting

There are many use cases for selectors. Upon playback you may find that your recording runs into some errors.

For example, say the email you inputted into a contact form returns an error during playback. This would indicate that it is not looking for the correct element. To test this, copy the element code from the Web Journey Manager and paste it into the console. Run the code and see what JavaScript error messages are returned. Toggle between different selectors and test them within the console to see if it is executing the action you selected correctly. When you find a selector that works, keep it selected on that step. After you Save & Finish, all subsequent re-runs will be done with the selector you saved it on.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.