前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一篇文章掌握nightwatch自动化测试

一篇文章掌握nightwatch自动化测试

作者头像
frontoldman
发布2019-09-03 16:12:49
1K0
发布2019-09-03 16:12:49
举报
文章被收录于专栏:樯橹代码樯橹代码

nightwatch.js是一个web-ui自动化测试框架,被vue-cli深度整合进来。如果一个项目是基于vue-cli搭建的,基本可以做到开箱即用。

但是我们不可能一直都使用vue-cli。因为它很多时候不能够满足我们的定制化需求。我们很多时候会对构建框架进行定制,或者完全重新搭建。这个时候整合进来nightwatch就会很困难。这篇文章就来带着大家入门搭建这么一个测试框架。

所需环境

首先在项目里面安装nightwatch,切换到项目目录

代码语言:javascript
复制
npm intall nightwatch -D

安装这个还不够,还需要安装selenium-server,同样可以使用npm安装

代码语言:javascript
复制
npm install selenium-server -D

selenium-server是基于Java开发的,作用是用来连接浏览器的。所以安装selenium-server之前需要安装java。如何安装Java?

除此之外还需要安装一个浏览器驱动器,一般我们使用chrome做测试

代码语言:javascript
复制
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedrive -D

直接安装chromedriver会提示安装不成功,需要手动指定镜像地址

至此需要下载的部分已经下载完成。

项目配置

nightwatch默认使用项目根目录的nightwatch.conf.js作为配置文件。官网也有另外一种配置文件的格式就是nightwatch.json。这里我们使用js的配置方式,因为格式更灵活。

下面这个就是一个简单的配置文件。

代码语言:javascript
复制
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:表示的就是case所在的文件夹

output_folder:代表的是报告输出的文件夹

selenium下面的server_path:代表的是selenium-server的安装路径

selenium下面的start_process:代表的是是否自动启动selenium——server,入股设为false,不会自动启动server。

代码语言:javascript
复制
"cli_args" : {
      "webdriver.chrome.driver" : "",
      "webdriver.gecko.driver" : "",
      "webdriver.edge.driver" : ""
    }

cli_args下面的driver表示几个driver的安装路径,分别安装成功就可以了

test_settings是传给nightwatch实例的数据,这里面可以配置多个环境,default是必须有的,其他环境可以自行配制。

代码语言:javascript
复制
nightwatch --env default

然后我们在项目里运行以上命令。

在windows发现报错了,运行不起来的。我们需要在package.json下面配置一下

代码语言:javascript
复制
"scripts": {
    "e2e": "nightwatch --env default",
  },

这就可以正常运行了。

如果需要看到真实的效果,我们在case文件夹下面创建一些case就可以了

比如:

代码语言:javascript
复制
module.exports = {
    'Test login': function (browser) {
        browser
            .windowMaximize()
            .url('https://trans.qa.17u.cn/saas')
            .waitForElementVisible('.login', 3000)
            .assert.urlContains('/saas/login')
    }
    
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 所需环境
  • 项目配置
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档