Nightwatch Inspector that allows you to tests command directly from the browser
npm install @nightwatch/nightwatch-inspector

Nightwatch Inspector is a developer tool 🛠️ which currently supports Google Chrome. It is designed to help you CSS selectors for elements on a webpage. It also allows you to tests nightwatch commands directly from the browser in Nightwatch debug mode.
This developer tool doesn't require any setup or downloads. You can simply use the version of Nightwatch where the Nightwatch Inspector is supported. It is specifically designed to work with Nightwatch.js, a popular end-to-end testing framework.
pause or debug command in your test to wait. For e.g.js
it('Demo test ecosia.org', async function(browser) {
browser
.navigateTo('https://www.ecosia.org')
.debug()
});
`
3. Run your Nightwatch tests by passing --debug flag
`sh
npx nightwatch ./nightwatch/examples/basic/ecosia.js -e chrome --debug
`
4. In chrome browser, inspect the elements of the webpage and go to Nightwatch Inspector tab
5. Click the Explore Mode button to find CSS selectors for the elements on the webpage.
6. Use these selectors in Nightwatch commands and click the Try button to see the results
🎉 Key Features
1. Easily find CSS selectors for elements on a webpage
2. Test Nightwatch commands directly from the browser
3. Copy selectors to clipboard with one click
4. Highlight elements on hover for easy identification
5. History table of selectors and commands.
🎥 Demo
Check out the demo of the playground in action 👀
🔧 Use in Other Projects (with a limitation)
This tool is not limited to Nightwatch.js and can be used in any project that needs CSS selectors. However, it comes with a limitation; you cannot test Nightwatch commands directly from the browser because it doesn't connected to the Nightwatch Server.`js
import {crxfile} from '@nightwatch/nightwatch-inspector';
``This code snippet shows how to import the Nightwatch Inspector in other projects. 💻