Nightwatch is a JavaScript-based, end-to-end (e2e) testing framework which typically can be used to mimic a user interacting with a website or webpages. I've used it here to test user interactions such as:
- button or link clicks
- modal activation
- asserting text/headings
- taking screenshots as a before and after check.
- Make a new directory, say on your desktop and change into that directory.
- Ensure you have node and NPM installed.
- Some commands to install and run Nightwatch from your terminal (on MAC in VS Code: control + ~):
npm init -y
npm --version
npm install nightwatch --save-dev
npx nightwatch
npm install chromedriver --save-dev
- We need to do some setup with the nightwatch.conf.js file. Namely, tell Nightwatch where our test scripts should be accessed from and the name of the browserName value. So in nightwatch.conf.js:
- Pass in the folder name of the test scripts. In our case, we called the folder 'tests'.
- Pass in the browser name under the desiredCapabilities object. In our case, it was 'chrome'.
module.exports = {
src_folders: ['tests'],
...
desiredCapabilities: {
browserName : 'chrome'
},
...
}
- Create in your code editor, a folder containing your tests and of course it should match the src_folders value.
- Ensure your version of browser (using Chrome for this repo) matches the driver version. Check out the debugging section below.
Back in terminal:
npx nightwatch run
npx nightwatch enterYourTestFileNameHereAndFilePath.test.js
- Nightwatch [API docs] (https://nightwatchjs.org/api/)
- Explanation of [terminal and setup config] (https://www.hashbangcode.com/article/getting-and-running-nightwatchjs)
- Video tutorials from [Testing Automation University] (https://testautomationu.applitools.com/nightwatchjs-tutorial/)
- Screenshots for error events can be turned on in nightwatch.conf.js. Otherwise, you can take screenshots for 'successful' events or even intermediary steps. This resource seemed to work for me: https://testersdock.com/nightwatch-js-screenshots/
-
// debugger;
-
// .perform(() => {debugger})
-
node --inspect -brk node_modules/.bin/nightwatch -- tests/homepage.test.js
-
node --inspect -brk node_modules/.bin/nightwatch -- --tag smoke-homepage
-
chrome://inspect/#devices
-
Under Remote Target, click inspect link. Then run the script execution (play btn top-right)
-
Adding debugger in the script automatically stops the execution at the line where this keyword is written.
-
Alternatively, using the .perform() closure above also stops the script.
-
Using the debugger tool is useful in checking state of interactive components right before an execution event.
After returning to this project twice about 6 months aprt, my Chrome Browser was incompatible with the Webdriver used to run the browser context. Went to (ChromeDriver website)[https://chromedriver.chromium.org/downloads] and matched their version number with my browser version: download the chromedriver zip file and drag and drop chromedriver.exe into node_modules/.bin/ folder. I had an issue with Chrome Version 115 but no equivalent web driver. Went here (115 version) [https://googlechromelabs.github.io/chrome-for-testing/#stable] downloaded this: https://edgedl.me.gvt1.com/edgedl/chrome/chrome-for-testing/115.0.5790.102/mac-x64/chromedriver-mac-x64.zip