cypress舉行e2e測試之理論

2019年8月24日 240次阅读 来源: zsirfs

cypress 舉行 e2e 測試之理論

cypress 是現在 e2e 很火的一個測試組件，內部綁定了 macha、chai、chai-jquery 之類的斷言,為了讓代碼代碼
更有說服力，削減提交測試毛病，舉行 e2e 測試明顯黑白常有必要的。

官網 \

GitHub

自創官網一句話來講:

Cypress is a next generation front end testing tool built for the modern web. We address the key

pain points developers and QA engineers face when testing modern applications.

<!– more –>

本文環境

node v9.5\
npm v5.5

e2e 簡介

e2e 測試端對端測試的簡稱, e2e 即為end to end,
指恣意一個人的交際、生意業務、休閑都能夠直接與別的恣意一個人發生關聯，去中間化、渠道化.

cypress

cypress 環境搭建

做前端怎樣少的多的了 npm 呢

$ npm i -D cypress

然後為了輕易起見，我們在package.json中寫入下面劇本:

{
  "scripts": {
    "e2e:open": "cypress open",
    "e2e:run": "cypress run"
  }
}

《cypress舉行e2e測試之理論》

運轉npm run e2e:open,啟動一個 cypress 的服務器，以下:
《cypress舉行e2e測試之理論》

以下圖這就完成了一個啟動一個 cypress。第一次點開時刻，cypress 會幫你建立一個初始化設置目次，這是
cypress 引薦的目次的構造，固然也能夠本身建立。

《cypress舉行e2e測試之理論》

點擊 example_spec.js 文件，然後能夠看到以下界面,cypress 最先測試:

《cypress舉行e2e測試之理論》

上面就看到 cypress 的運轉歷程了。下面看看 example_spec.js(文件的位置
:projectName/cypress/integration)文件中寫了啥:

describe('Kitchen Sink', function() {
  it('.should() - assert that <title> is correct', function() {
    // ...
  }
})

這是主要構造的，下面大部份都是在一個it函數內部，是測試內里的回調函數。細緻能夠檢察 TDD 和 BDD 測試
框架，cypress 綁定了這些測試框架。

cy.visit

這是 cypress 內里一個很主要的要領，能夠接見一個鏈接,列入 example.js 文件以下:

beforeEach(function() {
  // Visiting our app before each test removes any state build up from
  // previous tests. Visiting acts as if we closed a tab and opened a fresh one
  cy.visit('https://example.cypress.io/commands/querying')
})

這裏就是在前置鈎子函數內里接見了https://...../querying這個鏈接。假如代碼須要瀏覽器調試，比方用戶交
互點擊，用戶輸入之類的。第一步就是接見：cy.visit

cy.get

照樣從 example_spec.js 問中提及：

it('cy.get() - query DOM elements', function() {
  // https://on.cypress.io/get

  // Get DOM elements by id
  cy.get('#query-btn').should('contain', 'Button')

  // Get DOM elements by class
  cy.get('.query-btn').should('contain', 'Button')

  cy.get('#querying .well>button:first').should('contain', 'Button')
  //              ↲
  // Use CSS selectors just like jQuery
})

這裏定義了一個測試單位，在這個內里做了啥呢？第一步獵取 id 為 query-btn 這個按鈕。接下來 should 操縱
，送上一張表自行檢察: 《cypress舉行e2e測試之理論》

cy.get 另有一個弄法就是 cy.get(‘@app’)這類，意義說之前你已cy.get('.app').as('app'),不須要再次獲
取了，直接運用別號就好了

從官網截圖的表格，詳
細jquery-chai 文檔表格

這裏看到cy.get()和jquery.$是不是是很像，在官網這裏說了如許一句話:

The querying behavior of this command matches exactly how $(…) works in jQuery.

所以能夠將 cy.get()當$一樣來用即可，不過這裏返回的不過 jquery 對象罷了，這裏返回的事經由過程 cypress 包
裝過的對象能夠在控制台看到如許的東西,見下圖:
《cypress舉行e2e測試之理論》

是一個用於 cypress 一切要領的對象。然後能夠操縱他的 api 了。

第一部份，主如果查詢，查詢頁面元素是不是根據我們開闢想要的存在，下面看第二部份:

context('Actions', function() {
  beforeEach(function() {
    cy.visit('https://example.cypress.io/commands/actions')
  })

  // Let's perform some actions on DOM elements
  // https://on.cypress.io/interacting-with-elements

  it('.type() - type into a DOM element', function() {
    // https://on.cypress.io/type
    cy
      .get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')

      // .type() with special character sequences
      .type('{leftarrow}{rightarrow}{uparrow}{downarrow}')
      .type('{del}{selectall}{backspace}')

      // .type() with key modifiers
      .type('{alt}{option}') //these are equivalent
      .type('{ctrl}{control}') //these are equivalent
      .type('{meta}{command}{cmd}') //these are equivalent
      .type('{shift}')

      // Delay each keypress by 0.1 sec
      .type('slow.typing@email.com', { delay: 100 })
      .should('have.value', 'slow.typing@email.com')

    cy
      .get('.action-disabled')
      // Ignore error checking prior to type
      // like whether the input is visible or disabled
      .type('disabled error checking', { force: true })
      .should('have.value', 'disabled error checking')
  })
})

這一部份主如果舉行獵取元素交互, 下面來講交互是怎樣搞得。 與 cy.get 類似另有:

  • cy.contains 經由過程文本獵取元素
  • cy.closet 見 jqery
  • cy.next/cy.nextAll 能夠和 cy.contains 團結運用獵取該節點的下一個節點
  • cy.prev/cy.prevAll 同上
  • cy.children/cy.parents/cy.parent 獵取子節點/ 一切的父節點 / 父節點
  • cy.first/cy.last
  • cy.url 獵取當前頁面 url
  • cy.title 獵取當前頁面題目
  • … API 挺多的，一樣奉
    上api 文檔

cypress 交互邏輯

既然要交互一定須要點擊輸入轉動，能夠還存在拖拽等等。我們就臨時從輸入最先提及啦

cy.type

這不是一個能夠直接運用的要領，要合營cy.get運用的,作用是給空間舉行輸入。比方:

測試輸入比方 text, textarea

cy.get('input').type('hello world')

測試 tabIndex

  <div class="el" tabIndex="1">
    This is TabIndex div.
  </div>
cy.get('.el').type('laldkadaljdkljasf') // 這個內里是隨機字符串

測試 input 為日期的

cy.get('input[type=date]').type('2008-8-9')

鍵盤綁定

下面直接是對 input 舉行組合鍵盤操縱

cy.get('input').type('{shift}{alt}Q')

按住鍵盤操縱

cy.get('input').type('{alt}這裡是按了一下alt后輸入的內容')

另有長按鍵盤之類的操縱，細緻就看官網了這裏之類送上鏈
接https://docs.cypress.io/api/commands/type.html#Key-Combinations

這裏就是關於鍵盤的組合操縱。

關於挑選比方 radio, checkbox

這些就只須要應用點擊事宜即可，以下:

cy
  .get('input[type=radio]')
  .as('radio')
  .click()
cy.get('@radio').should('be.checked')

定時

cy.wait

下面是守候 1s

cy.wait(1000)

cy.clock 和 cy.tick

本身的代碼：

var seconds = 0
setInterval(() => {
  $('#seconds-elapsed').text(++seconds + ' seconds')
}, 1000)

測試代碼

cy.clock()
cy.visit('/index.html')
cy.tick(1000)
cy.get('#seconds-elapsed').should('have.text', '1 seconds')
cy.tick(1000)
cy.get('#seconds-elapsed').should('have.text', '2 seconds')

《cypress舉行e2e測試之理論》 這裏就會湧現關於 clock 和 tick
的用法，更多用法看文檔，我也有部份疑惑的。待厥後再處理。老例子文檔地點:
地點

關於 cypress 的設置

先複製一段出來:

{
  "baseUrl": "http://localhost:8080",
  "pageLoadTimeout": 3000,
  "viewportHeight": 667,
  "viewportWidth": 375
}

這是一個異常精簡的設置了:

  • baseUrl 基礎鏈接，以後在是運用 cy.visit 的時刻，只須要接見詳細路由比方: cy.visit(‘/Hello’)

  • viewport 兩個屬性

    • viewportHeight 測試窗口的高度
    • viewportWidth 測試窗口的寬度
  • pageLoadTimeout 頁面家安在凌駕 3000ms 即為超時。

總結

上面是 cypress 的基礎用法，cypress 是基於 electron 的一個測試框架，供應 web 環境舉行點對點的測試，在
programer 頭腦下，舉行自動化的交互操縱，必要點檢測申明，這是一個異常棒的用途。比方以後具有數據埋點，
能夠在牢固的位置檢測是不是有埋點。測試想要的處所是不是婚配的數據。模仿用戶的點擊操縱，這都黑白常棒的。在
jquery 操縱年代，種種 id 和 class 新鮮命名下，這些都能夠輕易找到，在 vue 和 react 大行其道的年代，但
是卻能夠經由過程文本尋覓節點。這也黑白常棒的體驗，更多隱秘須要去體驗，送上官方地點
：官網 cypress

    原文作者：zsirfs
    原文地址: https://segmentfault.com/a/1190000014630097
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞