Custom Selectors

Custom Selectors is a new feature in Robot Ninja which allows you to choose and customize what elements Robot Ninja looks for when performing tests.

If your tests are failing because an element was not found, but you're certain that element is visible or that your store is working, then your tests can most likely be fixed by using custom selectors.

Adding Custom Selectors

From the Robot Ninja dashboard, you can find custom selectors by going into Settings > Selectors. The first thing you'll notice is the selectors are grouped by pages that Robot Ninja visits:

  • My Account Page
  • Product Page
  • Shop Page
  • Cart Page
  • Checkout Page
  • Order Received Page
  • All Pages

There are a number of different selector types/formats that Robot Ninja accepts:

  • Name: You can target a HTML element with specific name= attribute. For example, the default “My Account” login form username field has a name="username" attribute. (View core template).
  • Class: You can target a HTML element with a specific CSS class. For example, the default “Add to cart” button has the single_add_to_cart_button class. (View core template).
  • ID: You can target a HTML element with a specific id= attribute. For example, the default “Place order” button has the place_order ID . (View core template).
  • Tag: You can target a specific html element/tag. For example, we target variation <option> tags.
  • XPath: You can use XML Path Language to target HTML elements.

If you change your mind after updating the Custom Selectors for your store, you can always reset your selectors back to the default or update them to something else.

Using Custom Selectors

In order to use custom selectors effectively, you'll need to be able first identify what element Robot Ninja was looking for by looking at the error message, and then be able to find a selector that exists on your store to replace/fix the default behaviour.

How to identify what element Robot Ninja was looking for?

If Robot Ninja couldn't find an element, the error message should tell you what exactly was looked for. For example, if Robot Ninja couldn't find the Add to Cart button on your single product page, the error message will contain the following:

Robot Ninja could not find the add to cart button with class name `single_add_to_cart_button` on product page (URL).

Using this information you can find which selector needs to customized by using the selector string the test was looking for (i.e. single_add_to_cart_button)and navigating to the Custom Selectors page: Dashboard > Settings > Selectors.

Next we need to find the correct selector to replace the default one. In this example we're looking for a unique selector for the Add to cart button on the Product page. To do so you'll need to use a browser that has developer tools available (i.e. Chrome, Firefox, Safari, etc).

Right clicking on the element you're interested in and clicking "Inspect Elements" will bring up the developer tools window and highlight the source code for that element.

In screenshot above, the Add to cart button on my test store has the class name `my_custom_add_to_cart_class`. So all we need to do is go back into Robot Ninja and update the custom selector for the Add to cart button with this value.

Once the selector is saved, re-run your tests to confirm it has worked.

Common Custom Selector Uses

Here's a list of common uses for custom selectors that we have seen:

  • When a product has been added to the cart Robot Ninja tries to look for the message that usually pops up saying "X Product has been added to the cart". Perhaps you don’t display the standard WooCommerce notices and/or your store redirects customers straight to the checkout - this can be fixed with custom selectors.
  • When an order has been received. Perhaps you don’t display the standard order received template or redirect elsewhere?
  • When a customer logs into your “My Account” area. Perhaps your store doesn't have a log out link and therefore a custom selector can be used to signal that the customer has successfully logged in.


Can I add a new selector to be used?

Not at the moment. If you need a new selector that isn't found in the list, please contact us and we'll look at adding it for you:

Did this answer your question?