Cypress web自动化19-自定义命令，把登陆当公共方法commands.js

Posted 2021-02-18 上海-悠悠

前言

测试一个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