使用karma做多浏览器的UI测试

avalon1.6开发得差不多,这次使用先进的开发理念进行开发,比如模块化,单元测试什么。。。

ui测试是重要的一环,之前用阿里的totoro,但打开浏览器不方便。于是从webdrieverio, nightwatch,一直找到karma!

karma的官网尤其烂,我搞了好久才能运行起来

用到的npm模块有:

karma
karma-mocha
karma-mocha-reporter
karma-firefox-launcher
karma-chrome-launcher
karma-opera-launcher
karma-safari-launcher

在你项目下添加karma.config.js

module.exports = function (config) {
    config.set({
        basePath: ‘‘,
        frameworks: [‘mocha‘],
        files: [
            {pattern: ‘node_modules/chai/chai.js‘, include: true},
            ‘karma/index.js‘
        ],
        exclude: [],
        reporters: [‘mocha‘],
        mochaReporter: {
            output: ‘autowatch‘,
            colors: {
                success: ‘green‘,
                info: ‘bgGreen‘,
                warning: ‘cyan‘,
                error: ‘bgRed‘
            }
        },
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
//autoWatch为true,Karma将自动执行测试用例
        autoWatch: true,
//http://www.cnblogs.com/NetSos/p/4371075.html
        browsers: [‘Opera‘,‘Chrome‘, ‘Firefox‘,"Safari"],
        singleRun: false,
        plugins: [
            ‘karma-mocha‘,
            ‘karma-mocha-reporter‘,
            ‘karma-firefox-launcher‘,
            ‘karma-chrome-launcher‘,
            ‘karma-opera-launcher‘,
            ‘karma-safari-launcher‘
        ]
    })
}

然后我们在此项目中建立一个叫karma的目录,里面建index.js

/**
 * Created with IntelliJ IDEA.
 * User: shenyanchao
 * Date: 3/5/13
 * Time: 5:51 PM
 * To change this template use File | Settings | File Templates.
 */

var assert = chai.assert;
var should = chai.should();

describe(‘Array‘, function(){

    before(function(){
        console.log(‘this called in before all‘);
    });
    beforeEach(function(){
        console.log(‘invoke before each method‘);
    });

    afterEach(function(){
        console.log(‘invoke after each method‘);
    });
    after(function(){
        console.log(‘this called in after all‘);
    });

    describe(‘#indexOf()‘, function(){

        it(‘should return -1 when the value is not present‘, function(){
            console.log(‘invoke one assert‘);
            assert.equal(-1, [1,2,3].indexOf(5));
            assert.equal(-1, [1,2,3].indexOf(0));

        });
    });

    describe(‘#indexOf()‘, function(){

        it(‘should return -1 when the value is not present‘, function(){
            console.log(‘invoke second should‘);
            [1,2,3].indexOf(5).should.equal(-1);
            [1,2,3].indexOf(0).should.equal(-1);
        });
    });
})

然后执行karma start命令就能看到效果

大家还看不懂,可以看这里

时间: 2024-10-09 21:10:19

使用karma做多浏览器的UI测试的相关文章

关于本次实验的UI测试

在这次实验中,由于自己之前编写的大多数Windows app都为以用户界面为主的应用,所以要对其进行测试,应该进行UI测试,通过学习以及实验,我总结了以下关于UI测试应该注意到的内容. UI界面测试要点 1.界面的线条是否一致,每个界面中线条是否对齐,是否一致.(静态页面没有确认的情况下). 2. 整个系统的界面是否保持一致. 3. 界面是否存在错别字. 4. 界面上的按钮样式是否一致. 5. 每个界面是否同原静态页面设置一致(静态页面确认的情况下) 6. 操作是否友好. 7. 界面所有的按钮.

编码的 UI测试项目

以下是用Visual Studio 2013 做编码的UI测试的步骤 1.新建测试项目 在visual studio中(我用的版本是2013 update2)点击文件->新建->项目,选择“编码的UI测试项目”,在对话框中选择“录制操作.编辑UI映射或添加断言”,点击“确定”. 2.录制的一系列操作 进行完以上步骤,VS最小化,出现编码的UI测试生成器: 从左向右的button依次是:开始/暂停录制,编辑,添加断言,生成代码: 之后进行录制: 点击“开始录制”,打开浏览器,再点击“生成代码”,

uiaotumator ui测试 快速调试

1. uiaotumator ui测试 Demo.java package uiautomatorDemo1; import java.io.File; import android.graphics.Point; import android.graphics.Rect; import android.os.RemoteException; import android.view.KeyEvent; import android.view.Surface; import com.android

软件测试学习随笔(5) 编码的UI测试

自动化测试指软件测试的自动化,软件测试就是在预设条件下运行系统或应用程序,评估运行结果,预先条件应包括正常条件和异常条件. 自动化测试是把以人为驱动的测试行为转化为机器执行的一种过程.通常,在设计了测试用例并通过评审之后,由测试人员根据测试用例中描述的规程一步步执行测试,得到实际结果与期望结果的比较.在此过程中,为了节省人力.时间或硬件资源,提高测试效率,便引入了自动化测试的概念. Visual Studio 2012中的自动化UI测试功能可以很轻松地测试应用程序的UI功能,利用它可以帮助你完成

编码的UI测试

Visual Studio 2012中的自动化UI测试功能可以很轻松地测试应用程序的UI功能,利用它可以帮助你完成编码的UI测试. 一.新建编码的UI测试项目 在visual studio 2012中,点击文件->新建->项目,在其他语言中选择C#,点击测试,选择编码的UI测试项目点击确定. 二.录制UI测试操作 新建测试项目之后,选则录制操作,出现编码的UI测试生成器: 之后进行录制: 点击“开始录制”,打开浏览器,这里打开的是http://channel9.msdn.com/Series/

编码UI测试

转自他人博客 使用 UI 自动化验证代码 Visual Studio 2013 驱动器通过其用户界面 (UI) 的应用程序的自动化的测试称为编码的 UI 测试的 (CUITs). 这些测试包括用户界面控件的功能测试. 它们使您可以验证整个应用程序,包括其用户界面,能正常工作. 没有验证或在用户界面中,例如在网页中的其他逻辑时,编码的 UI 测试将特别有用. 他们还经常用于自动执行现有手动测试. 下面的插图所示,一种典型的开发体验可能位置,开始时,您只需生成您的应用程序 (F5) 然后单击通过 U

编码的UI测试项目——Visual Studio 2013

今天实现了一次编码的UI测试项目,以下是我进行测试的过程: 1.新建测试项目 在visual studio中(我用的版本是2013 update2)点击文件->新建->项目,选择“编码的UI测试项目”,在对话框中选择“录制操作.编辑UI映射或添加断言”,点击“确定”. 2.录制的一系列操作 进行完以上步骤,VS最小化,出现编码的UI测试生成器: 从左向右的button依次是:开始/暂停录制,编辑,添加断言,生成代码: 之后进行录制: 点击“开始录制”,打开浏览器,再点击“生成代码”,命名为“o

《软件测试自动化之道》读书笔记 之 底层的Web UI 测试

<软件测试自动化之道>读书笔记 之 底层的Web UI 测试 2014-09-28 测试自动化程序的任务待测程序测试程序  启动IE并连接到这个实例  如何判断待测web程序完全加载到浏览器  操纵并检查IE Shell  操作待测Web页面上的HTML元素的值  验证Web页面上HTML元素  示例代码 测试自动化程序的任务 底层技术的核心是,通过直接调用mshtml.dll和shdocvw.dll库来访问并且操纵IE客户区域的HTML对象. 待测程序 新建一个网站“WebAUT”,删除原来

软件测试学习笔记week 5 --- 利用Visual Studio 2012进行UI测试

编码的UI测试 Visual Studio 2012中的自动化UI测试功能可以很轻松地测试应用程序的UI功能,利用它可以帮助你完成编码的UI测试. 一.新建编码的UI测试项目 在visual studio 2012中,点击文件->新建->项目,在其他语言中选择C#,点击测试,选择编码的UI测试项目点击确定. 二.录制UI测试操作 新建测试项目之后,选则录制操作,出现编码的UI测试生成器: 之后进行录制: 点击“开始录制”,打开浏览器,这里打开的是http://channel9.msdn.com