文档章节

Web自动化之Headless Chrome测试框架集成

 钌子_rawbin
发布于 2017/07/11 21:24
字数 1645
阅读 12
收藏 0

使用Selenium操作headless chrome 推荐

简介

WebDriver是一个W3C标准, 定义了一套检查和控制用户代理(比如浏览器)的远程控制接口,各大主流浏览器来实现这些接口以便调用控制接口来操作浏览器。

Selenium是一整套的Web自动化测试解决方案,配合WebDrive规范,实现了对各种用户代理的适配(比如浏览器,PhantomJS等),通过操作浏览器的WebDriver接口来实现带浏览器的Web自动化。

使用selenium-webdriver

const webdriver = require('selenium-webdriver'),
    By = webdriver.By;

const driver = new webdriver.Builder()
    .forBrowser('chrome')
    .build();


driver.get('https://www.baidu.com').then((args) => {
    // 获取百度搜索按钮的 文本
    driver.findElement(By.id('su')).then((element) => {
        return element.getAttribute('value')
    }).then((btnName) => {
        console.log(btnName)
    });

    // 获取百度首页 title
    driver.getTitle().then((title) => {
        console.log(title);
    });
});


driver.quit();

使用browserstack-webdriver

只是获取driver的方式不一样,其他调用完全一样

const webdriver = require('browserstack-webdriver'),
    By = webdriver.By;

// Input capabilities
const capabilities = {
    'browserName' : 'firefox',
    'browserstack.user' : BROWSERSTACK_USERNAME,
    'browserstack.key' : BROWSERSTACK_KEY
}

const driver = new webdriver.Builder().
usingServer('http://hub.browserstack.com/wd/hub').
withCapabilities(capabilities).
build();


driver.get('https://www.baidu.com').then((args) => {
    // 获取百度搜索按钮的 文本
    driver.findElement(By.id('su')).then((element) => {
        return element.getAttribute('value')
    }).then((btnName) => {
        console.log(btnName)
    });

    // 获取百度首页 title
    driver.getTitle().then((title) => {
        console.log(title);
    });
});


driver.quit();

使用 chromedriver

chromedriver是一个编码辅助,自动配置环境变量,不需要手动下载和配置环境变量,通过安装chromedriver同时在代码中引入

require('chromedriver')
更换获取源的URL(使用如下任意一种就行)
  • 安装过程添加参数,默认下载地址为http://chromedriver.storage.googleapis.com

    npm install chromedriver --chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
    
  • 添加如下内容到.npmrc文件

chromedriver_cdnurl=https://npm.taobao.org/mirrors/chromedriver
  • 添加环境变量CHROMEDRIVER_CDNURL
CHROMEDRIVER_CDNURL=https://npm.taobao.org/mirrors/chromedriver npm install chromedriver
更换安装的chromedriver文件路径
  • 安装过程使用配置参数
npm install chromedriver --chromedriver_filepath=/path/to/chromedriver_mac64.zip
  • 添加如下内容到.npmrc文件
chromedriver_filepath=/path/to/chromedriver_mac64.zip
  • 添加环境变量
CHROMEDRIVER_FILEPATH=/path/to/chromedriver_mac64.zip

使用mocha + chai

简介

mocha是一个可以运行在浏览器端和NodeJS环境的JavaScript测试框架,区别于类库,框架定义好了流程,并调用你的代码。

chai是一个断言库,判断结果是否符合预期。

实例代码

const chai = require('chai');

const chromeDriver = require('selenium-webdriver/chrome')

const webdriver = require('selenium-webdriver'),
    By = webdriver.By;

const driver = new webdriver.Builder()
    .forBrowser('chrome')
    .setChromeOptions(new chromeDriver.Options().addArguments(['headless']))
    .build();

describe('首页加载测试',function(){
    // 获取百度搜索按钮的 文本
    describe('按钮文本',function(){
        it('按钮文本必须等于',function(done){
            driver.get('https://www.baidu.com').then(function(){
                driver.findElement(By.id('su')).then((element) => {
                    return element.getAttribute('value')
                }).then((btnName) => {
                    console.log(btnName);
                    chai.expect(btnName).to.equal('百度一下');
                    done();
                });
            });
        })

    });

    // 获取百度首页 title
    describe('首页标题',function(){
        it('首页标题应该为',function(done){
            driver.get('https://www.baidu.com').then(function(){
                driver.getTitle().then((title) => {
                    console.log(title);
                    chai.expect(title).to.equal('百度一下,你就知道');
                    done();
                });
            });
        });
    });

    after(function(){
        driver.quit();
    })
});

使用Karma + mocha + chai

简介

Karma是一个用JavaScript实现的测试执行器,实现了如下内容

  • 对各种常见框架、库的适配参考
  • 各种常见代码预处理或转译参考
  • 各种执行的测试报告方案参考
  • 各种浏览器或类浏览器的适配参考
  • 各种编辑器的适配,内容变更,立即重新执行
  • 覆盖率统计

安装相应的依赖库

npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai

生成配置文件

在工程目录下执行如下命令

./node_modules/.bin/karma init

一路按照提示操作即可,生成的配置文件在工程目录下karma.conf.js,内容大致如下:

// Karma configuration
// Generated on Mon Jul 10 2017 19:49:48 GMT+0800 (CST)

module.exports = function(config) {
  config.set({
    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',
    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['mocha'],
    // list of files / patterns to load in the browser
    files: [
    ],
    // list of files to exclude
    exclude: [
    ],
    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },
    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],
    // web server port
    port: 9876,
    // enable / disable colors in the output (reporters and logs)
    colors: true,
    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,
    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,
    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],
    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,
    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}
调整配置支持headless chrome

可以到这里,查看chrome相关的karma-launcher,有ChromeHeadlessChromeCanaryHeadless这两个headless驱动可以选择。

调整配置支持ES6,添加webpack
npm i webpack karma-webpack babel-core babel-loader babel-preset-es2015
调整配置增加测试覆盖度
npm i babel-plugin-istanbul
最终的到的Karma配置文件

karma.conf.js

// Karma configuration
// Generated on Mon Jul 10 2017 19:49:48 GMT+0800 (CST)

module.exports = function(config) {
    config.set({
        // base path that will be used to resolve all patterns (eg. files, exclude)
        basePath: '',
        // frameworks to use
        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
        frameworks: ['mocha','chai'],
        // list of files / patterns to load in the browser
        files: [
            'test/**/*.js'
        ],
        // list of files to exclude
        exclude: [
        ],
        // preprocess matching files before serving them to the browser
        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
        preprocessors: {
            'test/**/*.js': ['webpack']
        },
        // test results reporter to use
        // possible values: 'dots', 'progress'
        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
        reporters: ['progress', 'coverage'],
        coverageReporter: {
            type: 'html',
            dir: 'coverage/'
        },
        // web server port
        port: 9876,
        // enable / disable colors in the output (reporters and logs)
        colors: true,
        // level of logging
        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
        logLevel: config.LOG_INFO,
        // enable / disable watching file and executing tests whenever any file changes
        autoWatch: true,
        // start these browsers
        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
        browsers: ['ChromeHeadless'],
        // Continuous Integration mode
        // if true, Karma captures browsers, runs the tests and exits
        singleRun: true,
        // Concurrency level
        // how many browser should be started simultaneous
        concurrency: Infinity,
        webpack: {
            module: {
                loaders: [{
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: {
                        presets: ['es2015'],
                        plugins: ['istanbul']
                    }
                }]
            }
        }
    })
}

编写代码

src/index.js

const isType = (data, type) => {
    return ['[object ', type, ']'].join('') === Object.prototype.toString.call(data)
};

const isFunction = (data) => {
    return isType(data, 'Function')
};

const isArray = (data) => {
    return isType(data, 'Array')
};


module.exports = {
    isType,
    isFunction,
    isArray
}

编写测试用例

test/index.js

const typeUtil = require('../src/index')

describe('index.js: ', () => {
  it('isFunction() should work fine.', () => {
    expect(typeUtil.isFunction(function(){})).to.equal(true)
    expect(typeUtil.isFunction(Object.prototype.toString)).to.equal(true)
  });

  it('isArray() should work file.', () => {
      expect(typeUtil.isArray([])).to.equal(true)
      expect(typeUtil.isArray({})).to.equal(false)
  })
});

运行测试

  • 在当前目录下运行./node_modules/.bin/karma start
  • 或者添加如下代码到package.json
  "scripts": {
    "test": "karma start"
  }

​ 然后运行npm run test

查看结果

  • 命令行能看到运行结果
  • 在工程目录下的coverage目录能看到相应的覆盖率报告

存在的问题

Karma是将测试Case在浏览器中运行并查看结果,当页面的url 改变的时候,会影响到整个Karma的执行,会有类似Some of your tests did a full page reload!这样的提示。上面打开百度首页检查按钮和title的例子在Karma中还没有找到合适的方式写出来。

参考资料

  1. Automated testing with Headless Chrome
  2. 使用HeadlessChrome做单页应用SEO
  3. 基于HeadlessChrome的网页自动化测试系统-FinalTest
  4. 使用 headless chrome进行测试
  5. 使用 headless chrome进行测试
  6. UI自动化测试之Headless browser容器化
  7. 初探 Headless Chrome
  8. Karma原理及论文
  9. karma入门
  10. karma 测试框架的前世今生

© 著作权归作者所有

粉丝 1
博文 7
码字总数 7658
作品 0
西城
程序员
私信 提问
[Selenium自动化测试实战] 如何在不打开浏览器的情况下进行WEB自动化测试

问题 在一般的使用场景下,使用selenium进行web自动化测试都需要打开一个浏览器的实体,测试脚本通过控制webdriver来对浏览器进行操作。但是在一些场景下测试工程师需要在不打开浏览器的情况...

Batkid
2018/01/11
0
0
PuppeteerSharp: 更友好的 Headless Chrome C# API

前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常使用的莫...

张善友
03/09
0
0
使用 Headless Chrome 进行自动化测试

本文翻译自:Automated testing with Headless Chrome 作者:Eric Bidelman (Google 工程师) 译者:justjavac 如果您想使用 Headless Chrome 进行自动测试,请不要再观望了!本文将教你如何使...

justjavac
2017/07/13
0
0
Firefox 56 将支持 Headless 模式

根据 bugzilla 的信息,Windows 版的 Firefox 56 将支持 Headless 模式。Headless 提供一种无 GUI 的纯浏览器环境,对于 Web 应用和网页的自动化测试非常有用。另一个主流浏览器 Chrome 也透...

两味真火
2017/06/23
2.5K
13
无需图形界面环境下的浏览器项目一览表

本表几乎列出了所有无需图形界面环境下的浏览器开源项目,可用于自动化、测试或者其他用途。 软件名 介绍 支持语言 Awesomium 基于Chromium无图形界面浏览器引擎。 C++, .NET benv Benv是nod...

oschina
2016/07/27
13.5K
18

没有更多内容

加载失败,请刷新页面

加载更多

Feign输出Info级别日志

背景   spring cloud netfix组件中,feign相关的日志默认是不会输出的,需要自定义配置才能输出,并且Feign只对Debug基本的日志做出响应, 实际业务需要输出Info级别的日志,所以需要做自定...

xiaomin0322
14分钟前
3
0
面向解决问题的java编程,spring boot,mybatis generator和坑-1starter

1、start一个spring boot项目 第一课我们也不能免俗,要从starter开始,spring boot的起始项目脚手架可以从spring boot官方starter生成地址开始:https://start.spring.io/ 这张图列出了一个...

wphmoon
15分钟前
1
0
Linux虚拟化技术—CentOS7.4下KVM虚拟化一 安装配置及基本操作

Linux虚拟化技术—CentOS7.4下KVM虚拟化一 安装配置及基本操作 0行云流水00人评论61017人阅读2018-04-11 19:57:20 KVM的安装配置与基本操作 目录 第一部分 实验环境 第二部分 安装图形界面 ...

linjin200
17分钟前
1
0
php获取网站favicon.ico图标 api源码

 通常情况下,做网站的都会给自己的网站添加一个Icon,浏览器上一长排的标签页,用Icon来区分就显得更加醒目。现在想找一个没有Icon的网站并不好找,可见没有Icon的网站是多么的业余啊。"什...

xiaogg
20分钟前
1
0
双亲委派的认识

首先JVM中有三种类加载器 Bootstrap启动类加载器 Extension扩展类加载器(ExtClassLoader) System系统类加载器(AppClassLoader) 某个特定的类接到加载类的请求时候,首先将加载任务委托给...

最胖的瘦子
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部