Spectron Tip: Getting Selectors From Chrome Dev Tools

If you’re using Spectron (or even Protractor) for automating your applications probably the most time consuming thing is to figure out exactly what selectors you need in order to interact with your application. Whether to click on a button or to test if the text of a dialog is what you expect, you need a selector in order to access it.

The Chrome dev tools are awesome for figure out what selectors you need by looking at the Elements section and manually going through the page and looking at all the classes and such that you may need in your tests. However, here’s a quick tip if you have a complicated item that you need to select in your tests.

Copying CSS or XPath

The Chrome dev tools has a pretty nifty way to select very nested or complicated items on your page where you can then use for your tests as selectors.

I’m at a page for the Electron documentation and have the dev tools pulled up.

 

devtools

Let’s say I need to select the require('electron') part of this page. Not the most trivial of selectors, but the dev tools can really help us out here. Right click on the element in the dev tools and you’ll see something similar to a Copy item. From there you can choose Copy XPath or Copy Selector.

 

copy

And now you have a selector you can use for your tests!

Hopefully this little tip can help save you a ton of time trying to get the right selector that you need for your end-to-end tests with Spectron or Protractor.

Stay Informed

Sign up for the latest blogs, events, and insights.

We deliver solutions that accelerate the value of Azure.
Ready to experience the full power of Microsoft Azure?

Atmosera is thrilled to announce that we have been named GitHub AI Partner of the Year.

X