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.
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.
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.