Detailed explanation of automated testing of nightwatch in js

This article will introduce to you the automated testing of nightwatch in js, so that you can master the method of automated testing of nightwatch. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

nightwatch.js is a web-ui automated testing framework that is deeply integrated into vue-cli. If a project is built based on vue-cli, it can basically be used out of the box.

But we cannot use vue-cli all the time. Because it often cannot meet our customized needs. Many times we will customize the build framework or completely rebuild it. At this time, it will be difficult to integrate nightwatch. This article will help you get started with building such a testing framework.

Required environment

First install nightwatch in the project, switch to the project directory

npm intall nightwatch -D

Installing this is not enough, you also need to install selenium-server, which can also be installed using npm

npm install selenium-server -D

selenium-server is developed based on Java and is used to connect to the browser. So you need to install java before installing selenium-server. How to install Java?

In addition, you also need to install a browser driver. Generally, we use chrome for testing

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrive -D

If you install chromedriver directly, it will prompt that the installation is unsuccessful, and you need to manually specify the mirror address

The parts that need to be downloaded have been downloaded.

Project configuration

nightwatch uses nightwatch.conf.js in the project root directory by default as the configuration file. The official website also has another configuration file format which is nightwatch.json. Here we use the js configuration method because the format is more flexible.

The following is a simple configuration file.

module.exports = {
    'src_folders': [
        'e2e/case'
    ],
    'output_folder': 'reports',
    'custom_commands_path': '',
    'custom_assertions_path': '',
    'page_objects_path': '',
    'globals_path': require('./e2e/config/global.config').path,
    'selenium': {
        'start_process': true,
        'server_path': require('selenium-server').path,
        'log_path': '',
        'host': '127.0.0.1',
        'port': 4444,
        'cli_args': {
            'webdriver.chrome.driver': require('chromedriver').path
        }
    },
    'test_settings': {
        'default': {
            'launch_url': 'http://localhost',
            'selenium_port': 4444,
            'selenium_host': 'localhost',
            'silent': true,
            'screenshots': {
                'enabled': false,
                'path': ''
            },
            'desiredCapabilities': {
                'browserName': 'chrome',
                'marionette': true
            }
        },
        'chrome': {
            'desiredCapabilities': {
                'browserName': 'chrome'
            }
        },
        'edge': {
            'desiredCapabilities': {
                'browserName': 'MicrosoftEdge'
            }
        }
    }
}

src_folders: represents the folder where the case is located

output_folder: represents the folder for report output

server_path under selenium: represents selenium-server The installation path

start_process under selenium: represents whether to automatically start selenium-server. If the investment is set to false, the server will not be automatically started.

"cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }

The driver below cli_args represents the installation paths of several drivers. Just install them successfully.

test_settings is the data passed to the nightwatch instance. Multiple environments can be configured here. The default is It is necessary, other environments can be prepared by yourself.

nightwatch --env default

Then we run the above command in the project.

I found an error in windows and couldn't run it. We need to configure

"scripts": {
    "e2e": "nightwatch --env default",
  },

under package.json so that it can run normally.

If you need to see the real effect, we can just create some cases under the case folder

For example:

module.exports = {
    'Test login': function (browser) {
        browser
            .windowMaximize()
            .url('https://trans.qa.17u.cn/saas')
            .waitForElementVisible('.login', 3000)
            .assert.urlContains('/saas/login')
    }
    
}

Summary: The above is the entire article The content and code are very simple, you can try it. I hope it will be helpful to everyone's learning. For more related tutorials, please visit JavaScript Video Tutorial, jQuery Video Tutorial, bootstrap Tutorial!

The above is the detailed content of Detailed explanation of automated testing of nightwatch in js. For more information, please follow other related articles on the PHP Chinese website!