Skip to content

Commit

Permalink
Merge pull request #6 from garg3133/nightwatch-v3
Browse files Browse the repository at this point in the history
  • Loading branch information
Vaibhav Singh authored Mar 4, 2024
2 parents 117d65b + bd658b9 commit 0bf15a6
Show file tree
Hide file tree
Showing 31 changed files with 3,574 additions and 2,291 deletions.
10 changes: 8 additions & 2 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,19 @@
"plugin:@typescript-eslint/recommended"
],
"parserOptions": {
"ecmaVersion": 2018,
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"jsx": false
},
"project": "./tsconfig.json"
"project": ["./tsconfig.json", "./nightwatch/tsconfig.json"]
},
"overrides": [
{
"extends": ["plugin:@typescript-eslint/disable-type-checked"],
"files": ["./**/*.js"]
}
],
"env": {
"mocha": true,
"node": true
Expand Down
5 changes: 3 additions & 2 deletions .github/workflows/build.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ jobs:
strategy:
matrix:
node-version: [16.x, 18.x, 20.x]

steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
Expand All @@ -25,8 +26,8 @@ jobs:
- name: create env file
run: |
touch .env
echo BROWSERSTACK_USER =${{ secrets.BROWSERSTACK_USER }} >> .env
echo BROWSERSTACK_KEY =${{ secrets.BROWSERSTACK_KEY }} >> .env
echo "BROWSERSTACK_USERNAME=${{ secrets.BROWSERSTACK_USER }}" >> .env
echo "BROWSERSTACK_ACCESS_KEY=${{ secrets.BROWSERSTACK_KEY }}" >> .env
- name: install typescript globally
run: |
npm install -g typescript
Expand Down
25 changes: 17 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
# Nightwatch-typescript-boilerplate
# Nightwatch Typescript Boilerplate
[![Build][github-action-badge]][github-action-build]
[![TypeScript version][ts-badge]][typescript-4-7]
[![TypeScript version][ts-badge]][typescript-4-9]
[![Node.js version][nodejs-badge]][nodejs]
[![MIT][license-badge]][license]

🧑‍💻 Developer ready: This project shows example of Nightwatch end-to-end tests written in typescript.

- [TypeScript][typescript] [4.7][typescript-4-7]
- [Basic Examples using TypeScript](/nightwatch/examples/)
- Examples using [Page Object Model][page-object-model]
- [Page Object Definitions](/nightwatch/pages/)
- [Using satisfies operator](/nightwatch/pages/FileUpload.ts)
- [Without satisfies operator](/nightwatch/pages/Dropdown.ts) (for TypeScript < 4.9)
- [Using Page Object Sections](/nightwatch/pages/DragAndDrop.ts)
- [Page Object Examples](/test/)
- [Custom command example](/nightwatch/custom-commands/strictClick.ts)


### Other features:
- [TypeScript][typescript] [4.9][typescript-4-9]
- [ESLint][eslint] with some initial rules recommendation
- NPM [scripts](#available-scripts) for common operations
- Simple example of TypeScript code
- [.editorconfig][editorconfig] for consistent file format
- VSCode Integration
- Multiple Configurations ([Chromedriver][chromedriver], [Cucumberjs][cucumberjs], [Browserstack][browserstack])
- Cross Platform Example Tests
- [Page Object Model][page-object-model]

## Getting started

Expand Down Expand Up @@ -47,13 +56,13 @@ npm install

Licensed under the MIT. See the [LICENSE][license] file for details.

[ts-badge]: https://img.shields.io/badge/TypeScript-4.7-blue.svg
[ts-badge]: https://img.shields.io/badge/TypeScript-4.9-blue.svg
[github-action-badge]: https://github.com/nightwatchjs/nightwatch-typescript-boilerplate/actions/workflows/build.yml/badge.svg
[github-action-build]: https://github.com/nightwatchjs/nightwatch-typescript-boilerplate/actions/workflows/build.yml
[typescript]: https://www.typescriptlang.org/
[typescript-4-7]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-7.html
[typescript-4-9]: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-9.html
[nodejs]: https://nodejs.org/dist/latest-v16.x/docs/api/
[nodejs-badge]: https://img.shields.io/badge/Node.js->=%2010.0.0-blue.svg
[nodejs-badge]: https://img.shields.io/badge/Node.js-%3E=%2016.0.0-blue.svg
[license]: https://github.com/nightwatchjs/nightwatch-typescript-boilerplate/blob/main/LICENSE.md
[license-badge]: https://img.shields.io/badge/license-MIT-blue.svg
[eslint]: https://github.com/eslint/eslint
Expand Down
File renamed without changes.
126 changes: 90 additions & 36 deletions nightwatch.conf.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Autogenerated by Nightwatch
// Refer to the online docs for more details: https://nightwatchjs.org/gettingstarted/configuration/
const Services = {}; loadServices();

//
// Refer to the online docs for more details:
// https://nightwatchjs.org/guide/configuration/nightwatch-configuration-file.html
//
// _ _ _ _ _ _ _
// | \ | |(_) | | | | | | | |
// | \| | _ __ _ | |__ | |_ __ __ __ _ | |_ ___ | |__
Expand All @@ -10,25 +10,34 @@ const Services = {}; loadServices();
// \_| \_/|_| \__, ||_| |_| \__| \_/\_/ \__,_| \__| \___||_| |_|
// __/ |
// |___/
//

module.exports = {
// An array of folders (excluding subfolders) where your tests are located;
// if this is not specified, the test source must be passed as the second argument to the test runner.
src_folders: ['dist/src'],
src_folders: ['test', 'nightwatch/examples'],

// See https://nightwatchjs.org/guide/working-with-page-objects/
page_objects_path: ['dist/pages'],
// See https://nightwatchjs.org/guide/concepts/page-object-model.html
page_objects_path: ['nightwatch/pages'],

// See https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands
custom_commands_path: [],
// See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
custom_commands_path: ['nightwatch/custom-commands'],

// See https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-assertions
// See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-assertions.html
custom_assertions_path: '',

// See https://nightwatchjs.org/guide/#external-globals
// See https://nightwatchjs.org/guide/extending-nightwatch/adding-plugins.html
plugins: [],

// See https://nightwatchjs.org/guide/concepts/test-globals.html#external-test-globals
globals_path: '',

webdriver: {},

test_workers: {
enabled: true,
workers: 'auto'
},

test_settings: {
default: {
Expand Down Expand Up @@ -158,7 +167,7 @@ module.exports = {
// auto_start_session: true

// use parallel execution in Cucumber
// parallel: 2 // set number of workers to use (can also be defined in the cli as --parallel 2
// workers: 2 // set number of workers to use (can also be defined in the cli as --workers=2
}
}
},
Expand All @@ -167,21 +176,21 @@ module.exports = {
// Configuration for when using the browserstack.com cloud service |
// |
// Please set the username and access key by setting the environment variables: |
// - BROWSERSTACK_USER |
// - BROWSERSTACK_KEY |
// - BROWSERSTACK_USERNAME |
// - BROWSERSTACK_ACCESS_KEY |
// .env files are supported |
//////////////////////////////////////////////////////////////////////////////////
browserstack: {
selenium: {
host: 'hub-cloud.browserstack.com',
host: 'hub.browserstack.com',
port: 443
},
// More info on configuring capabilities can be found on:
// https://www.browserstack.com/automate/capabilities?tag=selenium-4
desiredCapabilities: {
'bstack:options': {
userName: '${BROWSERSTACK_USER}',
accessKey: '${BROWSERSTACK_KEY}'
userName: '${BROWSERSTACK_USERNAME}',
accessKey: '${BROWSERSTACK_ACCESS_KEY}'
}
},

Expand All @@ -208,8 +217,7 @@ module.exports = {
desiredCapabilities: {
browserName: 'chrome',
chromeOptions: {
w3c: true,
'args': ['start-maximized']
w3c: true
}
}
},
Expand Down Expand Up @@ -250,19 +258,79 @@ module.exports = {
}
},
//////////////////////////////////////////////////////////////////////////////////
// Configuration for when using the SauceLabs cloud service |
// |
// Please set the username and access key by setting the environment variables: |
// - SAUCE_USERNAME |
// - SAUCE_ACCESS_KEY |
//////////////////////////////////////////////////////////////////////////////////
saucelabs: {
selenium: {
host: 'ondemand.saucelabs.com',
port: 443
},
// More info on configuring capabilities can be found on:
// https://docs.saucelabs.com/dev/test-configuration-options/
desiredCapabilities: {
'sauce:options': {
username: '${SAUCE_USERNAME}',
accessKey: '${SAUCE_ACCESS_KEY}',
screenResolution: '1280x1024'
// https://docs.saucelabs.com/dev/cli/sauce-connect-proxy/#--region
// region: 'us-west-1'
// https://docs.saucelabs.com/dev/test-configuration-options/#tunnelidentifier
// parentTunnel: '',
// tunnelIdentifier: '',
}
},
disable_error_log: false,
webdriver: {
start_process: false
}
},
'saucelabs.chrome': {
extends: 'saucelabs',
desiredCapabilities: {
browserName: 'chrome',
browserVersion: 'latest',
javascriptEnabled: true,
acceptSslCerts: true,
timeZone: 'London',
chromeOptions: {
w3c: true
}
}
},
'saucelabs.firefox': {
extends: 'saucelabs',
desiredCapabilities: {
browserName: 'firefox',
browserVersion: 'latest',
javascriptEnabled: true,
acceptSslCerts: true,
timeZone: 'London'
}
},
//////////////////////////////////////////////////////////////////////////////////
// Configuration for when using the Selenium service, either locally or remote, |
// like Selenium Grid |
//////////////////////////////////////////////////////////////////////////////////
selenium_server: {
// Selenium Server is running locally and is managed by Nightwatch
// Install the NPM package @nightwatch/selenium-server or download the selenium server jar file from https://github.com/SeleniumHQ/selenium/releases/, e.g.: selenium-server-4.1.1.jar
selenium: {
start_process: true,
port: 4444,
server_path: (Services.seleniumServer ? Services.seleniumServer.path : ''),
server_path: '', // Leave empty if @nightwatch/selenium-server is installed
command: 'standalone', // Selenium 4 only
cli_args: {
'webdriver.gecko.driver': (Services.geckodriver ? Services.geckodriver.path : ''),
'webdriver.chrome.driver': (Services.chromedriver ? Services.chromedriver.path : '')
//'webdriver.gecko.driver': '',
//'webdriver.chrome.driver': ''
}
},
webdriver: {
start_process: false,
default_path_prefix: '/wd/hub'
}
},

Expand Down Expand Up @@ -290,17 +358,3 @@ module.exports = {
}
}
};

function loadServices() {
try {
Services.seleniumServer = require('selenium-server');
} catch (err) {}

try {
Services.chromedriver = require('chromedriver');
} catch (err) {}

try {
Services.geckodriver = require('geckodriver');
} catch (err) {}
}
21 changes: 21 additions & 0 deletions nightwatch/custom-commands/strictClick.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import {ElementProperties, NightwatchAPI} from 'nightwatch';

/**
* A class-based custom-command in Nightwatch. The command name is the filename.
*
* Usage:
* browser.strictClick(selector)
*
* This command is being used in:
* test/fileUpload.ts
*
* For more information on working with custom-commands see:
* https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
*/
export default class StrictClick {
async command(this: {api: NightwatchAPI}, selector: string | ElementProperties) {
await this.api.element.find(selector).waitUntil('visible');

return this.api.click(selector);
}
};
30 changes: 30 additions & 0 deletions nightwatch/examples/duckDuckGo.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import {ExtendDescribeThis} from 'nightwatch';

interface CustomThis {
duckDuckGoUrl: string;
searchBox: string;
submitButton: string;
}

// callback passed to `describe` should be a regular function (not an arrow function).
describe('duckduckgo example', function(this: ExtendDescribeThis<CustomThis>) {
this.duckDuckGoUrl = 'https://duckduckgo.com';
this.searchBox = 'input[name=q]';
this.submitButton = '*[type=submit]';

// callback can be a regular function as well as an arrow function.
beforeEach(function(this: ExtendDescribeThis<CustomThis>, browser) {
browser.navigateTo(this.duckDuckGoUrl!);
});

// no need to specify `this` parameter when passing an arrow function
// as callback to `it`.
it('Search Nightwatch.js and check results', (browser) => {
browser
.waitForElementVisible(this.searchBox!)
.sendKeys(this.searchBox!, ['Nightwatch.js'])
.click(this.submitButton!)
.assert.visible('.react-results--main')
.assert.textContains('.react-results--main', 'Nightwatch.js');
});
});
18 changes: 18 additions & 0 deletions nightwatch/examples/ecosia.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
describe('Ecosia.org Demo', function() {
this.tags = ['demo'];

before(browser => browser.navigateTo('https://www.ecosia.org/'));

it('Demo test ecosia.org', function(browser) {
browser
.waitForElementVisible('body')
.assert.titleContains('Ecosia')
.assert.visible('input[type=search]')
.setValue('input[type=search]', 'nightwatch')
.assert.visible('button[type=submit]')
.click('button[type=submit]')
.assert.textContains('.layout__content', 'Nightwatch.js');
});

after(browser => browser.end());
});
Loading

0 comments on commit 0bf15a6

Please sign in to comment.