How to Visually Verify Your Locators

Intro

This is a pseudo guest post from Brian Goad. I've adapted one of his blog posts with his permission. You can see the original blog post here.

It's likely that you'll run into odd test behavior that makes you question the locators you're using in a test. But how do you interrogate your locators to make sure they are doing what you expect?

A Solution

By leveraging some simple JavaScript and CSS styling, we can highlight the element on the page that we're targeting. This way we can visually inspect it to make sure it is the one that we want.

Let's take a look at an example.