JavaScript tutorial using Selenium Webdriver, Chai, and Mocha.
By: Joshua Cadavez
Will be testing on https://library-app.firebaseapp.com/ from the EmberJS tutorial.
This goes over the basic features of Selenium Webdriver, Chai, and Mocha.
-
a simple and concise programming interface that drives the browser via object-oriented API.
-
a BDD/TDD assertion library for node and paired usually with the JavaScript testing framework.
-
a JavaScript test framework that runs on NodeJS. It's best used for async testing and runs serially.
This tutorial was done on Mac OS. I don't have an explicit tutorial for Windows. But, I'll post a YouTube playlist where viewers suggest alternatives.
Concepts covered:
- Implementing Page Object Model.
- Implementing Selenium Webdriver to perform actions on web element.
- Implementing Mocha as the test framework and Mochawesome as the test reporter
- Implement Chai for better assertions
- Implement parallel testing with Mocha
- Implement headless browser
Scenarios for demonstration:
-
Home Page
- Given the Admin dropdown, when clicked, then it SHOULD display three items.
- Given no text in Email input, when you click 'Request Invitation' button, then the button's opacity should be 0.65.
- Given text in Email input, when you click 'Request Invitation' button, then there SHOULD be a confirmation message.
-
Books Page
- Given the Books list, then it SHOULD display at least one row of Book Information
- Given the Authors names are clickable, when you click them, then it SHOULD display the Cancel btn and Admin dropdown.
Step 0: Setup Tools
- Used NodeJS and NPM. Helpful resource: https://docs.npmjs.com/downloading-and-installing-node-js-and-npm
- Setup your editor or IDE. I used Visual Studio Code
- An extension to find Web elements. I used ChroPath
- Optional I downloaded HomeBrew (since NPM might not downloaded the packages correctly)
Step 1: Download all necessary dependencies for Selenium
These dependencies should reflect on your 'package.json' Visit tag '0001_setup'.
- Start a new project with below Terminal command
npm init
- Install Selenium
npm install selenium-webdriver
If you face some sort of UnhandledPromiseRejectionWarning like I did, use the below commmand.
npm install selenium-webdriver@3.6.0
- Download standalone servers that implement WebDriver's wire protocol There's probably a way to download and use them local to the computer.
sudo npm i chromedriver
sudo npm i geckodriver // I used Chromedriver. But, this is how to install one for FireFox.
- Create a sample JS file to sanity check if driver works
- see library.js file
- Run node library.js
Step 2: Automate web elements with Selenium
Visit tag '0002_findWebElements' to identify web elements. Also, in this tag, I gave several examples:
- xpath
- css
- id
- partialLinkText
Visit tag '0003_sendKeysClickWaits' for web element actions. See library.js file.
Some helpful resources:
- https://www.selenium.dev/selenium/docs/api/javascript/
- https://saucelabs.com/resources/articles/selenium-tips-css-selectors
- https://www.browserstack.com/guide/css-selectors-in-selenium
Step 3: Adding Mocha
The library.js file is renamed to test_library.js and added to the test module. Visit tag '0004_mocha' for mocha implementation.
-
Install Mocha globally
npm install --global mocha
-
Optional: if you want to run Mocha tests via NPM, modify the scripts "test": "..." in the package.json.
npm run test
-
Setup hooks for test run cycle https://mochajs.org/#run-cycle-overview
-
Add asserts using Node.js https://nodejs.org/api/assert.html
Step 4: Adding Mochawesome (as the Report)
Visit tag '0005_Mochawesome' for mocha implementation.
-
Install Mochawesome
npm install --save-dev mochawesome
-
Run command to show Test Report.
mocha test --reporter mochawesome --reporter-options autoOpen=true
-
It's optional to add the above command to the package.json file in the scripts section.
Step 5: Implementing Page Object Model (POM)
Visit tag '0006_pom' for POM implementation. Optional: Visit tag '0007_pommethods' for POM method shortcuts.
-
Create a Base template for all webpages. See base_page.js
-
Create Page Object templates extending from the Base Page. See home_page.js
-
Use the page objects to make your tests readable. See test_library.js
-
Use NodeJS Assertions to verify test. See test_library.js https://nodejs.org/api/assert.html
-
Optional: Add shortcut POM methods.
Step 6: Chai
Visit tag '0008_chai' for chai implementation.
-
Install 'Chai' and 'Chai-as-Promise'
npm install chai --save
npm install chai-as-promised
-
Use any methods needed based off ChaiJS models https://www.chaijs.com/guide/styles/
Optional: Implement Locators
Visit tag '0009_locators' for how to organize locators.
-
Moved home_page.js to the newly created home folder.
-
Created home_locators.js file and moved the locators to that file.
Step 7: Implement Headless Browser Testing
This is a great blog post why it's better to implement Headless Browser testing. Note, be wary because I heard cases that headless isn't as fast as expected.
Visit tag '0010_headless' for headless implementation.
- Add 'headless' to Chrome options.
o.addArguments("headless");
Step 8: Implement Parallel Testing
You need at least two test files to see parallel testing. Visit tag '0011_tests_books' for another test example with the Books tab.
- Install mocha-parallel-tests to run tests in parallel.
npm install --save-dev mocha mocha-parallel-tests
- Edit the package.json's NPM script to point to the 'test' folder. Also, include the 'mocha-parallel-tests' parameter.
mocha-parallel-tests test --reporter mochawesome --reporter-options autoOpen=true
- To run them all via CLI
npm run test
Visit tag '0012_parallel' for parallel testing implementation.