Headless Browser Testing with NightwatchJS

NightwatchJS is a popular Node.js-based framework for end-to-end examination, known for its simplicity, cloud integrating, and clean syntax. One of its standout features isheadless browser testing, which allows examination to run without rendering the UI, making them faster and more efficient.

This article coverswhat headless testing is, why it ’ s useful, its limitations, and how to run NightwatchJS headless tests using config files or CLI flags in Chrome and Firefox.

What is Headless Browser Testing?

or simply brainless testing is an automated way of testing the coating without expose its ocular elements. Typically, the applications are test using a browser by rendering all visual elements and part. Headless testing still test the components but doesn & # 8217; t render all the ocular display component. This salvage clip and imagination.

Advantages of Headless Browser Testing

• Speed:Since headless testing doesn & # 8217; t provide the visual view of the webpage, the headless tests are much fast than the headed (tests with UI element provide) exam.
• CI/CD Integration:The headless test is most helpful in CI/CD integration, as it doesn & # 8217; t consume much memory you can run many tests. On the other manus, headless examination is much quicker. So you get a quicker report still when you are extend the pipeline in a remote environment.
• Cost Effective:The GUI part of any coating takes a lot of memory to render in bend increases the resourcefulness. Since headless testing doesn & # 8217; t render visual elements, tests usually ware less retentiveness, So the same substructure can be used for running many tests.
• Parallel Testing:Unlike headed examination, the headless testing consumes less retentivity and other resourcefulness the tests don & # 8217; t need costly infrastructure, the infrastructure can be used for running multiple parallel tests parallely to achieve a faster consequence.

Disadvantages ofHeadless Browser Testing

• Difficult to debug:The headless browser examination is faster, it lade the page and performs the actions faster than headed browser examination, this feature makes difficult and one has to rely on exclusively console logs.
• Not a replacement for real user examination:Typically is a model of real users in the front of GUI but the headless browser try doesn & # 8217; t render all the UI components and doesn & # 8217; t assume the real user conduct.
• Can not evaluate the GUI:If the test is written to assess the UI constituent then the headless browser examination is not the right choice.

How to Perform Headless Browser Testing with NightwatchJS

Now that you know about the advantages and disadvantages, let ’ s get into the practicality of running headless browser testing apply on Chrome and Firefox.

Prerequisite:NightwatchJS installation

If you are still explore, you can use the below test cases as an example:

//headless-demo.js describe ('Nightwatch Headless demo ', function () {it ('Navigate to Browserstack home page ', async function (browser) {await browser .navigateTo ('https: //www.browserstack.com ') .assert.visible (' # logotype ')}); it ('Verify Browserstack make a costless account page ', async function (browser) {await browser .waitForElementVisible (' # signupModalButton ', 20000) .click (' # signupModalButton ') .waitForElementPresent ('h1 [class= '' heading ''] ') .assert.textContains ('h1 [class= '' lead ''] ', 'Create a FREE Account ') .end ();});});

NightwatchJS Headless Mode Testing in Chrome browser

The NightwatchJS provides multiple pick to run in headless mode

1. Modifying NightwatchJS configuration file settings
2. Using CLI selection

Headless Browser testing by modifying NightwatchJS configuration file

Step 1: Modify Configuration

Navigate tonightwatch.conf.jsfile, located in your projection root folder.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Note: the nightwatch.conf.js will be create by default during your project frame-up.

Under test_settingsface for desiredCapabilities,

By default, you will see the one of the below settings

desiredCapabilities: {browserName: 'firefox'},

Or

desiredCapabilities: {browserName: chrome},

To execute the NightwatchJS tests in headless chrome, change the desiredCapabilities option below

'' desiredCapabilities '': {'' browserName '': `` chrome '', '' chromeOptions '': {'' args '': [`` headless '']}},

Step 2: Execute the examination

Execute the NightwatchJS with the executing command

npx nightwatch & lt; path_to_test_file.js & gt;

Example: 

npx nightwatch tests/headless-demo.js

Once the Execution is complete you will see the output as shown in the icon

NightwatchJS Chrome Headless testing using CLI

This is the simplest way to execute the NightwatchJS tryout in headless mode. This option requires zero conformation to execute brainless automation tests. In this method you just need to add one CLI option that is & # 8211; headless, the rest will be take forethought of by NightwatchJS

As mentioned it is zero configuration, so you don & # 8217; t get to do any changes in the nightwatch.conf.js. Thenightwatch.conf.jsstop as configure before or default settings like below.

desiredCapabilities: {browserName: 'chrome'},

Syntax:

npx nightwatch & lt; path_to_test_file.js & gt; -- headless

Example:

npx nightwatch tests/headless-demo.js -- headless

NightwatchJS Headless Mode using Firefox browser

Like Chrome headless, the NightwatchJS also supports Firefox headless mode. Firefox headless mode in NightwatchJS can be configured using two selection

1. Modifying the form file options
2. Passing CLI parameter

Firefox NightwatchJS headless testing by qualify the configuration file settings

Navigate tonightwatch.conf.jsfile, site in your project root brochure.

Under test_settingslook for desiredCapabilities,

By default, you will see one of the below value

desiredCapabilities: {browserName: 'firefox'}, Or desiredCapabilities: {browserName: chrome},

To execute the NightwatchJS tests in headless firefox, change thedesiredCapabilitiesalternative below

'' desiredCapabilities '': {'' browserName '': `` firefox '', '' acceptInsecureCerts '': true, '' moz: firefoxOptions '': {'' args '': [`` -- headless '']},},

Step 2: Execute the tests

Execute the NightwatchJS with the execution command.

npx nightwatch & lt; path_to_test_file.js & gt;

Example: 

npx nightwatch tests/headless-demo.js

Execute NightwatchJS Firefox headless tests using CLI

This is the simplest way to execute the NightwatchJS tryout.

In this method you but need to add one CLI option that is & # 8211; headless, the rest will be conduct care of by NightwatchJS.

Since the headless selection is specified in the bid line options, there is no modification required in nightwatch.conf.js file. ThedesiredCapabilitiesremain as is unless you have customized that option the desiredCapabilities appear is below.

desiredCapabilities: {browserName: 'firefox'},

Syntax:

npx nightwatch & lt; path_to_test_file.js & gt; -- headless

Example:

npx nightwatch tests/headless-demo.js -- headless

Once you accomplish the test apply the CLI option, the generated output looks as below.

Closing Notes

One of the many reasons why NightwatchJS is the most democratic Javascript automation is that brainless automation executes the tests faster by consuming less imagination. Apart from the basics:

• The is easy to set up.
• NightwatchJS tests can be executed parallely utilise BrowserStack.
• It requires minimal configuration and provides open syntax, CI/CD integration, Page Object model support
• Can be easily integrated with for web and mobile covering testing

Related Guides