飞码网-免费源码博客分享网站

点击这里给我发消息

用Nightwatch.js进行JavaScript功能测试|-JavaScript教程

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站

 

在今天的文章中,我想更深入地介绍JavaScript功能测试。为此,我们将探索和使用Nightwatch.js库。

但是在开始之前,请允许我提醒您什么是功能测试,以及为何如此重要。粗略地说,功能测试是一个过程,旨在确保应用程序能够从用户角度正常运行。

我们不是在谈论技术测试,例如单元测试或集成测试。在这里,目标是确保用户可以无缝执行特定方案,例如登录平台,购买产品等。

介绍Nightwatch.js

Nightwatch.js自身描述了一个由Node.js驱动的端到端测试框架。它依赖于Selenium,一个旨在促进Web浏览器自动化的项目。

通过人性化的语法,Nightwatch.js可以对脚本场景进行“脚本化”,然后由浏览器自动播放(不一定是无头)。

安装Nightwatch

Nightwatch本身是一个Node.js模块,这意味着您需要在计算机上安装Node。最简单的方法是使用版本管理器,例如nvm。Nightwatch是在npm上分发的,因此您可以像安装其他模块一样将其安装在全局范围内-g或在当前项目内部--save-dev

npm install --save-dev nightwatch

Nightwatch依赖Selenium WebDriver API,因此需要一台Selenium WebDriver服务器。它在Java上运行,这意味着,您还必须在您的环境中安装Java开发工具包(JDK 7+)。您可以从Oracle网站下载JDK。

下载并安装后,您可以使用来确保Java在计算机上正确可用java -version最后一步是从Selenium下载页面下载打包成jar的Selenium独立服务器。我建议您将其放在bin项目内的文件夹中。

your_project/
|
|– bin/
|   |– selenium-server-standlone-2.53.1.jar
|
`– package.json

好吧,我们都准备好了。让我们开始吧。

配置守夜人

可以想象,Nightwatch有很多配置。幸运的是,我们不必一无所知。该配置可以存在于nightwatch.json文件中,也可以位于nightwatch.conf.js项目根目录中的文件中。我建议使用后者,因为它稍微灵活一些,并且可以添加注释。

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

module.exports = {
  src_folders: ['tests'],
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

注意:我个人发现,将配置文件拆分为较小的配置对象时,该文件更易于阅读,而JSON文件则不允许这样做。

在本例中,我们告诉Nightwatch,我们的测试将tests使用特定的Selenium配置和特定的测试设置保存在一个文件夹中。让我们遍历每个块:

var SELENIUM_CONFIGURATION = {
  start_process: true,
  server_path: 'bin/selenium-server-standalone-2.53.0.jar',
  host: '127.0.0.1',
  port: 4444
};

使用此配置对象,我们告诉Selenium在上运行127.0.0.1:4444,这恰好是Nightwatch的默认值。我们还确保它使用下载并存储在bin文件夹中的Selenium服务器自动启动

 

 

注意:要进行更高级的使用,请确保检查所有Selenium选项的列表。

继续进行实际的测试设置:

var DEFAULT_CONFIGURATION = {
  launch_url: 'http://localhost',
  selenium_port: 4444,
  selenium_host: 'localhost',
  desiredCapabilities: FIREFOX_CONFIGURATION
};

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION
};

test_settingsNightwatch选项需要一个对象,该对象的键是每个环境的名称,并映射到另一个配置对象。在本例中,我们尚未设置自定义环境,因此我们使用default稍后,我们可以有一个stagingproduction测试环境。

在环境配置中,我们告诉Nightwatch要打开哪个URL(例如,对于登台而言,这是不同的),以及应该使用哪种浏览器来运行测试。

 

注意:要进行更高级的使用,请务必检查所有测试选项的列表。

var FIREFOX_CONFIGURATION = {
  browserName: 'firefox',
  javascriptEnabled: true,
  acceptSslCerts: true
};

在我们的方案中,我们将使用未启用JavaScript的Firefox,允许使用SSL证书。我们可以进一步指定一个特定的浏览器版本(带有version)或操作系统(带有platform)。

节点:要进行更高级的使用,请确保检查所有功能选项的列表。

好了,我们现在有了正确的配置。是时候写第一个测试了!

编写夜视测试

对于我们的测试,我们将考虑一个位于的登录页面/login,其中包含一个电子邮件字段,一个密码字段和一个提交按钮。提交表单时,应将用户重定向到显示“新闻提要”的页面。

在我们的配置中,我们指定测试位于名为的文件夹中tests让我们创建此tests文件夹以及一个名为的文件login.js

your_project/
|
|– bin/
|   |– selenium-server-standlone-2.53.1.jar
|
|– tests/
|   |– login.js
|
|- nightwatch.conf.js
`– package.json

该文件将导出一个描述我们方案的对象。每个键(如果有多个键)是测试的名称,映射到包含要执行的步骤的功能。

module.exports = {
  'Login test': function (client) {
    // Steps to execute
  }
};

测试功能公开了一个对象,该对象提供了描述场景所需的API。首先要做的是导航到登录URL。然后,填写字段并按按钮。最后,检查我们是否可以发现“新闻提要”文本。

module.exports = {
  'Login test': function (client) {
    client
      .url('http://foobar.qux/login')
      .setValue('input[name="email"]', 'foo@bar.com')
      .setValue('input[name="password]', 'p455w0rdZ')
      .click('button[type="submit"]')
      .assert.containsText('main', 'News feed')
      .end();
  }
};

注意:.end()为了正确关闭Selenium会话,请始终使用终止指令列表。

 

 

那很简单!现在,我们可以运行测试以查看其是否有效:

./node_modules/.bin/nightwatch

这应该给我们这样的东西:

使用Nightwatch.js实施JavaScript功能测试

注意:随着Firefox 47的发行,基于扩展的版本FirefoxDriver停止工作。Firefox 47.1和Selenium 2.53.1已修复此问题。要使用其他浏览器运行测试,请查阅项目的Wiki。

为了避免每次都到达Nightwatch二进制文件,我们可以做的最后一件事是在其中创建一个小的npm脚本package.json作为别名:

{
  "scripts": {
    "test": "nightwatch"
  }
}

改进夜视测试

进行大量的功能测试可能会导致产生大量重复的信息,从而使维护变得困难(是的,还需要维护测试套件)。为了防止这种情况,我们可以使用Page Objects

在端到端测试的世界中,“页面对象”方法是一种流行的模式,包括将测试的页面(或页面片段)包装到对象中。目标是抽象出基本的HTML和常规配置以简化方案。

幸运的是,Nightwatch具有处理页面对象的简单方法。我们需要做的第一件事是将page_objects_path选项添加到配置中。我觉得很tests/pages有道理;您可以指定任何所需的文件夹。

module.exports = {
  src_folders: ['tests'],
  page_objects_path: 'tests/pages',
  selenium: SELENIUM_CONFIGURATION,
  test_settings: ENVIRONMENTS
};

现在,我们可以login.js在此文件夹中创建一个文件。该文件名以后将用作检索此文件中指定的所有配置的键,因此我建议给它取一个明智的名称。

在此文件中,我们将指定一个URL并为某些HTML元素添加别名,并使用友好名称,以使编写将来的方案变得更加容易。

module.exports = {
  url: function () {
    return this.api.launch_url + '/login';
  },
  elements: {
    emailField: 'input[name="email"]',
    passwordField: 'input[name="password"]',
    submitButton: 'button[type="submit"]'
  }
};

请注意,我们不会对URL进行硬编码。相反,我们依靠launchUrl环境配置中定义选项。这样,我们的页面对象是上下文无关的,并且无论在什么环境下都可以工作。

现在很直接地修改我们的测试以使用page对象。首先,我们需要page从客户端通过对象检索页面每个页面对象都被公开为以页面对象文件(例如login()的名称命名的函数

然后,我们可以将CSS选择器替换为别名,并在别名之前加上@符号,以表示我们引用的是自定义名称。而已。

module.exports = {
  'Login test': (client) => {
    const page = client.page.login();

    page.navigate()
      .setValue('@emailField', 'foo@bar.com')
      .setValue('@passwordField', 'p455w0rdZ')
      .click('@submitButton')
      .assert.containsText('main', 'News feed');

    client.end();
  }
};

请注意,我们如何在客户端本身而不是页面上终止会话。

在多种环境下工作

能够在不同环境中运行功能测试对于确保本地工作没有中断任何用户路径,或者例如,登台和生产都在进行相同的工作很有用。

要在特定环境中运行测试,我们可以使用--envCLI中选项。default当我们省略该选项环境(已经在我们的配置)时使用。

让我们在配置中添加一个暂存环境。

var STAGING_CONFIGURATION = Object.assign({}, DEFAULT_CONFIGURATION, {
  launch_url: 'http://staging.foobar.qux'
});

var ENVIRONMENTS = {
  default: DEFAULT_CONFIGURATION,
  staging: STAGING_CONFIGURATION
};

现在,在运行我们的测试时,该launch_url选项将根据环境而有所不同。

npm test --env staging

总结

让我们总结一下所有这些。Nightwatch.js是一个JavaScript框架,用于编写端到端功能测试。它依靠Selenium WebDriver API,并且能够自动运行不同的浏览器。

编写测试主要包括定义典型的用户场景。为此,有一个简单但非常完整的API。

从那里开始,我会留给您,并鼓励您开始为最大的项目编写功能测试,以确保您再也不会破坏用户功能!

飞码网-免费源码博客分享网站 爱上飞码网—https://www.codefrees.com— 飞码网-matlab-python-C++ 爱上飞码网—https://www.codefrees.com— 飞码网-免费源码博客分享网站
赞 ()

相关推荐

内容页底部广告位3
留言与评论(共有 0 条评论)
   
验证码: