diff --git a/docs/guide/browser-drivers/geckodriver.md b/docs/guide/browser-drivers/geckodriver.md index a79cefbd..86475f95 100644 --- a/docs/guide/browser-drivers/geckodriver.md +++ b/docs/guide/browser-drivers/geckodriver.md @@ -64,7 +64,7 @@ GeckoDriver can also be used as a standalone application. Usage steps are docume

### Command line usage -
$ ./bin/geckodriver-0.23 -help
+
$ ./bin/geckodriver-0.23 -help
 geckodriver 0.23.0
 
 USAGE:
diff --git a/docs/guide/ci-integrations/run-nightwatch-on-azure-pipelines.md b/docs/guide/ci-integrations/run-nightwatch-on-azure-pipelines.md
index 072dc3ce..833e0848 100644
--- a/docs/guide/ci-integrations/run-nightwatch-on-azure-pipelines.md
+++ b/docs/guide/ci-integrations/run-nightwatch-on-azure-pipelines.md
@@ -47,7 +47,7 @@ You need to click on Node.js in order to configure its plugin. This will provide
 #### Step 4 : Configure azure-pipelines.yml file
 Now you have to review and write the steps inside the azure-pipelines.yml file to run your tests. 
 
-
# Node.js
+
# Node.js
 # Build a general Node.js project with npm.
 # Add steps that analyze code, save build artifacts, deploy, and more:
 # https://docs.microsoft.com/azure/devops/pipelines/languages/javascript
diff --git a/docs/guide/ci-integrations/run-nightwatch-on-circleci.md b/docs/guide/ci-integrations/run-nightwatch-on-circleci.md
index 6e015b1f..9b4322ed 100644
--- a/docs/guide/ci-integrations/run-nightwatch-on-circleci.md
+++ b/docs/guide/ci-integrations/run-nightwatch-on-circleci.md
@@ -36,7 +36,7 @@ In the next screen, select `Node` from the list
 #### Step 2 : Update the config.yml file, commit and run the pipeline
 Now you will view the config.yml file that you can edit. Copy the below file contents into the file
 
-
# This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
+
# This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
 version: 2.1
 
 # Orbs are reusable packages of CircleCI configuration that you may share across projects, enabling you to create encapsulated, parameterized commands, jobs, and executors that can be used across multiple projects.
diff --git a/docs/guide/ci-integrations/run-nightwatch-on-jenkins.md b/docs/guide/ci-integrations/run-nightwatch-on-jenkins.md
index 28d6f7da..edbda984 100644
--- a/docs/guide/ci-integrations/run-nightwatch-on-jenkins.md
+++ b/docs/guide/ci-integrations/run-nightwatch-on-jenkins.md
@@ -56,12 +56,9 @@ In order to run your tests on BrowserStack from Jenkins, setup the environment v
 
 Setup the following 2 environment variables
 
-```
-
-BROWSERSTACK_USERNAME
-BROWSERSTACK_ACCESS_KEY
-
-```
+
+BROWSERSTACK_USERNAME BROWSERSTACK_ACCESS_KEY
+
![Jenkins BrowserStack](https://user-images.githubusercontent.com/1677755/177569029-da96b37d-6377-404f-9562-315d0694997d.png) diff --git a/docs/guide/component-testing/testing-angular-components.md b/docs/guide/component-testing/testing-angular-components.md index e0a6e44f..ae2fea7b 100644 --- a/docs/guide/component-testing/testing-angular-components.md +++ b/docs/guide/component-testing/testing-angular-components.md @@ -5,7 +5,7 @@ description: Learn how to do write and execute Angular component tests in Nightw ### Overview -Angular component testing in Nightwatch is available using our official **[`@nightwatch/angular`][1]** plugin, It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+ +Angular component testing in Nightwatch is available using our official **[`@nightwatch/angular`][https://github.com/nightwatchjs/nightwatch-plugin-angular]** plugin, It uses the Webpack DevServer under the hood. Requires Nightwatch 2.4+
nightwatch-angular-plugin on Github @@ -91,15 +91,7 @@ The angular plugin uses webpack dev server to compile and render angular compone
test/sampleTest.js
it('Test Form Component', async function (browser) {
   const component = await browser.mountComponent('/src/components/Form.component');
-
   expect(component).text.to.equal('form-component works!');
 });
-
- - - - - - - -[1]: https://github.com/nightwatchjs/nightwatch-plugin-angular +
+ diff --git a/docs/guide/concepts/test-globals.md b/docs/guide/concepts/test-globals.md index 5d4d1bc0..b3f74437 100644 --- a/docs/guide/concepts/test-globals.md +++ b/docs/guide/concepts/test-globals.md @@ -202,9 +202,7 @@ Pass the `--env integration` option to the runner: Then our globals object will look like: -``` -myGlobalVar is: "integrated global" -``` +
myGlobalVar is: "integrated global"
### Recommended content - [Use external globals in tests](/guide/writing-tests/using-test-globals.html) diff --git a/docs/guide/configuration/define-test-environments.md b/docs/guide/configuration/define-test-environments.md index 47eb0b69..a343bab0 100644 --- a/docs/guide/configuration/define-test-environments.md +++ b/docs/guide/configuration/define-test-environments.md @@ -49,7 +49,7 @@ Test environments are referenced using the `--env` cli argument. Since we only h
npx nightwatch --env chrome-local
-``` +
 ~/workspace/test-project % npx nightwatch --env chrome-local
  
 ┌──────────────────────────────────────────────────────────────────┐
@@ -61,7 +61,7 @@ Test environments are referenced using the `--env` cli argument. Since we only h
 │                                                                  │
 │                                                                  │
 └──────────────────────────────────────────────────────────────────┘
-```
+
### Define a new "chrome-local" environment @@ -108,7 +108,7 @@ Run the sample and pass the `--env chrome-local` argument: The output will look a bit like this: -``` +
 [sample nightwatch test] Test Suite
 ──────────────────────────────────────────────────────────────────────
 ℹ Connected to ChromeDriver on port 9515 (844ms).
@@ -116,12 +116,12 @@ The output will look a bit like this:
 
 
   Running opens the browser and checks for input:
-────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+───────────────────────────────────────────────────────────────────────
   ℹ Loaded url https://home.cern in 5531ms
   ✔ Testing if the page title equals 'Home | CERN' (6ms)
 
 OK. 1 assertions passed. (5.604s)
-```
+
### Recommended content - [Concepts > Test environments](/guide/concepts/test-environments.html) @@ -148,4 +148,4 @@ OK. 1 assertions passed. (5.604s) - \ No newline at end of file + diff --git a/docs/guide/migrating-to-nightwatch/from-protractor.md b/docs/guide/migrating-to-nightwatch/from-protractor.md index 1dbdb98c..6ad077e8 100644 --- a/docs/guide/migrating-to-nightwatch/from-protractor.md +++ b/docs/guide/migrating-to-nightwatch/from-protractor.md @@ -13,23 +13,26 @@ Protractor was a popular end-to-end test framework for Angular and AngularJS app Install the [Nightwatch Angular schematic](https://github.com/nightwatchjs/nightwatch-schematics) to add Nightwatch to your Angular project. -```bash -ng add @nightwatch/schematics -``` +
+ng add @nightwatch/schematics
+
+
This will install Nightwatch, add different scripts to run Nightwatch, scaffold Nightwatch config, and test files. It also prompts you to remove Protractor from your project and reconfigure your default `ng e2e` command to use Nightwatch. You can now run Nightwatch with the following command: -```bash -ng e2e -``` +
+ng e2e
+
+
You can also use the following command to run Nightwatch alternatively. -```bash -ng run {your-project-name}:nightwatch-run -``` +
+ng run {your-project-name}:nightwatch-run
+
+
### Next Steps @@ -55,17 +58,21 @@ In e2e tests, one of the most common things to do in a webpage is to get one or Before: Protractor -```javascript -// Find an element using a css selector. +
+// Find an element using a css selector.
 element(by.css('.myclass'))
-```
+
+
+ After: Nightwatch v2 -```javascript -// Find an element using a css selector. +
+// Find an element using a css selector.
 element(by.css('.myclass'))
-```
+
+
+ ##### Getting multiple elements @@ -73,27 +80,30 @@ If you need to access more than one element on the page, you must chain the .all Before: Protractor -```javascript -// Find elements using a css selector. +
+// Find elements using a css selector.
 element.all(by.css('.myclass'))
-```
+
+
+ After: Nightwatch v2 -```javascript -// Find mulltiple elements using a css selector. +
+// Find mulltiple elements using a css selector.
 browser.findElements(by.css('.myclass'))
 
 // or simply:
 browser.findElements('.myclass')
-```
+
+
##### Interaction with DOM Elements Before: Protractor -```javascript -// Click on the element +
+// Click on the element
 element(by.css('button')).click()
 
 // Clear the text in an element (usually an input).
@@ -107,12 +117,13 @@ browser
   .actions()
   .mouseMove(element(by.id('my-id')))
   .perform()
-```
+
+
After: Nightwatch v2 -```javascript -// Click on the element +
+// Click on the element
 browser.click(element(by.css('button')))
 
 // or with default css selector as locate strategy:
@@ -133,7 +144,8 @@ browser
   .perform(function() {
     return this.actions().mouseMove(element(by.id('my-id')))
   })
-```
+
+
> You can learn more about working with DOM elements in our [official documentation](/guide/writing-tests/finding-interacting-with-dom-elements.html) @@ -143,96 +155,123 @@ browser Before: Protractor -```javascript -const list = element.all(by.css('.custom-class')) +
+const list = element.all(by.css('.custom-class'))
 expect(list.count()).toBe(3)
-```
+
+
+ After: Nightwatch v2 -```javascript -expect.elements('.custom-class').count.to.equal(3); -``` + +
+expect.elements('.custom-class').count.to.equal(3);
+
+
+ #### Value Before: Protractor -```javascript -expect(element(by.css('input[name="first_name"]'))).getAttribute('value').toBe('foo') -``` +
+expect(element(by.css('input[name="first_name"]'))).getAttribute('value').toBe('foo')
+
+
+ After: Nightwatch v2 -```javascript -expect(element('input[name="first_name"]')).attribute('value').toEqual('foo'); -``` + +
+expect(element('input[name="first_name"]')).attribute('value').toEqual('foo');
+
+
+ #### Text Content Before: Protractor -```javascript -// assert the element\'s text content is exactly the given text +
+// assert the element\'s text content is exactly the given text
 expect(element(by.id('user-name')).getText()).toBe('John Doe')
-```
+
+
+ After: Nightwatch v2 -```javascript -expect.element(by.id('user-name')).text.toEqual('John Doe'); -``` +
+expect.element(by.id('user-name')).text.toEqual('John Doe');
+
+
+ #### Visibility Before: Protractor -```javascript -// assert button is visible + +
+// assert button is visible
 expect(element(by.css('#main ul li a.first')).isDisplayed()).toBe(true)
-```
+
+
+ After: Nightwatch v2 -```javascript -expect('#main ul li a.first').to.be.visible; +
+expect('#main ul li a.first').to.be.visible;
 
 // The following will end the test:
 browser.assert.visible('#main ul li a.first');
 
 // However this will just log the failure and continue:
 browser.verify.visible('#main ul li a.first');
-```
+
+
+ #### Existence Before: Protractor -```javascript -// assert the spinner no longer exists +
+// assert the spinner no longer exists
 expect(element(by.id('loading')).isPresent()).toBe(false)
-```
+
+
+ After: Nightwatch v2 -```javascript -browser.assert.not.elementPresent(by.id('loading')) -``` +
+browser.assert.not.elementPresent(by.id('loading'))
+
+
+ #### CSS Before: Protractor -```javascript -// assert #main ul li a.first has css style "block" for "display" property +
+// assert #main ul li a.first has css style "block" for "display" property
 expect(element(by.css('#main ul li a.first')).getCssValue('display')).toBe('block')
-```
+
+
+ After: Nightwatch v2 -```javascript -browser.assert.cssProperty(by.css('#main ul li a.first'), 'display', 'block'); -``` +
+browser.assert.cssProperty(by.css('#main ul li a.first'), 'display', 'block');
+
+
+ #### Navigating websites @@ -240,24 +279,28 @@ When you need to visit a page in your test, you can use following code: Before: Protractor -```javascript -it('visits a page', () => { +
+it('visits a page', () => {
   browser.get('/about')
   browser.navigate().forward()
   browser.navigate().back()
 })
-```
+
+
+ After: Nightwatch v2 -```javascript -it('visits a page', () => { +
+it('visits a page', () => {
   browser
     .navigateTo('/about')
     .forward()
     .back()
 })
-```
+
+
+ ### Questions or having issues? diff --git a/docs/guide/mobile-web-testing/with-appium.md b/docs/guide/mobile-web-testing/with-appium.md index 21f83832..254fec44 100644 --- a/docs/guide/mobile-web-testing/with-appium.md +++ b/docs/guide/mobile-web-testing/with-appium.md @@ -22,7 +22,7 @@ First step is to [download and setup Appium](https://appium.io/docs/en/about-app ### Configuration We can add configuration in Nightwatch to run our tests on mobile devices running locally against the Appium server: -
nightwatch.conf.js
appium_ios: {
+
nightwatch.conf.js
appium_ios: {
   selenium: {
     host: 'localhost',
     port: 4723
@@ -53,7 +53,7 @@ You can find more details regarding capabilities and on [Appium docs](http://app
 
 Here is a demo test that searches for the term "Night Watch" on the [Rijks Museum](https://www.rijksmuseum.nl/en) website.
 
-
tests/sampleTest.js
describe('Nightwatch Website tests', function() {
+
tests/sampleTest.js
describe('Nightwatch Website tests', function() {
     
it('Searching the Rijksmuseum ', async function(){ browser.navigateTo('https://www.rijksmuseum.nl/en'); @@ -89,7 +89,7 @@ These APIs are platform specific. You can refer more on this on [Appium docs](ht The [Actions API](/api/useractions/) is very general and platform independent. It relies on the concept of input sources (key, pointer, wheel). Following code generates a swipe and a pinch zoom gesture using Actions API: -
tests/sampleTest.js
describe('W3C Actions API', function() {
+
tests/sampleTest.js
describe('W3C Actions API', function() {
   it('swipe down and zoom in the page - w3c actions api ', async function(){
     //Scroll down the page
     await  browser.perform(function(){
diff --git a/docs/guide/network-requests/capture-network-calls.md b/docs/guide/network-requests/capture-network-calls.md
index 88ff6d34..15f3f9c6 100644
--- a/docs/guide/network-requests/capture-network-calls.md
+++ b/docs/guide/network-requests/capture-network-calls.md
@@ -72,7 +72,7 @@ All you need to do is call the `browser.captureNetworkRequests()` command with t
 
 Output from one of the network calls in the example above:
 
-```
+
   Running Capture network calls:
 ───────────────────────────────────────────────────────────────────────────────────────────────────
 Request Number: 35
@@ -94,7 +94,7 @@ Request headers: {
   'sec-ch-ua-model': '',
   'sec-ch-ua-platform': '"macOS"'
 }
-```
+
### Recommended content - [Chrome DevTools Protocol in Selenium 4](https://www.selenium.dev/documentation/webdriver/bidirectional/chrome_devtools/) diff --git a/docs/guide/reporters/use-junit-reporter.md b/docs/guide/reporters/use-junit-reporter.md index 71d0e216..28736ac6 100644 --- a/docs/guide/reporters/use-junit-reporter.md +++ b/docs/guide/reporters/use-junit-reporter.md @@ -35,11 +35,7 @@ Refer to the [CLI reference page](/guide/nightwatch-cli/command-line-options.htm The XML file name follows the pattern:
-
-```
-___.xml
-```
-
+BROWSERNAME_VERSION__testSuiteFileName.xml
 
### Example @@ -89,7 +85,7 @@ The JUnit XML report should have been generated in the local `tests_output` fold
 
-```
+```xml
 
 
     
   
-
 
-
``` - -
+
+
### Jenkins integration JUnit-formatted XML output integrates by default into Jenkins via the "Publish JUnit test result report" Post-build Action. diff --git a/docs/guide/running-tests/capture-console-messages.md b/docs/guide/running-tests/capture-console-messages.md index e692977e..b25aaca2 100644 --- a/docs/guide/running-tests/capture-console-messages.md +++ b/docs/guide/running-tests/capture-console-messages.md @@ -74,12 +74,12 @@ All you need to do is call the `browser.captureBrowserConsoleLogs()` command wit Output of the example above: -``` +
   Running Capture console messages:
-───────────────────────────────────────────────────────────────────────────────────────────────────
+───────────────────────────────────────────────────────────────────────
 error 2022-06-10T13:38:22.082Z here
 No assertions ran.
-```
+
### Recommended content - [Capture Browser JS Exceptions](/guide/running-tests/catch-js-exceptions.html) @@ -104,4 +104,4 @@ No assertions ran.
-
\ No newline at end of file +
diff --git a/docs/guide/running-tests/catch-js-exceptions.md b/docs/guide/running-tests/catch-js-exceptions.md index 3dd57959..93007b0b 100644 --- a/docs/guide/running-tests/catch-js-exceptions.md +++ b/docs/guide/running-tests/catch-js-exceptions.md @@ -67,7 +67,7 @@ Use the `browser.captureBrowserExceptions()` command with the required parameter Output of the example above: -``` +
   Running captureBrowserExceptions():
 ───────────────────────────────────────────────────────────────────────────────────────────────────
 {
@@ -93,7 +93,7 @@ Output of the example above:
   timestamp: 2022-06-10T13:14:52.722Z
 }
 No assertions ran.
-```
+
### Recommended content - [Capture browser console messages](/guide/running-tests/capture-console-messages.html) @@ -118,4 +118,4 @@ No assertions ran.
- \ No newline at end of file + diff --git a/docs/guide/running-tests/using-with-test-groups.md b/docs/guide/running-tests/using-with-test-groups.md index 0fa16f5f..af343585 100644 --- a/docs/guide/running-tests/using-with-test-groups.md +++ b/docs/guide/running-tests/using-with-test-groups.md @@ -9,7 +9,7 @@ description: Learn how to group tests together for better organization of the te Nightwatch makes it possible to organize your test scripts into groups and run them as needed. To group tests together just place them in the same sub-folder. The folder name is the name of the group. ### Example -
+
 lib/
   ├── selenium-server-standalone.jar
 custom-commands/
diff --git a/docs/guide/third-party-runners/cucumberjs-nightwatch-integration.md b/docs/guide/third-party-runners/cucumberjs-nightwatch-integration.md
deleted file mode 100644
index f9f7cfb9..00000000
--- a/docs/guide/third-party-runners/cucumberjs-nightwatch-integration.md
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: Using CucumberJs with nightwatch
-description: Learn how to integrate and use CucumberJs with nightwatch.
----
-
-## Using CucumberJS with Nightwatch
-Nightwatch 2 brings integrated support for using [Cucumber.js](https://cucumber.io/) directly as an alternative test runner. No other plugins are necessary, other than the [Cucumber library](https://www.npmjs.com/package/@cucumber/cucumber) itself (version 7.3 or higher).
-
-Simply run the following in the same project where Nightwatch is also installed:
-
-
npm i @cucumber/cucumber --save-dev
- -### Configuration - -In order to use CucumberJS in Nightwatch you need to set the `test_runner` config property and set the type to `cucumber`. You will also need to set the path to where the feature files are located. - -#### Example: -
-
{
-  test_runner: {
-    // set cucumber as the runner
-    type: 'cucumber',
-    
- // define cucumber specific options -
- options: { - //set the feature path - feature_path: 'examples/cucumber-js/*/*.feature', -
- // start the webdriver session automatically (enabled by default) - auto_start_session: true, -
- // use parallel execution in Cucumber - // set number of workers to use (can also be defined in the cli as --parallel 2 - parallel: 2 - } - }, -
- src_folders: ['examples/cucumber-js/features/step_definitions'] -}
-
- -### Running Tests -The easiest way to run cucumber tests from examples is: - -
npx nightwatch --env cucumber-js
- -Cucumber spec files/step definition files can be provided in `src_folders` in Nightwatch config or as a CLI argument. - -With `src_folders` defined: - -
npx nightwatch
- -Without `src_folders` defined: - -
npx nightwatch examples/cucumber-js/features/step_definition
- -#### Running in Parallel - -Parallel running using 2 workers: - -
nightwatch examples/cucumber-js/features/step_definitions --parallel 2
- - -Use other [test runner options](/guide/running-tests/command-line-options.html) as usual: - -
npx nightwatch examples/cucumber-js/features/step_definitions --headless
- -### Manually Starting the WebDriver Session -You might need sometimes to not start the Webdriver session automatically after Nightwatch is instantiated. For this purpose, Nightwatch provides the instance available as `this.client`, which contains an `launchBrowser()` method. - -#### Configuration: - -
{
-  test_runner: {
-    type: 'cucumber',
-    options: {
-      feature_path: 'examples/cucumber-js/*/*.feature',
-      auto_start_session: false
-    }
-  }
-}
- -You can then use an extra setup file that you can pass as an extra `--require` to Nightwatch, which will be forwarded to Cucumber. In the extra setup file, you can add other operations needed to be executed before the session is started. - -#### Example _extra_setup.js: - -Remember to set the `browser` on `this` so it can be closed automatically by Nightwatch. Otherwise, remember to call `.quit()` in your own Cucumber `After()` hooks. - -
-
const {Before} = require('@cucumber/cucumber');
-
-Before(async function(testCase) { - if (!this.client) { - console.error('Nightwatch instance was not created.'); -
- return; - } -
- this.client.updateCapabilities({ - testCap: 'testing' - }); -
- this.browser = await this.client.launchBrowser(); -});
- -#### Run with extra setup: - -
nightwatch examples/cucumber-js/features/step_definitions --require {/full/path/to/_extra_setup.js}
- -#### Nightwatch setup file for Cucumber - -You might also want to inspect the built-in setup file that Nightwatch uses for initializing the Cucumber runner. It is available in our project root folder at [/cucumber-js/_setup_cucumber_runner.js](https://github.com/nightwatchjs/nightwatch/blob/v2/cucumber-js/_setup_cucumber_runner.js). - -### Reporting -When using the integrated Cucumber test runner, you need to use the Cucumber [formatters](https://github.com/cucumber/cucumber-js/blob/main/docs/formatters.md) for generating output. - -
-Nightwatch reporters (like JUnit XML reports or the global custom reporter) are not available. The main reason is that reporting is delegated to the Cucumber CLI. You can also write your own Cucumber formatter. -
- -Nightwatch will forward `--format` and `--format-options` CLI arguments, if present, to Cucumber. - -By default, the `progress` formatter is used. - -For example: - -
npx nightwatch --env cucumber-js --format @cucumber/pretty-formatter
- -or: - -
npx nightwatch --env cucumber-js --require cucumber.conf.js --format json:report/cucumber_report.json
- -#### Example Output - -Here's how the output looks like when running the example tests in Firefox. You can just run this in the project where Nightwatch is installed: - -
-
npx nightwatch examples/cucumber-js/features/step_definition
-
- -
-
ℹ Connected to GeckoDriver on port 4444 (1740ms).
-Using: firefox (92.0.1) on MAC (20.6.0).
-
-.. ✔ Testing if the page title equals 'Rijksmuseum Amsterdam, home of the Dutch masters' (4ms) -. ✔ Element <#rijksmuseum-app> was visible after 46 milliseconds. -. ✔ Testing if element <.search-results> contains text 'Operation Night Watch' (1994ms) -... ✔ Testing if the page title equals 'Rijksmuseum Amsterdam, home of the Dutch masters' (8ms) -. ✔ Element <#rijksmuseum-app> was visible after 49 milliseconds. -. ✔ Testing if element <.search-results> contains text 'The Night Watch, Rembrandt van Rijn, 1642' (1427ms) -. -
-2 scenarios (2 passed) -10 steps (10 passed) -0m13.024s (executing steps: 0m12.998s) -
-
diff --git a/docs/guide/third-party-runners/using-mocha.md b/docs/guide/third-party-runners/using-mocha.md deleted file mode 100644 index 2afad5a0..00000000 --- a/docs/guide/third-party-runners/using-mocha.md +++ /dev/null @@ -1,309 +0,0 @@ ---- -title: Using Mocha as a Test Runner -description: Learn how to configure and use Mocha as a test runner. ---- - -## Using Mocha as a Test Runner - -In Nightwatch 2, the integrated Mocha runner has been upgraded to use **Mocha v9** and also the implementation has been updated to match most of the features that Nightwatch offers in its own default test runner, like the ability to use tags or global test hooks. - -#### Why Mocha? -Even though Nightwatch supports writing tests using the BDD _describe_ interface out of the box since version `1.3`, Mocha can still be an appealing choice given its tremendous popularity, longevity, and ease of use. - -Mocha's support for advanced reporting is still unparalleled and so we've gone to great lengths of making sure that Mocha works a lot better with Nightwatch 2. - -### Configuration -In order to use Mocha in Nightwatch you need to set the `test_runner` config property and set the type to `mocha`. Custom options for Mocha can also be specified: - -#### Example: -
{
-  ...
-  test_runner: {
-    type : 'mocha',
-    options : {
-      ui : 'bdd',
-      reporter : 'list'
-    }
-  }
-  ...
-}
-
- -Or simply: - -
{
-  test_runner : 'mocha'
-}
-
- -A complete list of Mocha options that are supported can be found [here](https://github.com/mochajs/mocha/wiki/Using-mocha-programmatically#set-options). - -The `test_runner` option can also be specified at test environment level: - -
{
-  test_settings : {
-    default: {
-      test_runner: 'default'
-    },
-    
- mocha_tests: { - test_runner : { - type : "mocha", - options : { - ui : "bdd", - reporter : "list" - } - } - } - } -} -
- -#### CLI Options -Nightwatch supports some Mocha specific CLI options specified as arguments to the main nightwatch CLI tool. Some of them (like `retries`) have also behaviour defined in Nightwatch and when Mocha is used, Nightwatch will delegate them. - -Here's the list of supported arguments presently: - -- `--reporter` -- `--grep` -- `--fail-fast` - defined in Mocha as `--bail` -- `--retries` -- `--fgrep` -- `--invert` - -**Example**: -
npx nightwatch examples/tests/ --reporter mochawesome
- -#### Extended describe() Syntax -The new Mocha support in Nightwatch 2 has been built to match as close as possible the extended syntax which is available in the [built-in Nightwatch `describes()` syntax](/guide/writing-tests/using-bdd-describe.html#complete-syntax). - -Here's the complete syntax available when using Mocha in Nightwatch: - -
describe('homepage test with describe', function() {
-  // All current settings are available via this.settings
-  // console.log('Settings', this.settings);
-  
- // All current cli arguments are available via this.argv - // console.log('argv', this.argv); -
- // The current mocha options object - // console.log('mochaOptions', this.mochaOptions); -
- // All current globals are available via this.globals - // console.log('globals', this.globals); -
- // testsuite specific capabilities - // this.desiredCapabilities = {}; -
- // Enable this if the current test is a unit/integration test (i.e. no Webdriver session will be created) - // this.unitTest = false -
- // Set this to false if you'd like the browser window to be kept open in case of a failure or error (useful for debugging) - // this.endSessionOnFail = true -
- // Set this to false if you'd like the rest of the test cases/test steps to be executed in the event of an assertion failure/error - // this.skipTestcasesOnFail = true -
- // this.suiteRetries(2); -
- // Control the assertion and element commands timeout until when an element should be located or assertion passed - // this.waitForTimeout(1000) -
- // Control the unit test timeout - // this.timeout(1000) -
- // Controll the polling interval between re-tries for assertions or element commands - // this.waitForRetryInterval(100); -
- before(function(browser) { - this.homepage = browser.page.home(); - }); -
- it('startHomepage', () => { - this.homepage.navigate(); - this.homepage.expect.section('@indexContainer').to.be.not.visible; - }); -
-
- // Run only this testcase - // it.only('startHomepage', () => { - // this.homepage.navigate(); - // }); -
- // skipped testcase: equivalent to xit() - it.skip('async testcase', async browser => { - const result = await browser.getText('#navigation'); - console.log('result', result.value) - }); -
- after(browser => browser.end()); -});
- -### Example -Writing a test in Mocha is the same as writing it in Nightwatch. Each testcase receives the `browser` object, `hooks` also receiving a `done` callback for async operations. - -
-
describe('Google demo test for Mocha', function() {
-  
- describe('with Nightwatch', function() { -
- before(function(browser, done) { - done(); - }); -
- after(function(browser, done) { - browser.end(function() { - done(); - }); - }); -
- afterEach(function(browser, done) { - done(); - }); -
- beforeEach(function(browser, done) { - done(); - }); -
- it('uses BDD to run the Google simple test', function(browser) { - browser - .url('https://google.com') - .expect.element('body').to.be.present.before(1000); -
- browser.setValue('input[type=text]', ['nightwatch', browser.Keys.ENTER]) - .pause(1000) - .assert.containsText('#main', 'Night Watch'); - }); - }); -}); -
-
- -### Using the mochawesome Reporter -[Mochawesome](https://github.com/adamgruber/mochawesome) is a very popular custom reporter for use with Mocha and it works out of the box with Nightwatch as well, when Mocha is being used as a test runner. - -To use Mochawesome, simply configure Mocha as the `test_runner` using the above info and then install it from NPM using: - -
npm i mochawesome --save-dev
- -To use it as a reporter simply pass the `--reporter mochawesome` argument as follows: - -
npx nightwatch examples/tests/ --reporter mochawesome
- -##### Configure Reporter Options -Mochawesome reporter options can be defined in main Nightwatch config under the `reporterOptions` dictionary, inside the `test_runner`: - -

-{
-  ...
-  test_runner: {
-    type : 'mocha',
-    options : {
-      ui : 'bdd',
-      reporter : 'mochawesome',
-      reporterOptions: {
-        reporterDir: './output'
-      }
-    }
-  }
-  ...
-}
-
- -##### Parallel Running -When running tests in parallel using test workers, you'll need to install some additional packages which `mochawesome` requires: - -
npm install mochawesome-report-generator mochawesome-merge --save-dev
- -### Using mocha-junit-reporter -When using Mocha, the default built-in JUnit reporter from Nightwatch is not available, but a perfectly fine alternative is to use the popular [`mocha-junit-reporter`](https://www.npmjs.com/package/mocha-junit-reporter) instead. - -You only need to install it from NPM and it's ready to go. You may optionally configure its settings, if needed, in the same way as the `mochawesome` reporter: - -

-{
-  ...
-  test_runner: {
-    type : 'mocha',
-    options : {
-      reporterOptions: {
-        reporterDir: './output'
-      }
-    }
-  }
-  ...
-}
-
- -
npm i mocha-junit-reporter --save-dev
- -To use it as a reporter simply pass the `--reporter mocha-junit-reporter` argument as follows: - -
npx nightwatch examples/tests/ --reporter mocha-junit-reporter
- -### Using the standard Mocha -Running Nightwatch tests with the standard Mocha is also possible, though a bit more boilerplate code is involved and you need to manage the selenium server. - - -##### Example: -
-

-var nightwatch = require('nightwatch');
-
-describe('Github', function() { - var client = nightwatch.initClient({ - silent : true - }); -
- var browser = client.api(); -
- this.timeout(99999999); -
- before(function() { -
- browser.perform(function() { - console.log('beforeAll') - }); -
- }); -
- beforeEach(function(done) { - browser.perform(function() { - console.log('beforeEach') - }); -
- client.start(done); - }); -
-
- it('Demo test GitHub', function (done) { - browser - .url('https://github.com/nightwatchjs/nightwatch') - .waitForElementVisible('body', 5000) - .assert.title('nightwatchjs/nightwatch · GitHub') - .waitForElementVisible('body', 1000) - .assert.visible('.container .breadcrumb a span') - .assert.containsText('.container .breadcrumb a span', 'nightwatch', 'Checking project title is set to nightwatch'); -
- client.start(done); - }); -
- afterEach(function() { - browser.perform(function() { - console.log('afterEach') - }); - }); -
- after(function(done) { - browser.end(function() { - console.log('afterAll') - }); -
- client.start(done); - }); -
-}); -
-
- -- Previous: [Using the Nightwatch programmatic API ](/guide/running-tests/programmatic-api.html) diff --git a/docs/guide/writing-tests/using-cucumberjs.md b/docs/guide/writing-tests/using-cucumberjs.md index 978d15b9..6f23c232 100644 --- a/docs/guide/writing-tests/using-cucumberjs.md +++ b/docs/guide/writing-tests/using-cucumberjs.md @@ -137,7 +137,8 @@ Here's how the output looks like when running the example tests in Firefox. You
-
ℹ Connected to GeckoDriver on port 4444 (1740ms).
+
+ℹ Connected to GeckoDriver on port 4444 (1740ms).
 Using: firefox (92.0.1) on MAC (20.6.0).
 
 ..  ✔ Testing if the page title equals 'Rijksmuseum Amsterdam, home of the Dutch masters' (4ms)
@@ -146,11 +147,11 @@ Using: firefox (92.0.1) on MAC (20.6.0).
 ...  ✔ Testing if the page title equals 'Rijksmuseum Amsterdam, home of the Dutch masters' (8ms)
 .  ✔ Element <#rijksmuseum-app> was visible after 49 milliseconds.
 .  ✔ Testing if element <.search-results> contains text 'The Night Watch, Rembrandt van Rijn, 1642' (1427ms)
-.
 
-2 scenarios (2 passed)
-10 steps (10 passed)
-0m13.024s (executing steps: 0m12.998s)
+    2 scenarios (2 passed)
+    10 steps (10 passed)
+    0m13.024s (executing steps: 0m12.998s)
+
 
diff --git a/postdoc.config.js b/postdoc.config.js index fb5aada3..4f75cff5 100644 --- a/postdoc.config.js +++ b/postdoc.config.js @@ -5,7 +5,7 @@ const { NIGHTWATCH_VERSION = '3.5.0', BASE_URL = 'https://nightwatchjs.org', MD_DOCS_FOLDER = './docs', - API_DOCS_FOLDER = resolve('../nightwatch/lib/api'), + API_DOCS_FOLDER = resolve('./nightwatch/lib/api'), EXAMPLES_FOLDER = 'node_modules/nightwatch-examples/tests', WEBDRIVER_SPEC_URL = 'https://w3c.github.io/webdriver' } = env; diff --git a/src/includes/rightSidebarContent.ejs b/src/includes/rightSidebarContent.ejs index 09bdb1b8..3d51e3e1 100644 --- a/src/includes/rightSidebarContent.ejs +++ b/src/includes/rightSidebarContent.ejs @@ -11,7 +11,7 @@ const content = [...pageContent.matchAll(/]*id="([^"]+)".*?>(?:]*>([^
On this page
Contribute
@@ -20,4 +20,4 @@ const content = [...pageContent.matchAll(/]*id="([^"]+)".*?>(?:]*>([^ Join us on Discord Read our blog Nightwatch Docs on Github -
\ No newline at end of file + diff --git a/src/pages/guide/comparison-with-leading-frameworks.ejs b/src/pages/guide/comparison-with-leading-frameworks.ejs index 8633dfe5..4d180139 100644 --- a/src/pages/guide/comparison-with-leading-frameworks.ejs +++ b/src/pages/guide/comparison-with-leading-frameworks.ejs @@ -33,7 +33,7 @@ const data = { Nightwatch - + Playwright