フロントエンドE 2 Eテスト略解

E 2 Eとは

E 2 E(End To End)すなわちエンドツーエンドテストは、ブラックボックステストに属し、テスト例を作成することによって、シミュレーションユーザー操作を自動化し、コンポーネント間の通信が正常であることを確保し、プログラムフローデータの伝達が予想通りである.

典型的なE 2 Eテストフレームワークの比較

名前
断言する
ブラウザ間でサポートするかどうか
インプリメンテーション
公式サイト
オープンソース
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の推荐のフレームワークで、コミュニティの活跃度はわりに高くて、机能は比较的に完备して、オープンソース、推荐の2つの选択(nightwatchはjdkを诘める必要があって、准备の仕事は多くて、しかしAP Iの豊富さはもっと高いです;cypressは自分の可視化のフォームがあって、运行の情报を记录することができて、bugの逸品を再现

nightwatch

1.インストール

npm i selenium-server nightwatch chromedriver -D

chromedriverのインストールは必要で、とても穴があいて、もし梯子がなければネット上で単独のパッケージを探して、それからプロファイルを変更します

2.構成

ルートディレクトリの新規作成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('[email protected]')
      .should('have.value', '[email protected]')
  })
})