前端E2E测试略解

超、凢脫俗 2022-05-19 11:53 307阅读 0赞

### 什么是E2E ###

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

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

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

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')
      })
    })