Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/jagadeeshshetty/nightwatchjs-basic

Will help to get started with basic setup and run the test on web browsers.
https://github.com/jagadeeshshetty/nightwatchjs-basic
javascript mocha nightwatch selenium w3c-webdriver
Last synced: 1 day ago
JSON representation
Will help to get started with basic setup and run the test on web browsers.
Host: GitHub
URL: https://github.com/jagadeeshshetty/nightwatchjs-basic
Owner: jagadeeshshetty
License: mit
Created: 2018-12-21T17:44:43.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2022-12-30T21:33:31.000Z (almost 2 years ago)
Last Synced: 2024-02-24T20:22:00.987Z (9 months ago)
Topics: javascript, mocha, nightwatch, selenium, w3c-webdriver
Language: JavaScript
Homepage: https://www.npmjs.com/package/nightwatchjs-basic
Size: 40.9 MB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 6
Metadata Files:
- Readme: README.html
- License: LICENSE
Awesome Lists containing this project

README

        

README.md

/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */

/*---------------------------------------------------------------------------------------------

 *  Copyright (c) Microsoft Corporation. All rights reserved.

 *  Licensed under the MIT License. See License.txt in the project root for license information.

 *--------------------------------------------------------------------------------------------*/

body {

	font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);

	font-size: var(--vscode-markdown-font-size, 14px);

	padding: 0 26px;

	line-height: var(--vscode-markdown-line-height, 22px);

	word-wrap: break-word;

}

#code-csp-warning {

	position: fixed;

	top: 0;

	right: 0;

	color: white;

	margin: 16px;

	text-align: center;

	font-size: 12px;

	font-family: sans-serif;

	background-color:#444444;

	cursor: pointer;

	padding: 6px;

	box-shadow: 1px 1px 1px rgba(0,0,0,.25);

}

#code-csp-warning:hover {

	text-decoration: none;

	background-color:#007acc;

	box-shadow: 2px 2px 2px rgba(0,0,0,.25);

}

body.scrollBeyondLastLine {

	margin-bottom: calc(100vh - 22px);

}

body.showEditorSelection .code-line {

	position: relative;

}

body.showEditorSelection .code-active-line:before,

body.showEditorSelection .code-line:hover:before {

	content: "";

	display: block;

	position: absolute;

	top: 0;

	left: -12px;

	height: 100%;

}

body.showEditorSelection li.code-active-line:before,

body.showEditorSelection li.code-line:hover:before {

	left: -30px;

}

.vscode-light.showEditorSelection .code-active-line:before {

	border-left: 3px solid rgba(0, 0, 0, 0.15);

}

.vscode-light.showEditorSelection .code-line:hover:before {

	border-left: 3px solid rgba(0, 0, 0, 0.40);

}

.vscode-light.showEditorSelection .code-line .code-line:hover:before {

	border-left: none;

}

.vscode-dark.showEditorSelection .code-active-line:before {

	border-left: 3px solid rgba(255, 255, 255, 0.4);

}

.vscode-dark.showEditorSelection .code-line:hover:before {

	border-left: 3px solid rgba(255, 255, 255, 0.60);

}

.vscode-dark.showEditorSelection .code-line .code-line:hover:before {

	border-left: none;

}

.vscode-high-contrast.showEditorSelection .code-active-line:before {

	border-left: 3px solid rgba(255, 160, 0, 0.7);

}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {

	border-left: 3px solid rgba(255, 160, 0, 1);

}

.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {

	border-left: none;

}

img {

	max-width: 100%;

	max-height: 100%;

}

a {

	text-decoration: none;

}

a:hover {

	text-decoration: underline;

}

a:focus,

input:focus,

select:focus,

textarea:focus {

	outline: 1px solid -webkit-focus-ring-color;

	outline-offset: -1px;

}

hr {

	border: 0;

	height: 2px;

	border-bottom: 2px solid;

}

h1 {

	padding-bottom: 0.3em;

	line-height: 1.2;

	border-bottom-width: 1px;

	border-bottom-style: solid;

}

h1, h2, h3 {

	font-weight: normal;

}

table {

	border-collapse: collapse;

}

table > thead > tr > th {

	text-align: left;

	border-bottom: 1px solid;

}

table > thead > tr > th,

table > thead > tr > td,

table > tbody > tr > th,

table > tbody > tr > td {

	padding: 5px 10px;

}

table > tbody > tr + tr > td {

	border-top: 1px solid;

}

blockquote {

	margin: 0 7px 0 5px;

	padding: 0 16px 0 10px;

	border-left-width: 5px;

	border-left-style: solid;

}

code {

	font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";

	font-size: 1em;

	line-height: 1.357em;

}

body.wordWrap pre {

	white-space: pre-wrap;

}

pre:not(.hljs),

pre.hljs code > div {

	padding: 16px;

	border-radius: 3px;

	overflow: auto;

}

pre code {

	color: var(--vscode-editor-foreground);

	tab-size: 4;

}

/** Theming */

.vscode-light pre {

	background-color: rgba(220, 220, 220, 0.4);

}

.vscode-dark pre {

	background-color: rgba(10, 10, 10, 0.4);

}

.vscode-high-contrast pre {

	background-color: rgb(0, 0, 0);

}

.vscode-high-contrast h1 {

	border-color: rgb(0, 0, 0);

}

.vscode-light table > thead > tr > th {

	border-color: rgba(0, 0, 0, 0.69);

}

.vscode-dark table > thead > tr > th {

	border-color: rgba(255, 255, 255, 0.69);

}

.vscode-light h1,

.vscode-light hr,

.vscode-light table > tbody > tr + tr > td {

	border-color: rgba(0, 0, 0, 0.18);

}

.vscode-dark h1,

.vscode-dark hr,

.vscode-dark table > tbody > tr + tr > td {

	border-color: rgba(255, 255, 255, 0.18);

}

/* Tomorrow Theme */

/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */

/* Original theme - https://github.com/chriskempson/tomorrow-theme */

/* Tomorrow Comment */

.hljs-comment,

.hljs-quote {

	color: #8e908c;

}

/* Tomorrow Red */

.hljs-variable,

.hljs-template-variable,

.hljs-tag,

.hljs-name,

.hljs-selector-id,

.hljs-selector-class,

.hljs-regexp,

.hljs-deletion {

	color: #c82829;

}

/* Tomorrow Orange */

.hljs-number,

.hljs-built_in,

.hljs-builtin-name,

.hljs-literal,

.hljs-type,

.hljs-params,

.hljs-meta,

.hljs-link {

	color: #f5871f;

}

/* Tomorrow Yellow */

.hljs-attribute {

	color: #eab700;

}

/* Tomorrow Green */

.hljs-string,

.hljs-symbol,

.hljs-bullet,

.hljs-addition {

	color: #718c00;

}

/* Tomorrow Blue */

.hljs-title,

.hljs-section {

	color: #4271ae;

}

/* Tomorrow Purple */

.hljs-keyword,

.hljs-selector-tag {

	color: #8959a8;

}

.hljs {

	display: block;

	overflow-x: auto;

	color: #4d4d4c;

	padding: 0.5em;

}

.hljs-emphasis {

	font-style: italic;

}

.hljs-strong {

	font-weight: bold;

}

/*

 * Markdown PDF CSS

 */

 body {

	font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";

	padding: 0 12px;

}

pre {

	background-color: #f8f8f8;

	border: 1px solid #cccccc;

	border-radius: 3px;

	overflow-x: auto;

	white-space: pre-wrap;

	overflow-wrap: break-word;

}

pre:not(.hljs) {

	padding: 23px;

	line-height: 19px;

}

blockquote {

	background: rgba(127, 127, 127, 0.1);

	border-color: rgba(0, 122, 204, 0.5);

}

.emoji {

	height: 1.4em;

}

code {

	font-size: 14px;

	line-height: 19px;

}

/* for inline code */

:not(pre):not(.hljs) > code {

	color: #C9AE75; /* Change the old color so it seems less like an error */

	font-size: inherit;

}

/* Page Break : use <div class="page"/> to insert page break

-------------------------------------------------------- */

.page {

	page-break-after: always;

}

  

    mermaid.initialize({

      startOnLoad: true,

      theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')

          ? 'dark'

          : 'default'

    });

  

What is Nightwatch









Nightwatch.js is an automated testing framework for web applications and websites, written in Node.js and using the W3C WebDriver API (formerly Selenium WebDriver).

It is a complete End-to-End testing solution which aims to simplify writing automated tests and setting up Continuous Integration. Nightwatch can also be used for writing Node.js unit and integration tests.

The name Nightwatch was inspired by the famous painting The Night Watch by Dutch artist Rembrandt van Rijn. The masterpiece is prominently displayed in the Rijksmuseum, in Amsterdam - The Netherlands.

Overview of WebDriver

WebDriver is a general purpose library for automating web browsers. It was started as part of the Selenium project, which is a popular and comprehensive set of tools for browser automation initially written for Java but now with support for most programming languages.

Nightwatch uses the WebDriver API to perform the browser automation related tasks, like opening windows and clicking links for instance.

WebDriver is now a W3C specification aiming to standardize browser automation. WebDriver is a remote control interface that enables introspection and control of user agents. It provides a platform and a restful HTTP api as a way for web browsers to be remotely controlled.

Theory of Operation

Nightwatch works by communicating over a restful HTTP API with a WebDriver server (such as ChromeDriver or Selenium Server). The protocol is defined by the W3C WebDriver spec, which is derived from JSON Wire protocol. See below for an example workflow for browser initialization.



Most of the times, Nightwatch needs to send at least 2 requests to the WebDriver server in order to perform a command or assertion.

...The first one being the request to locate an element given a CSS selector (or Xpath expression)

...Next to perform the actual command/assertion on the given element.

Setup





Node.js should be installed.



NPM should be installed.

Create a directory with nightwatchjs-basic name.

Run npm init and complete with basic details.

Run npm install nightwatch to install nightwatch within workspace.

Download selenium and chrome drivers and copy to bin directory.

Create nightwatch.json file within working directory. The nightwatch test runner binary expects a configuration file.

Create tests directory and create homepage.js file.

Update package.json with test runner for scripts value.



Screenshots

nightwatch.conf.js



tests/homepage.js



package.json



Run

$ npm run test



Version changes

1.3.0



Updated dependencies



Nightwatch 1.4.3



Chromedriver 85.0.1







Updated test run command

Updated readme with test run screenshot.



1.2.0



Preserved with 1.2.0 tag.

Nightwatch 1.1.11, Chromedriver 74.0.0 version



1.1.0



No need of individual driver download on mac and windows os. Removed explicit dependency on drivers. Now automatically download required drivers during npm i run.



1.0.0



Basic project setup with Nightwatch framework and run.

Depends on Selenium and Chrome web driver.



Reference

Official Nightwatch