$ cnpm 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.
Make sure Nightwatch is already installed and it supports the Nightwatch Inspector. If it is not installed, you can refer to the documentation ????
Add pause or debug command in your test to wait. For e.g.
it('Demo test ecosia.org', async function(browser) {
browser
.navigateTo('https://www.ecosia.org')
.debug()
});
Run your Nightwatch tests by passing --debug flag
npx nightwatch ./nightwatch/examples/basic/ecosia.js -e chrome --debug
In chrome browser, inspect the elements of the webpage and go to Nightwatch Inspector tab
Click the Explore Mode button to find CSS selectors for the elements on the webpage.
Use these selectors in Nightwatch commands and click the Try button to see the results
Check out the demo of the playground in action ????

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.
import {crxfile} from '@nightwatch/nightwatch-inspector';
This code snippet shows how to import the Nightwatch Inspector in other projects. ????
Contributions are always welcome! If you have any suggestions, bug reports, or pull requests, please feel free to open an issue or pull request.
Copyright 2013 - present © cnpmjs.org | Home |