端对端测试cypress、testcafe

###端对端测试----框架选定

---

###1、典型E2E测试框架对比

https://baijiahao.baidu.com/s?id=1662735088493640930&wfr=spider&for=pc

• 常见的4种框架对比

名称	断言	是否跨浏览器支持	实现	官网	是否开源
nightwatch	assert 和 Chai Expect	是	selenium	http://nightwatchjs.org/	是
cypress	Chai、Chai-jQuery 等	否	Chrome	https://www.cypress.io/	是
testcafe	自定义的断言	是	不是基于 selenium 实现	https://devexpress.github.io/testcafe/	是
katalon	TDD/BDD	是	未知	https://www.katalon.com/katalon-studio/	否

• 备注：

  nightwatch 需要安装配置 selenium，selenium-server需要安装jdk（Java Development Kit）。
  cypress 安装方便，测试写法和单元测试一致，只支持 Chrome 类浏览器，有支持其他浏览器的计划
  testcafe 安装方便，测试写法与之前的单元测试差异比较大，编写测试用例时只能选择到可见的元素
  katalon 不是测试框架，是 IDE ，比较重，并且不开源，测试用例不是用 js 编写但是可以通过 Chrome 插件录测试用例

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

###1、nightwatch

1. 安装

npm i selenium-server nightwatch chromedriver -D

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

###1、cypress

1. 安装

npm install cypress --save-dev

2. 配置

./node_modules/.bin/cypress open

可添加至 npm scripts
3. 测试用例
新建 tests 文件夹，在里面新建 test.js，内容如下：

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('[email protected]')
      .should('have.value', '[email protected]')
  })
})

---

####详细步骤：
1、cmd进入命令行模式，进入D盘创建一个文件夹：mkdir Crypress_project；
　　3、进入新创建的文件夹下面：cd Crypress_project；
　　4、初始化项目：npm init -y；
　　5、安装cypress：npm i cypress -S -D；安装成功截图如下：

6、打开package.json文件，将里面的内容全部删除，复制上去以下代码：

 {
　　"scripts": {
　　"cypress": "cypress open"
　　}
}

2.3、运行Cypress
　　1、运行命令： npm run cypress；
　　2、Cypress窗口正常打开不报错，即环境安装成功。 （亲测 下载很慢）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tJkIKOA1-1589348247933)(http://apidoc.what.com:4999/server/…/Public/Uploads/2020-05-11/5eb9206e986e2.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g2OrAfVp-1589348247937)(http://apidoc.what.com:4999/server/…/Public/Uploads/2020-05-12/5eba02e58185b.png)]

模拟百度搜索 调用

describe('My First Test', function() {
    it('Visits the baidu', function() {
        cy.visit('http://www.baidu.com');
        cy.get('#kw').should(($kw) => {
            $kw.val('cypress 测试')
        });
        cy.contains('百度一下').click();
        cy.url().should('include', '/s?');
		
		 cy.contains('下一页').click();
		 
		cy.get('#kw').should(($kw) => {
            $kw.val('cypress 断言语法')
        });
		
		 cy.contains('Cypress-自动化测试-').click();
		
		
		
    })
})

https://zhuanlan.zhihu.com/p/74648604

TestCafe

一、使用步骤：
1，安装
全局安装：
npm install -g testcafe

或局部安装：

npm install --save-dev testcafe

2、使用
1，编写脚本 test.js，以新建一个用户为例

  
import { Selector } from 'testcafe';
export default class Page {
    constructor () {
        this.nameInput             = Selector('.nameinput .el-input__inner');
        this.passInput             = Selector('.passwordinput .el-input__inner');
        this.loginSubmit           = Selector('.login-submit');
    }
}
//启动的服务地址
fixture `My first fixture`
    .page `http://192.168.200.83:3009/`;

const page = new Page();

test('My first test', async t => {
    await t
	//登录
        .typeText(page.nameInput, 'xitong')
        .typeText(page.passInput, '123456')
        .click(page.loginSubmit)
        .expect(Selector('.headerMiddle h2').innerText).eql('管理系统');
		
		//进入用户管理模块
      await t.click(Selector('.el-submenu').withText('平台管理'))
             .click(Selector('.el-submenu__title').withText('用户管理'))
         .expect(Selector('.title').exists).ok();
		 
		 //新建用户管理
    await t.click(Selector('.el-button').withAttribute('title', '新建'))
          .typeText(Selector('.el-input__inner').withAttribute('placeholder', '请填写姓名'), 'xitong')
        .click(Selector('.el-checkbox__label').withText('男').prevSibling())
        .click(Selector('.el-button').withText('确定'))
        .expect(Selector('table > tbody > tr:nth-child(1) > td.el-table_5_column_17 > div').innerText).eql('xitong');
		//修改用户管理
    await t.click(Selector('table > tbody > tr:nth-child(1)'))
        .click(Selector('.el-button').withAttribute('title', '修改'))
        .typeText(Selector('.el-input__inner').withAttribute('placeholder', '请填写姓名'), '11')
        .click(Selector('.el-checkbox__label').withText('女').prevSibling())
        .click(Selector('.el-button').withText('确定'))
        .expect(Selector('table > tbody > tr:nth-child(1) > td.el-table_5_column_17 > div').innerText).eql('xitong11');
		//删除用户管理
    await t.click(Selector('table > tbody > tr:nth-child(1)> td:nth-child(1) >div.cell>.el-checkbox>.el-checkbox__input>.el-checkbox__inner'))
           .click(Selector('.el-button').withAttribute('title', '删除'))
           .click(Selector('.el-button').withText('确定'))
        .expect(Selector('table > tbody > tr:nth-child(1) > td.el-table_5_column_17 > div').innerText).notEql('xitong11');
});

});

2、运行
直接运行 testcafe 浏览器 测试脚本
在使用过程中，无论测试脚本在项目中还是项目外均可以用testcafe path:浏览器地址 测试脚本地址 （如下）运行脚本

testcafe path:C:\Users\wanheat\AppData\Local\Google\Chrome\Application\chrome.exe E:\0124\alp
m-frontend12\test\basicinfo.js

想同时查看多个浏览器上的执行效果可执行

testcafe all 测试脚本

执行结果如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fWbCCkyj-1589348247938)(http://apidoc.what.com:4999/server/…/Public/Uploads/2020-05-12/5eba6bb1527b2.jpg)]