使用nightwatch进行E2E测试中文教程

最新推荐文章于 2022-01-14 17:28:31 发布

任乃千

最新推荐文章于 2022-01-14 17:28:31 发布

阅读量4.7k

点赞数 2

分类专栏：入门教程文章标签： E2E Nightwatch JavaScript

本文链接：https://blog.csdn.net/rennaiqian/article/details/79121770

版权

本文是一篇关于使用Nightwatch进行E2E测试的教程，详细介绍了E2E测试的概念及其在重构中的作用，重点讲解了Nightwatch的安装、配置、API使用，包括Expect、Assert、Commands和Webdriver协议，并提到了拓展应用如Headless测试和与其他工具的配合。

摘要由CSDN通过智能技术生成

E2E测试

E2E(end to end)测试是指端到端测试又叫功能测试，站在用户视角，使用各种功能、各种交互，是用户的真实使用场景的仿真。在产品高速迭代的现在，有个自动化测试，是重构、迭代的重要保障。对web前端来说，主要的测试就是，表单、动画、页面跳转、dom渲染、Ajax等是否按照期望。

E2E测试驱动重构

重构代码的目的是什么？是为了使代码质量更高、性能更好、可读性和拓展性更强。在重构时如何保证修改后正常功能不受影响？E2E测试正是保证功能的最高层测试，不关注代码实现细节，专注于代码能否实现对应的功能，相比于单元测试、集成测试更灵活，你可以彻底改变编码的语法、架构甚至编程范式而不用重新写测试用例。

Nightwatch

知道nightwatch是因为vue-cli工具安装的时候会询问是否需要安装nightwatch。本身vue项目也是使用nightwatch来e2e测试的。nightwatch是一个使用selenium或者webdriver或者phantomjs的nodejs编写的e2e自动测试框架，可以很方便的写出测试用例来模仿用户的操作来自动验证功能的实现。selenium是一个强大浏览器测试平台，支持firefox、chrome、edge等浏览器的模拟测试，其原理是打开浏览器时，把自己的JavaScript文件嵌入网页中。然后selenium的网页通过frame嵌入目标网页。这样，就可以使用selenium的JavaScript对象来控制目标网页。

Nightwatch安装

通过npm安装nightwatch。

$ npm install [-g] nightwatch

根据需要安装Selenium-server或者其他Webdriver，比手动去下载jar文件要方便很多。安装哪些Webdriver取决于你想要测试哪些浏览器，如果只测试Chrome甚至可以不装Selenium-server

$ npm install selenium-server
$ npm install chromedriver

Nightwatch的配置

nightwatch的使用很简单，一个nightwatch.json或者nightwatch.config.js（后者优先级高）配置文件，使用runner会自动找同级的这两个文件来获取配置信息。也可以手动使用–config来制定配置文件的相对路径。

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : "",
  "globals_path" : "",

  "selenium" : {
    "start_process" : false,
    "server_path" : "",
    "log_path" : "",
    "port" : 4444,
    "cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }
  },

  "test_settings" : {
    "default" : {
      "launch_url" : "http://localhost",
      "selenium_port"  : 4444,
      "selenium_host"  : "localhost",
      "silent": true,
      "screenshots" : {
        "enabled" : false,
        "path" : ""
      },
      "desiredCapabilities": {
        "browserName": "firefox",
        "marionette": true
      }
    },

    "chrome" : {
      "desiredCapabilities":