You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: README.md
+25-25
Original file line number
Diff line number
Diff line change
@@ -1,67 +1,67 @@
1
1
# WebDriverIO TypeScript Web UI Automation Demo
2
2
3
-
This repository contains a collection of sample webdriverIO (v8) projects and libraries that demonstrate how to use the tool and develop automation script using the Mochajs BDD framework. It uses the `chromedriver` NPM package that wraps the ChromeDriver for you. This service does not require a Selenium server, but uses ChromeDriver to communicate with the browser directly.
3
+
This repository contains a collection of sample webdriverIO (v8) projects and libraries that demonstrate how to use the tool and develop automation scripts using the Mochajs BDD framework. It uses the `chromedriver` NPM package that wraps the ChromeDriver for you. This service does not require a Selenium server but uses ChromeDriver to communicate with the browser directly.
4
4
5
-
This boilerplate code support Typescript, also provides sample utilities to read data from MS-Excel, executes SQL statements to any database (RDBMS such as Oracle, TeraData, MySQL, Vertica) for end to end testing. It generate Allure, JSON, Junit/Xunit, Spec reporters as well. `Please note that at the time of writing (January 2023) the wdio reporting module of JSON, Junit/Xunit are not fully compatible with V8 hence it is disabled from this boilerplate code.`
5
+
This boilerplate code supports Typescript, also provides sample utilities to read data from MSExcel, and executes SQL statements to any database (RDBMS such as Oracle, TeraData, MySQL, Vertica) for end-to-end testing. It generates Allure, JSON, Junit/Xunit, and Spec reporters as well. `Please note that at the time of writing (January 2023) the wdio reporting module of JSON, Junit/Xunit are not fully compatible with V8 hence it is disabled from this boilerplate code.`
6
6
7
7
8
8
## Installation
9
-
This project is tested on **Node v18.0.0** and above. While earlier versions of node may be compatible, but they have not been verified.
9
+
This project is tested on **Node v18.0.0** and above. While earlier versions of the Node may be compatible, they have not been verified.
10
10
11
-
* Node.JS: Install from the site - https://nodejs.org/en/ take the LTS version based on your Operating system. Please make sure you install NodeJS globally.
11
+
***Node.JS**: Install from the site - https://nodejs.org/en/ take the LTS version based on your Operating system. Please make sure you install NodeJS globally.
12
12
13
-
* JDK: It is optional, install JDK and make sure class path is set properly. JAVA is require to start `Selenium Server` on your local environment nothing else.
13
+
***JDK**: It is optional, install JDK and make sure the classpath is set properly. JAVA is required to start `Selenium Server` on your local environment nothing else.
14
14
15
15
## Selenium Tests / Appium Tests
16
16
17
-
To run your test you must have Selenium / Appium server up and running to execute any webdriverIO tests, or it will fail fast with an error. To start selenium automatically it has been added as part of `services: ['selenium-standalone']` and `services: ['appium']` in the *.conf.ts. That's all there is to it.!.
17
+
To run your test you must have the Selenium / Appium server up and running to execute any webdriverIO tests, or it will fail fast with an error. To start selenium automatically it has been added as part of `services: ['selenium-standalone']` and `services: ['appium']` in the *.conf.ts. That's all there is to it.!.
18
18
19
19
## Run Some Sample Tests
20
20
21
-
To execute the entire test suite on local development or cloud provider, you can use below
21
+
To execute the entire test suite on local development or cloud provider, you can use the below
22
22
23
-
* Option 1: Local Environment `npm run test-local`.
23
+
***Option 1**: Local Environment `npm run test-local`.
24
24
25
-
* Option 2: You can also run in `SauceLabs` or `BrowserStack` or `LambdaTest` using `npm run test-sauce` or `npm run test-browserstack` or `npm run test-browserstack`.
25
+
***Option 2**: You can also run in `SauceLabs` or `BrowserStack` or `LambdaTest` using `npm run test-sauce` or `npm run test-browserstack` or `npm run test-browserstack`.
26
26
27
-
* Option 3: Mobile Device. To execute tests on mobile device use: `npm run test-mobile`.
27
+
***Option 3**: Mobile Device. To execute tests on mobile devices use: `npm run test-mobile`.
28
28
29
29
💡 Before running mobile tests, perform the requisite Appium setup. Refer [Appium Docs](http://appium.io/getting-started.html?lang=en)
30
30
31
31
## Config Files
32
32
33
-
WebdriverIO uses configuration files to setup and execute tests in specific ways. The configuration is fully customizable, and different functions can be invoked before, during and after each test or test suite. Config files are found in the `the root directory of this boilerplate project.`and all ends with `*.conf.ts`. These can be called via the the cli.
33
+
WebdriverIO uses configuration files to set up and execute tests in specific ways. The configuration is fully customizable, and different functions can be invoked before, during, and after each test or test suite. Config files are found in the `the root directory of this boilerplate project.`and all ends with `*.conf.ts`. These can be called via the CLI.
`SauceLabs`, `BrowserStack` and `lambdatest` specific code has been added in the `wdio.sauce.conf.ts`, `wdio.browserstack.conf.ts` and `wdio.lambdatest.conf.ts` under the `/test/config` folder. You just need to provide your SauceLabs/BrowserStack/LambdaTest credentials in the config file. To run test on SauceLabs, execute command `npm run test-sauce` to run test on BrowserStack `npm run test-browserstack`, to run test on LambdaTest `npm run test-lambdatest`.
37
+
`SauceLabs`, `BrowserStack`, and `lambdatest` specific code has been added in the `wdio.sauce.conf.ts`, `wdio.browserstack.conf.ts` and `wdio.lambdatest.conf.ts` under the `/test/config` folder. You just need to provide your SauceLabs/BrowserStack/LambdaTest credentials in the config file. To run tests on SauceLabs, execute the command `npm run test-sauce` to run tests on BrowserStack `npm run test-browserstack`, to run tests on LambdaTest `npm run test-lambdatest`.
38
38
39
39
## Logs
40
40
41
-
Complete set of execution `logs` will be generated during the run time and can be found in the parent folder location `/logs`.
41
+
A complete set of execution `logs` will be generated during the run time and can be found in the parent folder location `/logs`.
42
42
43
43
## Reporters
44
44
45
45
WebdriverIO uses several different types of test reporters to communicate pass/failure.
46
46
47
47
### 1. Allure Reporter
48
48
49
-
The Allure Reporter creates [Allure](https://docs.qameta.io/allure/) test reports which is an HTMLgenerated website with all necessary information to debug your test results and take a look on error screenshots. Add allure to the reporters array in config file and define the output directory of the allure reports. Please note, this has been added in wdio.shared.config.
49
+
The Allure Reporter creates [Allure](https://docs.qameta.io/allure/) test reports which is an HTML-generated website with all necessary information to debug your test results and take a look at error screenshots. Add allure to the reporters' array in the config file and define the output directory of the allure reports. Please note, this has been added in wdio.shared.config.
50
50
51
51
To generate and view an Allure report inside your corp network or locally, run `npm run allure-report`. The Allure report is hosted on a `web server` and can be accessed through http://YourMachineIP:5050/ and also generated locally which can be found at `./allure-report/index.html`. A typical Allure report will look like this.
## Develop automation scripts (for both desktop browser and mobile browser / app)
60
+
## Develop automation scripts (for both desktop browser and mobile browser/app)
61
61
62
-
You can write test by using Mocha BDD framework. You can choose TypeScript / JavaScript based design pattern or ES6 based. More about Mocha can be found at https://mochajs.org/
62
+
You can write tests by using the Mocha BDD framework. You can choose a TypeScript/JavaScript based design pattern or ES6 based. More about Mocha can be found at https://mochajs.org/
63
63
64
-
Refer complete [WebdriverIO v8 API](https://webdriver.io/docs/api) methods to write your automation tests.
64
+
Refer to complete [WebdriverIO v8 API](https://webdriver.io/docs/api) methods to write your automation tests.
65
65
66
66
Sample tests are located in `*.specs.js` files in the `/test/specs/` directory. A typical test will look similar to this:
67
67
```typescript
@@ -79,15 +79,15 @@ describe('Performing a search operation on Yahoo Page', () => {
79
79
```
80
80
## The Page Object Design Pattern
81
81
82
-
Within your web app's UI there are areas that your tests interact with. A Page Object simply models these as objects within the test code. This reduces the amount of duplicated code and means that if the UI changes, the fix need only be applied in one place. In other wards one of the challenges of writing test automation is keeping your [selectors] (classes, id's, or xpath's etc.) up to date with the latest version of your code. The next challenge is to keep the code you write nice and [DRY] (Don't Repeat Yourself). The page object pattern helps us accomplish this in one solution. Instead of including our selectors in Spec file (in Mocha), we instead place them in a `<pagename>.ts` file where we can manage all these selectors and methods together. Your test file should only call the test methods.
82
+
Within your web app's UI there are areas that your tests interact with. A Page Object simply models these as objects within the test code. This reduces the amount of duplicated code and means that if the UI changes, the fix need only be applied in one place. In other words, one of the challenges of writing test automation is keeping your [selectors] (classes, IDs, or Xpaths, etc.) up to date with the latest version of your code. The next challenge is to keep the code you write nice and [DRY] (Don't Repeat Yourself). The page object pattern helps us accomplish this in one solution. Instead of including our selectors in the Spec file (in Mocha), we place them in a `<pagename>.ts` file where we can manage all these selectors and methods together. Your test file should only call the test methods.
83
83
84
-
You can also place reusable functions or logic inside of these pages and call them from your step files. The page object serves as a layer of abstraction between tests and code. When A test fails, it fails on a individual step. That step may call a selector that is no longer valid, but that selector may be used by many other steps. By having a single source of truth of what the selector is supposed to be, fixing one selector on the page object could repair a number of failing tests that were affected by the same selector.
84
+
You can also place reusable functions or logic inside these pages and call them from your step files. The page object serves as a layer of abstraction between tests and code. When A test fails, it fails on an individual step. That step may call a selector that is no longer valid, but that selector may be used by many other steps. By having a single source of truth of what the selector is supposed to be, fixing one selector on the page object could repair a number of failing tests that were affected by the same selector.
85
85
86
86
An object called `Page` will be created with the prototype model or by ES6 class pattern. This ensures that every instance of a page object is exported as a stateless construct. Any any changes to that state are handled in the browser, rather than on the server.
87
87
88
88
It is preferable to separate page objects into individual files that end with `.page.ts`. These will require the basic `page.ts` prototype construct / abstract class and create new objects for each individual page.
89
89
90
-
For more information on the implementation of `Page Object Design Pattern`, refer to the `/test/page-objects` directory. A typical page class using ES6 syntax will look similar to this:
90
+
For more information on the implementation of the `Page Object Design Pattern`, refer to the `/test/page-objects` directory. A typical page class using ES6 syntax will look similar to this:
91
91
92
92
💡 If you want to use ES5 syntax, refer to the sample.page.js under util-examples.
93
93
@@ -125,7 +125,7 @@ export default new LoginPage()
125
125
126
126
## Working with DataBase
127
127
128
-
A relational database is, simply, a database that stores related information across multiple tables and allows you to query information in more than one table at the same time. Your application under test displays data from these database. So when you are actually performing automation testing it is very likely that you need to verify the data between actual (which you got it from browser) Vs expected (which you will get it from the database by executing SQL statements on database). This can be done by below statements in your code.
128
+
A relational database is, simply, a database that stores related information across multiple tables and allows you to query information in more than one table at the same time. Your application under test displays data from this database. So when you are actually performing automation testing it is very likely that you need to verify the data between actual (which you got from the browser) Vs expected (which you will get from the database by executing SQL statements on the database). This can be done by the below statements in your code.
129
129
130
130
```javascript
131
131
//example of connection to Oracle DataBase
@@ -152,10 +152,10 @@ Note: `node-any-jdbc` is NOT packaged under this project. If you need, you can i
152
152
153
153
## Working with MS-Excel
154
154
155
-
You can user MS-Excel and store your test data, expected data in an excel sheet. Tou can keeep any number of excel sheets you want and use below common methods to puull data from youe sheet to be use as part of testing. Please note it only support .xlsx file format. For more information refer to the `common-utilities.js` and `util-examples`
155
+
You can use MSExcel and store your test data, and expected data in an Excel sheet. You can keep any number of Excel sheets you want and use the below common methods to pull data from your sheet to be used as part of testing. Please note it only supports the .xlsx file format. For more information refer to the `common-utilities.js` and `util-examples`
156
156
157
157
```javascript
158
-
//example of pulling data from MS-Excel
158
+
//example of pulling data from MSExcel
159
159
160
160
var utl =require('../utilities/common-utilities.js');
Refer to the common Javascript functions that provides clean, performant methods for manipulating objects, collections, MS-Excel utilities, DataBase utilities etc. Few sample code can be found in ./util-examples/
183
+
Refer to the common Javascript functions that provide clean, performant methods for manipulating objects, collections, MS-Excel utilities, DataBase utilities, etc. A few sample codes can be found in ./util-examples/
184
184
185
185
Use [Underscore.js](http://underscorejs.org/) already bundled inside the framework which provides over 100 functions that support both your favorite workaday functional helpers: map, filter, invoke — as well as more specialized goodies: function binding, javascript templating, creating quick indexes, deep equality testing, and so on.
0 commit comments