• Use Cases
    • Technical
    • Digital
    • eCommerce
    • Travel
    • Gambling
    • Public Sector
    • Enterprise
    • Small/Medium
    • Agencies
    • RapidSpike VS New Relic
  • Platform
    • PerformanceImprove page speed and conversions.
    • SecurityStop hackers and find vulnerabilities.
    • ReliabilityTrack errors and issues, get alerts.
    • How It WorksA quick overview of the platform.
  • Customers
  • Learn
    • About UsWe help make the web faster, safer and easier to use.
    • Knowledge BaseWe aim to answer your most frequently asked questions.
    • From The BlogGet to know feature development, monitoring tips and even the RapidSpike team.
      • Why should you use Single Sign-On?
      • The Online Travel Landscape
      • The ultimate guide to website monitoring solutions
  • Pricing
  • Log In
  • Get Started
  • Use Cases
    • Technical
    • Digital
    • eCommerce
    • Travel
    • Gambling
    • Public Sector
    • Enterprise
    • Small/Medium
    • Agencies
    • RapidSpike VS New Relic
  • Platform
    • PerformanceImprove page speed and conversions.
    • SecurityStop hackers and find vulnerabilities.
    • ReliabilityTrack errors and issues, get alerts.
    • How It WorksA quick overview of the platform.
  • Customers
  • Learn
    • About UsWe help make the web faster, safer and easier to use.
    • Knowledge BaseWe aim to answer your most frequently asked questions.
    • From The BlogGet to know feature development, monitoring tips and even the RapidSpike team.
      • Why should you use Single Sign-On?
      • The Online Travel Landscape
      • The ultimate guide to website monitoring solutions
  • Pricing
  • Log In
  • Get Started

Back to Knowledgebase

Categories

Account & Billing

Getting Started

Performance Monitoring

Alerts & Notifications

Uptime Monitoring

Security Monitoring

Synthetic User Journey Monitoring

Interpreting Data

Assurance and Search

Other Articles

User Journeys: Video Journeys

How to Create a Synthetic User Journey

What is Synthetic User Journey Monitoring?

Choosing Appropriate Selectors

User journey scripts are made up of steps and within these steps are actions. In order for the actions to interact with your site, they need selectors. Choosing the appropriate selectors is key to a successful user journey. You can choose from a variety of conditions for your selections, Here is a list of those currently available:

  • cssSelector
  • className
  • id
  • name
  • linktext
  • partialLinkText
  • tagName
  • xpath

Out of these conditions the easiest and most effective to use is the ‘cssSelector’ and ‘xpath’. To find selectors to use you need to open DevTools on your browser, we recommend using chrome. Right-click on your website and click ‘Insect’ which will open a new window. DevTools offers a vast amount of information however we are specifically interested in the ‘Elements’ tab. If you are unfamiliar with this panel there are many resources online covering each type of HTML tag and element.

To make scripting easier we recommend using an additional monitor and using DevTools in a separate window to make selectors easier to see. If you want to be taken to a specific element on your page you can right-click on it and press inspect which will highlight within DevTools. If you already have a selector and want to find it within the elements list, press ‘CMD’ + ‘F’ to open the search box.

Element List - DevTools

We will now look at the two types of selectors we primarily use. We will use the example of clicking a button on the RapidSpike site. Below is a screenshot of the RapidSpike homepage, for this article we will try clicking the ‘Login’ button.

RapidSpike Homepage

Using cssSelector

When choosing a cssSelector we are looking for a unique ‘id’ or a ‘class’ for the element you are looking to interact with. When inputting a selector into the script editor you have to take note of a few things:

  • Include a # before an ID (For example: #loginbutton)
  • Include a . before a class (For Example: .checkout.button)

These selectors can be used at the same time as long as you include a space between the different elements you are interacting with. If you want to use two separate parts of a class such as in the first div in this screenshot:

Div Elements

You can type: .faw-background.bgc-white0

It is worth noting that this only works if you enter in consecutive parts of the class and you wouldn’t be able to use a class of .faq-background.p-50 as the script editor won’t recognise this.

Going back to the RapidSpike site, our first step is to right-click the login button and click ‘inspect’ to jump to the element in DevTools.

Element Hierarchy

This has selected an ‘a’ tag which signifies a hyperlink. This is the correct link as it is the URL of our login screen. Just above this in the hierarchy is a ‘li’ (a list item) with an ID and a class we could use. It is more common for an ID to be unique that a class so we will go ahead and test the ID in the search box (Remember to use a # before entering in the ID.

Search Box with Selector

We can see that this is 1 of 2 meaning it isn’t unique. To ensure the script editor picks up the element you want to click it is essential that the selector we are using is unique. To make this unique we will now look up the hierarchy to see if we add another class or ID.

Here we can see an ID of ‘menu-header-menu’.

DevTools Elements

Going back to the search box we can now input this before the ID we found earlier.

Unique Selector

This is showing as 1 of 1 meaning it is unique and good to use in our click of the login button.

There is a simpler way to find a selector however we strongly recommend you do not use this method as it will likely lead to an unstable user journey. To immediately find a selector you can right-click on the element and click ‘Copy’ then ‘Copy Selector. The reason we avoid this is that the selector may not be unique and it can rely on many elements to stay in the same place.

Here is an example of a selector for a featured product image using the ‘Copy Selector’:

maincontent > div.carousel-12-columns > div.container-fluid.container-fluid–custom-.swiper-container.content-asset-body.swiper-container-initialized.swiper-container-horizontal > div.row.row–custom-.swiper-wrapper > div.col.home-swiper-slide.swiper-slide.homepage-wrapper.swiper-slide-next > div > div > a > section > picture > img

And here is the same element using our method of finding a suitable selector:

.shop.design .image

Using xpath

Using xpath takes a little more knowledge than using CSS as you need to understand how the selectors are formed. xpath can be more powerful than using a cssSelector as you are able to search for text, move up and down the element hierarchy and more more. There are many resources online for you to access and we highly recommend doing some research.

We will briefly cover two xpath expressions that you can use:

Contains Function – This expression looks for a specified tag name containing a specific attribute. Unlike cssSelectors you are able to search for other things than just class or ID and just need to include the attribute and value within the selector.

Example Structure: //tagname[contains(@attribute,’Value’)]

Example With Values: //Input[contains(@name,’address’)]

Text Function – This expression allows you to directly select an element containing specific text. If you have a site with dynamic selectors this can be extremely useful.

Example Structure: //tagname[text()=’ActualText’]

Example With Values: //a[text()=’Terms of Use’]

Here is an alternative selector to the cssSelector we used for the login button earlier, within xpath you are even able to select the first selector on the page if it isn’t unique:

This was a very simplistic look at choosing selectors for your user journey covering the basics. It would be useful to do further reading on this topic and try using our script editor for yourself. If you have any questions or need assistance, you can always contact our support either through live chat or via email at support@rapidspike.com.

Start your free 30-day trial today

No credit card required.

GET STARTED

RapidSpike - Global eCommerce Winner 2021
RapidSpike - Northern Digital Awards Winners
RapidSpike - Insider Yorkshires Most Exciting Companies
RapidSpike - UK Dev Awards 2021 Winner
RapidSpike - Prolific North Top Tech 30 To Watch
RapidSpike - Cyber Accelerator Alumni

Copyright © 2022 — All Rights Reserved.

RapidSpike - AWS Well Architected
RapidSpike - AWS Partner Network
  • Solutions
    • Technical
    • Digital
    • eCommerce
    • Travel
    • Gambling
    • Public Sector
    • Enterprise
    • Small/Medium
    • Agencies
    • New Relic
    • Customers
    • Pricing
  • Platform
    • Performance
    • Security
    • Reliability
    • How It Works
    • Insights
    • Alerting & Integrations
    • All Features
    • Synthetic User Journeys
    • Google Lighthouse
    • Core Web Vitals & Performance
    • Webpage Test
    • Real User Monitoring
    • Vulnerability Scanning
    • Magecart Attack Detection
    • Uptime
    • Assurance & SEO
  • Learn
    • Blog
    • Knowledge Base
    • API Documentation
    • System Status
    • RapidSpike Roadmap
    • Log In
  • Company
    • About Us
    • Contact
    • Careers
    • Press
    • Privacy Policy
    • Terms & Conditions
    • Vulnerability Disclosure