# worthy-selenium-webdriver

> Selenium webdriver tests

Latest version **1.0.15** (published 2021-11-08) · 0 weekly downloads

## Install

```sh
npm install worthy-selenium-webdriver
pnpm add worthy-selenium-webdriver
yarn add worthy-selenium-webdriver
bun add worthy-selenium-webdriver
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.15 |
| Published | 2021-11-08 |
| First published | 2021-10-24 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 20.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | rotemvy0209 |

## Links

- npm: https://www.npmjs.com/package/worthy-selenium-webdriver
- npm.io page: https://npm.io/package/worthy-selenium-webdriver

## Dependencies (6)

- [chai](https://npm.io/package/chai.md) ^4.3.4
- [mocha](https://npm.io/package/mocha.md) ^9.1.3
- [@types/node](https://npm.io/package/@types/node.md) ^16.11.6
- [chromedriver](https://npm.io/package/chromedriver.md) ^95.0.0
- [selenium-webdriver](https://npm.io/package/selenium-webdriver.md) ^4.0.0-beta.4
- [@types/selenium-webdriver](https://npm.io/package/@types/selenium-webdriver.md) ^4.0.15

## Recent versions

- 1.0.15 (latest) — 2021-11-08
- 1.0.14 — 2021-11-07
- 1.0.13 — 2021-11-07
- 1.0.12 — 2021-11-07
- 1.0.11 — 2021-11-02
- 1.0.10 — 2021-11-02
- 1.0.9 — 2021-11-02
- 1.0.8 — 2021-11-02
- 1.0.7 — 2021-10-25
- 1.0.6 — 2021-10-25
- 1.0.5 — 2021-10-24
- 1.0.4 — 2021-10-24
- 1.0.3 — 2021-10-24
- 1.0.2 — 2021-10-24
- 1.0.1 — 2021-10-24

## README

# <span style="color:#97C3C8">Selenium-webdriver</span>



## <span style="color:#288690">Description:</span>

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.



## <span style="color:#288690">Why the NPM package?</span>

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



## <span style="color:#288690">Installation:</span>

```json
npm install mocha
```



```json
npm install worthy-selenium-webdriver
```



## <span style="color:#288690">Driver installation</span>

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.

1. Download [Chromdriver.exe](https://chromedriver.storage.googleapis.com/index.html?path=95.0.4638.54/) 

2. Add the chromeDriver (unix executable file) to **/usr/local/bin.**

   

3. ```typescript
   npm install chromedriver
   ```

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

## <span style="color:#288690">Usage:</span>

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:**

```typescript
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.



### <span style="color:#288690">How to set webElements?</span>

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

```typescript
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. 

### <span style="color:#288690">How to define the element dataAutomation attribute guideline?</span>

1. First create a dataAutomation attribute for every element you want to test.

   DataAuatomation structure - <span style="color:#826FB4">dataAutomation-'{componentName-{elementType}-{elementName}'</span>

   For Example - <span style="color:#826FB4">dataAutomation-'aboveTheFold-radioButton-necklace'</span>



Example for setting webElement from HP - 

```typescript
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.

 

## <span style="color:#288690">Content:</span>

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

For Example - 

```typescript
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 - 

```typescript
const actions = new Actions(webdriver);
```

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



### <span style="color:#92A3A4">1. Actions.ts -</span> 

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

For example - 

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

```typescript
await actions.waitAndClick(homePage.getGetStartedButton);
```

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

### <span style="color:#92A3A4">2. **Component.ts** -</span> 

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

### <span style="color:#92A3A4">3. WaiterUtil.ts -</span> 

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.

### <span style="color:#92A3A4">4. WebDriverFactory.ts -</span> 

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

<span style="color:#AB729E">Why drivers?</span> you ask because we have several types you can choose from, desktop, mobile and remote for the git actions CI flow. 



## <span style="color:#288690">Structure for the tests:</span>

* **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).

      #### <span style="color:#F5D161">Note! - at the end of every test don't forget to close the driver.</span>

---
_Source: https://npm.io/package/worthy-selenium-webdriver · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
