Cypress 自動化測試學習使用

Cypress 自動化測試學習使用

---

安裝

mkdir cypress-start

npm install

# 進入建立的項目目錄
cd /your/project/path
cd cypress-start

npm install cypress --save-dev

yarn add

cd /your/project/path
cd cypress-start

yarn add cypress --dev

打開運行cpress

./node_modules/.bin/cypress open

或者使用npm bin

$(npm bin)/cypress open

或者使用npx

npx cypress open

或者使用yarn

yarn run cypress open

開始使用

1. 建立一個sample_spec.js文件.
2. 查看 Cypress 更新咱們的spec文件列表.
3. 登陸 Cypress 交互模式.

在 cypress/integration 目錄下建立一個新的文件

touch {your_project}/cypress/integration/sample_spec.js

一旦咱們建立了這個文件，Cypress測試引擎會立馬在Integration Tests列表中顯示出來。Cypress會監視你的spec文件，有任何的修改和更新都會立馬顯示出來。
即便咱們尚未寫任何的測試也沒有關係。點擊sample_spec.js，咱們會看到Cypress會自動打開瀏覽器並運行測試腳本。不過此時會看到
No tests found in your file:/usr/local/proj/cypress-start/cypress/integration/sample\_spec.js的提示。

編寫一個簡單的測試

1. 編寫第一個經過的測試.
2. 編寫第一個失敗的測試.
3. 關注 Cypress 實時加載.

在sample_spec.js文件中書寫以下代碼：

describe('My First Test', function() {
  it('Does not do much!', function() {
    expect(true).to.equal(true)
  })
})

當你保存文件以後會發現，瀏覽器自動從新加載了。立馬就會呈現出測試的結果。

儘管咱們沒有作一些實際的事情，可是這個測試是經過的。

接下來讓咱們來編寫第一個失敗的測試。

describe('My First Test', function() {
  it('Does not do much!', function() {
    expect(true).to.equal(false)
  })
})

一樣的，一旦咱們保存文件，瀏覽器立馬就會刷新並呈現出一個成功和一個失敗的測試結果。

從代碼語法中咱們能看出來

• describe和it來自Mocha
• expect來自Chai

這是Cypress所依賴庫的一部分。

寫一個實際的測試用例

一般測試都分三個階段:

1. 設置應用的狀態.
2. 作一些動做.
3. 斷言當前應用的狀態.

通俗來講就是咱們設置應用的一個初識狀態，而後咱們作一些操做來改變這個狀態值，而後再來判斷結果是否是跟咱們預期的同樣。

接下來咱們根據如下幾個步驟，經過Cypress來逐步實現：

1. 訪問一個網頁。
2. 查找網頁上的一個元素。
3. 對這個元素進行操做。
4. 斷言頁面的內容。

第 1 步: 訪問一個網頁

cy.visit() 的使用很簡單，咱們以訪問百度首頁爲例：

describe('My First Test', function() {
   it('Visits the baidu', function() {
   //   cy.visit('https://example.cypress.io')
     cy.visit('http://www.baidu.com')
   })
 })

保存文件以後打開Cypress Test Runner就會發現，瀏覽器裏會自動打開百度首頁。須要值得注意的是咱們的測試，最好是對咱們可控的網站進行測試。

第 2 步: 查詢頁面元素

使用contains來查找包含參數內容的元素：

describe('My First Test', function() {
    it('Visits the baidu', function() {
        cy.visit('http://www.baidu.com');
        cy.contains('百度一下');
    })
})

咱們會發現測試經過了。若是咱們把cy.contains('百度一下')修改成cy.contains('百度一下XXX')保存文件，就會發現等待一段時間以後提示測試失敗。

第 3 步: 點擊一個元素

咱們在第二步已經獲取到了一個元素，只須要在該元素上進行點擊操做便可：

describe('My First Test', function() {
    it('Visits the baidu', function() {
        cy.visit('http://www.baidu.com');
        cy.contains('百度一下').click();
    })
})

因爲百度首頁的百度一下按鈕在輸入框沒有輸入任何值得時候點擊，頁面只是會從新加載一下，沒有其餘的改變，因此不太好進行斷言。因此咱們但願在輸入框中輸入一些內容，而後再點擊按鈕，最後再進行斷言。

第 4 步: 進行斷言

因爲百度首頁的百度一下按鈕在輸入框沒有輸入任何值得時候點擊，頁面只是會從新加載一下，沒有其餘的改變，因此不太好進行斷言。因此咱們但願在輸入框中輸入一些內容，而後再點擊按鈕，最後再進行斷言。

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

另外能夠對輸入框單獨的進行斷言。經過調用type方法來對獲取到的輸入框進行值的填充。

describe('My First Test', function() {
    it('Visits the baidu', function() {
        cy.visit('http://www.baidu.com');
        cy.get('#kw')
            .type('cypress')
            .should('have.value', 'cypress');
    })
})

以上就是一個簡單的測試用例。

我的認爲Cypress比較好的地方在於可調試性很是之好。Time travel、Snapshots、Page events、Console output這些都可以在Cypress 打開的瀏覽器左側看到。以上只是一些簡單的使用。須要進行深刻了解的話查閱官方文檔