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.
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.
Cloud management is difficult to do manually, especially if you work with multiple cloud…
Azure’s scalable infrastructure is often cited as one of the primary reasons why it's the…
https://www.youtube.com/watch?v=wDzCN0d8SeA Watch our "Unlocking the Power of AI in your Software Development Life Cycle (SDLC)"…
FinOps is a strategic approach to managing cloud costs. It combines financial management best practices…
Using Kubernetes with Azure combines the power of Kubernetes container orchestration and the cloud capabilities…
In the intricate landscape of modern business, compliance is both a cornerstone of operational integrity…
View Comments
Hi Jonathan, I'm taking a look at Chrome App that has been converted to Electron. When I launch the app under OSX, the Chrome Developer Tools window opens alongside the Electron App. In the Developer Tools I can view the HTML for the Electron App, select an element, but right clicking the selected element no longer brings up the menu that allows you to copy selectors. Is this your experience as well?
Hi Jonathan, I'm taking a look at Chrome App that has been converted to Electron. When I launch the app under OSX, the Chrome Developer Tools window opens alongside the Electron App. In the Developer Tools I can view the HTML for the Electron App, select an element, but right clicking the selected element no longer brings up the menu that allows you to copy selectors. Is this your experience as well?
I haven't seen that. I wonder what's different. Is it greyed out or just not there?
The Dev Tools window appears, but say I right click on an element, the pop-up that normally lets you inspect an element doesn't appear. I can view the HTML source, but I have to use the find-element arrow to try to track down the actual item.
I haven't seen that. I wonder what's different. Is it greyed out or just not there?
The Dev Tools window appears, but say I right click on an element, the pop-up that normally lets you inspect an element doesn't appear. I can view the HTML source, but I have to use the find-element arrow to try to track down the actual item.