精华内容
下载资源
问答
  • 前端E2E测试略解

    万次阅读 2018-07-25 10:23:03
    什么是E2EE2E(End To End)即端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。 典型E2E测试框架对比 名称 断言 是否跨浏览器支持 实现 ...

    什么是E2E

    E2E(End To End)即端对端测试,属于黑盒测试,通过编写测试用例,自动化模拟用户操作,确保组件间通信正常,程序流数据传递如预期。

    典型E2E测试框架对比

    名称断言是否跨浏览器支持实现官网是否开源
    nightwatchassert 和 Chai Expectseleniumhttp://nightwatchjs.org/
    cypressChai、Chai-jQuery 等Chromehttps://www.cypress.io/
    testcafe自定义的断言不是基于 selenium 实现https://devexpress.github.io/testcafe/
    katalonTDD/BDD未知https://www.katalon.com/katalon-studio/
    1. nightwatch 需要安装配置 selenium,selenium-server需要安装jdk(Java Development Kit)。
    2. cypress 安装方便,测试写法和单元测试一致,只支持 Chrome 类浏览器,有支持其他浏览器的计划
    3. testcafe 安装方便,测试写法与之前的单元测试差异比较大,编写测试用例时只能选择到可见的元素
    4. katalon 不是测试框架,是 IDE ,比较重,并且不开源,测试用例不是用 js 编写但是可以通过 Chrome 插件录测试用例

    经过测试使用对比,nightwatch 和 cypress 是 vue 推荐的框架,社区活跃度较高,功能较为完备,开源,推荐二选一(nightwatch 需要装 jdk,准备工作多,但 AP I丰富度更高;cypress 有自己的可视化窗体,能记录运行信息,重现 bug 精品)

    nightwatch

    1. 安装

    npm i selenium-server nightwatch chromedriver -D
    

    chromedriver 安装需要翻墙,很坑,如果没梯子去网上搜罗单独的包,然后改配置文件

    2. 配置

    根目录新建nightwatch.conf.js(也可json,推荐js):

    const path = require('path');
    module.exports = {
      // 测试文件入口
      src_folders: ['tests'],
      // 输出报表路径
      output_folder: 'reports',
    
      // selenium配置
      selenium: {
        start_process: true,
        server_path: require('selenium-server').path,
        host: '127.0.0.1',
        // selenium log输出
        log_path: 'reports',
        port: 9090,
        cli_args: {
          'webdriver.chrome.driver': require('chromedriver').path,
          'webdriver.gecko.driver': require('chromedriver').path
        }
      },
    
      test_settings: {
        default: {
          launch_url: 'http://localhost',
          selenium_port: 9090,
          selenium_host: 'localhost',
          silent: true,
          screenshots: {
            enabled: false,
            path: ''
          }
        },
    
        chrome: {
          desiredCapabilities: {
            browserName: 'chrome',
            javascriptEnabled: true,
            acceptSslCerts: true
          }
        }
      }
    };
    

    3.测试用例

    新建 tests 文件夹,在里面新建 test.js,内容如下:

    module.exports = {
      'Demo test Baidu' : function (browser) {
        browser
          .url('www.baidu.com')
          .waitForElementVisible('body', 1000)
          .setValue('input[name=wd]', 'NightWatch')
          .click('#su')
          .pause(1000)
          .assert.containsText('#container', 'NightWatch')
          .end();
      }
    };
    

    4. 运行

    ①推荐在 package.json 中配置

    "scripts": {
        "test": "./node_modules/.bin/nightwatch --env"
      },
    

    就可以直接 npm test,也可以在shell中手动。
    ②根目录新建 entry.js(名字自起)

    require('nightwatch/bin/runner.js');
    

    之后shell中node entry.js

    cypress

    1. 安装

    npm install cypress --save-dev
    

    2. 启动

    ./node_modules/.bin/cypress open
    

    可添加至 npm scripts

    3. 写测试用例

    touch {your_project}/cypress/integration/simple_spec.js
    
    describe('My First Test', function() {
      it("Gets, types and asserts", function() {
        cy.visit('https://example.cypress.io')
    
        cy.contains('type').click()
    
        // Should be on a new URL which includes '/commands/actions'
        cy.url().should('include', '/commands/actions')
    
        // Get an input, type into it and verify that the value has been updated
        cy.get('.action-email')
          .type('fake@email.com')
          .should('have.value', 'fake@email.com')
      })
    })
    
    展开全文
  • 前端E2E测试略详解(以cypress为例)

    千次阅读 2018-09-09 12:32:33
    E2E测试 (by cypress): cypress安装 npm install cypress --save-dev cypress启动 ./node_modules/.bin/cypress open 推荐将启动命令配置在package.json的scripts中,命名为e2e cypress自定义设置 ...

    上一篇文章很简略的介绍了E2E测试的一些框架,本文从相对更详细的层面进行整理

    E2E测试 (by cypress):

    cypress安装

    npm install cypress --save-dev

    cypress启动

    ./node_modules/.bin/cypress open

    推荐将启动命令配置在package.json的scripts中,命名为e2e

    cypress自定义设置

    cypress默认有推荐配置,我们可根据业务需求进行一些配置的覆盖。
    配置创建方式:在根目录中创建cypress.json,常用内容如下:

    {
      "viewportWidth": 1440,
      "viewportHeight": 960,
      "chromeWebSecurity": false,
      "fixturesFolder": "test/cypress/fixtures",
      "integrationFolder": "test/cypress/integration",
      "pluginsFile": "test/cypress/plugins",
      "screenshotsFolder": "test/cypress/screenshots",
      "videosFolder": "test/cypress/videos",
      "supportFile": "test/cypress/support",
      "requestTimeout": 10000,
      "defaultCommandTimeout": 10000,
      "baseUrl": "http:/***:****"
    }

    测试流程

    1. 确定要测试的流程

    以“添加员工”为例,流程为:登录——>点击添加员工进入添加员工界面——>填写员工信息——>点击保存完成添加——>等待跳转员工管理页面,检验表格中是否存在新增员工的数据

    2. 明确流程中涉及操作的元素
    • 登录:用户名输入框、密码输入框(无法测试手机或图片验证码,可以选择使用cookies)
    • 点击添加员工:添加员工按钮
    • 填写员工信息:手机号输入框、姓名输入框、分支按钮与分支弹窗、邮箱输入框、民族选择框与选项面板、性别选择框与选项面板、出生日期输入框
    • 保存员工信息:保存按钮
    • 检验添加成功与否:员工信息表格组件
    3. 给操作元素确定标记

    用户名输入框:data-test-input_username
    密码输入框:data-test-input_password
    添加员工按钮:data-test-btn_add
    手机号输入框:data-test-input_phonenumber
    姓名输入框:data-test-input_name
    分支按钮:data-test-btn_branch
    分支弹窗:data-test-selector_branch
    邮箱输入框:data-test-input_email
    民族选择框:data-test-select_nation
    民族选项面板:data-test-option_nation
    性别选择框:data-test-select_sex
    性别选项面板:data-test-option_sex
    出生日期输入框:data-test-input_date
    保存按钮:data-test-btn_save
    员工信息表格:data-test-table_staff

    4. 编写该流程测试用例
      it('add staff', function() {
        cy.get('[data-test-btn_add]').click({force: true});
        cy.wait(1000)
        cy.get('[data-test-input_phonenumber]').type(phoneNumber)
        cy.get('[data-test-input_name]').type(userName)
        cy.get('[data-test-btn_branch]').click();
        cy.get('[data-test-selector_branch]').contains('PC组').prev().click();
        cy.get('[data-test-selector_branch]').contains('确 定').click();
        cy.get('[data-test-input_email]').type(email)
        cy.get('[data-test-select_nation]').click()
        cy.get('[data-test-option_nation]').eq(0).click()
        cy.get('[data-test-select_sex]').click()
        cy.get('[data-test-option_sex]').eq(0).click()
        cy.get('[data-test-input_date]').find('input').type('2017-08-08{enter}');
        cy.get('[data-test-btn_save]').click()
        cy.get('[data-test-table_staff]').should('contain', userName)
          .and('contain', phoneNumber)
      })
    5. 开发过程中给相应元素进行标记
    <Button type="primary" data-test-btn_add>添加员工</Button>
    <Input data-test-input_phonenumber v-model.trim="form.mobilePhone.number"  @change="handleMobilePhoneChanged" v-loading="mobiePhoneInChecking" size="small">
    <Input data-test-input_name v-model.trim="form.name"  size="small" maxlenth="20"></Input>
    ...
    6. 开发完成后运行e2e测试
    npm run dev
    npm run e2e
    点击测试文件

    e2e测试成本与收益

    成本分析:
    1. cypress安装极为简单,且仅需修改少量配置即可集成到项目中,使用方式也很简洁;
    2. 工作流程和需要操作的元素是正常开发工作都要考虑的,几乎不算增加成本;
    3. 给操作元素确定标记在参见命名规范和确定操作元素的基础上可以较为轻易的完成;
    4. cypess的e2e测试语法与单元测试语法相同,学习成本较低,编写测试用例较为简单;
    5. 在开发过程中给涉及操作的元素加上标记是很容易的,只需要额外付出很少的时间就能完成,但由于标记无法自动删除,因此会略微增加文件体积;
    6. cypress运行简单,操作便捷,所增额外成本较少。
      总的来说,相较于不使用e2e测试的项目开发,集成e2e测试的成本是很低的。
    收益分析:
    1. e2e测试可以替代人工进行流程测试,节省人力成本,在多次测试情况下收益更为显著;
    2. 使用e2e测试可以定期监测线上项目,及时发现问题,这在之前是没有的过程,线上项目的问题都是让用户直接发现反馈,如果能在一些用户遇到之前就能先发现并解决,无疑能起到很好的效果。
    成本收益对比

    综上分析,集成e2e测试的成本是比较低的,而收益较为明显,因此在项目中集成e2e测试是利大于弊的。

    关于一些问题的解答

    1. 为什么要打点?

    ①使用打点获取元素稳定性最高;

    ②打点后编写测试用例更便捷;

    ③打点过程也是对流程的整理;

    ④通过打点可以在业务代码开发完成就可以编写测试用例。

    2. e2e测试的缺点?

    ①测试稳定性不高,偶尔会因为其他因素导致测试流程失败(如网路超时);

    ②出现bug只能得到测试不通过的信息,但对出现bug的原因无法追溯。

    3. 选用cypress进行e2e测试有什么问题?

    ①cypress基于chromenium,暂不支持其他型号浏览器的测试,无法测试浏览器兼容性;

    ②cypress控制台没有给出操作时长数据,不能测试代码性能;

    ③当项目实现方式(UI组件变化、组件结构变化等)出现变化时,可能导致一些预期打点位置不再适合或无法进行打点,需要根据更改后的结构对出现问题的组件重新处理。

    展开全文
  • unit单元测试和e2e端到端测试的区别

    千次阅读 2018-06-30 22:05:54
    前端实现自动化就要借助到unit和e2e端到端测试了 一.unit测试 站在程序员的角度测试 unit测试是把代码看成是一个个的组件。从而实现每一个组件的单独测试,测试内容主要是组件内每一个函数的返回结果是不是和期望...

    前端实现自动化就要借助到unit和e2e端到端测试了

    一.unit测试
    站在程序员的角度测试
    unit测试是把代码看成是一个个的组件。从而实现每一个组件的单独测试,测试内容主要是组件内每一个函数的返回结果是不是和期望值一样。
    例如:

    const compare = (a,b) => a>b?a:b
    对这个函数进行测试
    expect(compare(1,2)).to.equal(2) //ok
    expect(compare(2,1)).to.equal(1) //ok
    测试完成
    而代码覆盖率是指代码中每一个函数的每一中情况的测试情况,上述测试的代码覆盖率是100%

    const compare = (a,b) => a>b?a:b
    对这个函数进行测试
    expect(compare(2,1)).to.equal(1) //ok
    测试完成
    这样代码覆盖率是50%,因为else情况没有测试到

    二.e2e测试
    站在用户角度的测试
    e2e测试是把我们的程序堪称是一个黑盒子,我不懂你内部是怎么实现的,我只负责打开浏览器,把测试内容在页面上输入一遍,看是不是我想要得到的结果。

    两者的存在都是很有意义的。
    unit测试是程序员写好自己的逻辑后可以很容易的测试自己的逻辑返回的是不是都正确。
    e2e代码是测试所有的需求是不是都可以正确的完成,而且最终要的是在代码重构,js改动很多之后,需要对需求进行测试的时候测试代码是不需要改变的,你也不用担心在重构后不能达到客户的需求。

    作者:我不叫奇奇
    链接:https://www.jianshu.com/p/ffd6d319f05b
    來源:简书
    简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

    展开全文
  • e2e test 端到端的测试

    万次阅读 2016-11-23 11:47:21
    e2e或者端到端(end-to-end)或者UI测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之,它从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。 具体...

    在进行学习的时候,遇到了一个新的知识点。总想来记录一下,学到老,活到老。

    e2e或者端到端(end-to-end)或者UI测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之,它从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。

    具体链接看:http://sentsin.com/web/658.html


    展开全文
  • web前端测试——e2e测试

    万次阅读 2018-09-12 11:11:43
    在test目录下创建e2e文件夹,并在e2e文件夹下创建index.js文件。 index.js文件内容: const {Builder, By, Key, until} = require('selenium-webdriver'); (async function example() {  let ...
  • 功能安全专题之端到端(E2E) 的通信保护

    万次阅读 多人点赞 2020-06-17 18:32:31
    2.1 E2E的可选配置(Profiles) AUTOSAR指定了一系列的标准化及可配置的E2E配置,每个配置实现了一系列的安全机制,并且指定的对应的E2E控制字段的格式。 任一E2E配置使用的都是如下的保护机制的一部分: CRC校验和,...
  • vue-cli 自动化测试 Nightwatch 详解 2018-08-30 15:01:19 分类:前端开发 来自:奇舞周刊,作者:冯通 vue-cli 是我最喜欢的...Setup e2e tests with Nightwatch? 每到此处, 我都会无情的选择 no, 这也是我...
  • 同事买一个二手打印机 蓝天PR2, 网站找半天发现官方不支持WIN764位,没办法拨打客服电话,建议用...EPSON LQ 1600k 南天 PR2E 打印机驱动程序 win7 WIN8 64位.zip 南天PR2_OKI5530 FOR 64 WIN7.rar 两款驱动足够用的了
  • latex 算法,算法包 algorithm, algorithm2e

    万次阅读 多人点赞 2017-05-10 03:22:49
    发现 latex 还有专门排版 算法伪...发现 algorithm2e 工具包比较好用,调用时: \usepackage[ruled,linesnumbered]{algorithm2e} 该工具包的使用手册下载地址: http://mlg.ulb.ac.be/files/algorithm2e.pdf
  • 官上面的官网地址就是主角USBCAN-2E-U的一些介绍和文档,周立功的产品较多请大家看准型号。好久不用这个CAN卡了,笔记本也刷了系统,连上发现没有驱动了识别不了。官网上的驱动下载后打不开,找遍了同事和供应商最后...
  • Latex之使用algorithm2e包来写算法

    万次阅读 2019-05-04 17:19:37
    algorithm2e是latex上用来写算法的包。 目前还有很多,比如algorithmc等。两者的语法不同。 使用时要先导入包: \usepackage[ruled,linesnumbered]{algorithm2e} 下面贴出一个示例: \begin{algorithm}[t] \...
  • 超越函数e^(-x^2)的定积分

    万次阅读 多人点赞 2018-07-11 14:31:32
    e^(x^2)dx 是超越积分(不可积积分),它的原函数是非常规的可求其定积分:
  • Eclipse在线安装Maven插件m2e

    万次阅读 2016-07-02 19:58:08
    我使用的Eclipse版本是3.7(Indigo)  通过Eclipse的help选项,点击“Install... 点击add按钮,在Location里输入http://download.eclipse.org/technology/m2e/releases/1.3然后就可以选择安装。 ...这里如果m2e的版本选
  • 无穷积分 ∫e^(-x^2)dx 的几种巧妙解法

    万次阅读 多人点赞 2020-02-05 20:05:47
    广义积分 ∫e^(-x^2)dx 是一个比较常见的无穷积分,在许多领域有着重要应用。在此介绍几种巧妙的解法,供读者欣赏。
  • Latex 中algorithm2e 使用例子

    万次阅读 2012-09-17 15:34:42
    The algorithm2e LaTeX package conflicts with several others over the use of the algorithm identifier.  A common indicator is something like this message: Too many }'s.l....
  • USBCAN-2E-U与USBCAN-II的使用区别

    万次阅读 2013-04-25 17:16:29
    USBCAN-II已经停产,目前它的升级版本为USBCAN-2E-U,之前我有过一篇文章讨论USBCAN-II的使用方法,见:点http://blog.csdn.net/flydream0/article/details/8088248.本文的...仔细看了下USBCAN-2E-U的开发手册,发现相对于U
  • e^(-x^2)dx怎么求 ??用的是什么方法??

    万次阅读 多人点赞 2019-04-08 20:27:28
  • SSD,PCI-E,NVMe,M.2分类详解

    万次阅读 2018-08-25 10:17:18
    SSD,PCI-E,NVMe,M.2分类详解 首先说一下目前固态硬盘常用的两个接口(与主板相连的接口形状)SATA3和M.2。 (1)采用SATA3接口(目前机械硬盘采用的接口方式)的固态硬盘,在传输方式上与SATA3 的机械硬盘一样...
  • gerp -e和grep -E的区别

    万次阅读 2019-06-13 10:19:28
    grep -e 只能传递一个检索内容 ...grep -e pattern1 -e pattern2 filename 例如: $ grep -e Tech -e Sales employee.txt 100 Thomas Manager Sales $5,000 200 Jason Developer Technology $5,500 ...
  • 欧拉公式V+F-E=2的证明

    千次阅读 2013-04-15 09:58:02
    V+F-E=2 证明: 任何多面体若有一个面不是三角形,增加一对角线,即加一面、一边,F + V - E 的值不变,一直重复,最后可令每一个面都是三角形。 考虑每一个面都是三角形时,取走一面,即要证明 F + V ...
  • N o v e m b e r 2 8 t h W e d n e s d a y

    万次阅读 2007-11-30 21:43:00
    I f y o u d e v e l o p a n a p p l i c a i o n f o r A p a c h e p l a t f o r m , t h e r e f o u r c o r e o b j e c t s m u s t b e u n d e r s t o o d . T h e m
  • 具体文档链接:https://codingpy.com/books/thinkpython2/03-functions.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,373,467
精华内容 2,549,386
关键字:

e2e