Worthy-selenium-webdriver NPM

Selenium-webdriver

Description:

This is an npm package for creating functional tests using selenium, webdriver and mocha. The purpose of this package is to set a driver , open a browser and execute user actions on the page.

Why the NPM package?

The goal is to implement this tool in any service that requires functional tests, and create isolated tests for each service.

Installation:

npm install mocha

npm install worthy-selenium-webdriver

Driver installation

In order to open the browser and run the automation we need to install and set chromedriver on our local machine and install the chromedriver npm package.

Download Chromdriver.exe
Add the chromeDriver (unix executable file) to /usr/local/bin.

```
npm install chromedriver
```
Make sure the version of the npm package is updated to your chrome browser version on your computer.

Usage:

This npm package is based on the page object model.

The npm package is built as a page object model because of the webdriver we are creating. In the beginning of the test we pass it (the same driver) along with all the methods we are using to execute the actions (click, send keys, refresh etc.).

For every new component that we want to test we need to create a "page" object for it, its own class for its web elements.

Every class component extends from the abstract component class from the npm package.

For example - creating a new class for how it works page from content site:

class HiwElements extend from component {
	constructor(webdriver: any) {
   	super(webdriver); 
  }
}

In this class we set the web elements of the component (how it works) such as button, field, dropdown etc. and use the methods given from the extended abstract class "component". (There is more explanation down the readme.)
In this class we pass to the abstract class the webdriver we created in the test.

How to set webElements?

After you created the component class it's time to set the webElements. For this we use the methods from the component abstract class.

findElementByDataAutomation("dataAutomation attribute");

This method basically takes the driver we passed to it and uses the method findElement() of the selenium npm package to catch the webElement on the browser.

How to define the element dataAutomation attribute guideline?

First create a dataAutomation attribute for every element you want to test.
DataAuatomation structure - dataAutomation-'{componentName-{elementType}-{elementName}'
For Example - dataAutomation-'aboveTheFold-radioButton-necklace'

Example for setting webElement from HP -

getGetStartedButton = () => {
  this.findElementByDataAutomation("homePage-button-getStarted");
}

This webElement we created, we are going to call it inside our test from the instance of the elements class.

Content:

In this Npm package every ts file is a class with a constructor that we pass the webdriver to.

For Example -

class Actions {
    constructor(driver: Webdriver) {
    this.driver = driver;
  }
}

This.driver used in all the other functions in the same class and in order to use all the functions in the class, you need to create an instance of the class in the test.

For Example -

const actions = new Actions(webdriver);

There are four classes - Actions.ts, Component.ts, WaiterUtil.ts and WebDriverFactory.ts

1. Actions.ts -

Provides actions on the webElement and the driver such as - click, quit driver, send key etc.

For example -

await actions.waitAndClick("send the webElement here");

await actions.waitAndClick(homePage.getGetStartedButton);

Calling this function to this specific web Element, only when the element supposed to appear on the page.

2. Component.ts -

Component.ts the abstract class we inherit from, provides methods for the component such as findElementBy()..

3. WaiterUtil.ts -

Provides wait methods. Sometimes it takes time to see the webElement on the page and in order to avoid the test from failing because it didn't find the element on time, we set it to wait.

There are several waits, waiting for the entire test (the test stops for a few seconds), waiting for the element to appear on the page, etc.

4. WebDriverFactory.ts -

This class creates the driver for you, all you need to do is to call the method getDrivers();

Why drivers? you ask because we have several types you can choose from, desktop, mobile and remote for the git actions CI flow.

Structure for the tests:

Describe - function with 2 arguments:
- Title (String) - describe this suite of tests (describe the name of the component) - the description should be clear, readable and detailed.
- Function - that runs the tests itself (“its”)
  - It - function with 2 arguments:Title (String) - describe the specific test flow, should also be described clearly, readable and detailed.
    Function - that will run when the test runs, should include the flow of the test.
    Every “it” function must include at least one expect declaration (the expected result of the test).
    Note! - at the end of every test don't forget to close the driver.