Cypress web自動化19-自定義命令，把登陸當公共方法commands.js

前言

測試一個web網站的時候，通常需要先登錄。要是每個腳本都寫一次登錄流程，太麻煩了，於是我們會想到寫一個公共函數，這樣每次去調用函數即可。
cypress 里面提供了一個 commands.js 可以自定義命令，如使用cy.login(user,password)就能調用了

登錄

前面寫了一個登陸的案例,參考https://www.cnblogs.com/yoyoketang/p/12873091.html

// # 上海-悠悠，QQ交流群：750815713

describe('登陸web網站案例', function() {
    beforeEach(() => {
          cy.visit('http://ip:8080/zentao/user-login.html')
        })

    it("登陸案例", function()
    {
        // 輸入用戶名
        cy.get('#account').type('admin')
              .should('have.value', 'admin')
        // 輸入密碼
        cy.get('[name="password"]').type('***123456')
              .should('have.value', '***123456')
        // 提交表單
        cy.get('#submit').click()
        // 判斷頁面跳轉到 /zentao/my/
        cy.url().should('include', '/zentao/my/')
        // and '歡迎您：admin' in page
        cy.get('body').should('contain', '我的地盤')
        // 判斷存在cookie值 'zentaosid'
        cy.getCookie('zentaosid').should('exist')
    })
    })

自定義命令

在cypress/support/commands.js 自定義一個login的命令，方便用例調用

// # 上海-悠悠，QQ交流群：750815713

Cypress.Commands.add('login', (name, password) => {
    cy.visit('http://ip:8080/zentao/user-login.html')
    // 輸入用戶名
    cy.get('#account').type(name)
          .should('have.value', name)
    // 輸入密碼
    cy.get('[name="password"]').type(password)
          .should('have.value', password)
    // 提交表單
    cy.get('#submit').click()
    // 判斷頁面跳轉到 /zentao/my/
    cy.url().should('include', '/zentao/my/')
    // and '歡迎您：admin' in page
    cy.get('body').should('contain', '我的地盤')
    // 判斷存在cookie值 'zentaosid'
    cy.getCookie('zentaosid').should('exist')
})

接下來寫個登錄后，訪問首頁的案例，看是否調用成功

// # 上海-悠悠，QQ交流群：750815713

describe('登錄后-訪問首頁', function() {
    beforeEach(() => {
          cy.login("admin", "****123456")

        })


    it("訪問首頁", () =>
        {
            cy.visit("http://ip:8080/zentao/my/")
            cy.url().should('include', '/zentao/my/')
            cy.title().should('contain', '我的地盤 - 禪道')
        })

    it("訪問后台管理", () =>
        {
            cy.visit("http://ip:8080/zentao/admin/")
            cy.url().should('include', '/zentao/admin/')
            cy.title().should('contain', '后台管理 - 禪道')
        })

    })

運行結果

beforeEach() 會每個用例都會運行一次，這樣會有個弊端，所以使用before()

多個用例記住cookies

Cypress會在每個test運行前自動的清掉所有的cookie。可以用 preserveOnce() 來在多個test之間保留cookie，這在有登錄要求的自動化測試方面很方便。

Cypress.Cookies.preserveOnce('key name1', 'key name2')

// # 上海-悠悠，QQ交流群：750815713

describe('登錄后-訪問首頁', function() {
    before(() => {
          cy.login("admin", "****123456")

        })

    beforeEach(function () {
        // before each test, we can automatically preserve the
        // 'zentaosid' and 'csrftoken' cookies. this means they
        // will not be cleared before the NEXT test starts.
        Cypress.Cookies.preserveOnce('zentaosid', 'csrftoken')
      })
    it("訪問首頁", () =>
        {
            cy.visit("http://ip:8080/zentao/my/")
            cy.url().should('include', '/zentao/my/')
            cy.title().should('contain', '我的地盤 - 禪道')
        })

    it("訪問后台管理", () =>
        {
            cy.visit("http://ip:8080/zentao/admin/")
            cy.url().should('include', '/zentao/admin/')
            cy.title().should('contain', '后台管理 - 禪道')
        })

    })

再次運行就會發現第二個用例不會重復執行登錄內容了

request 登錄

cypress 不同於 selenium，登錄還可以有一種更優雅的方式，發 request 請求實現，參考這篇https://www.cnblogs.com/yoyoketang/p/13045333.html

QQ交流群：939110556