2021-07-25

最新推荐文章于 2022-02-10 11:39:17 发布

BugRL

最新推荐文章于 2022-02-10 11:39:17 发布

阅读量224

点赞数

分类专栏：测试

本文链接：https://blog.csdn.net/rao826699158/article/details/119089742

版权

测试专栏收录该内容

7 篇文章 0 订阅

订阅专栏

UI 自动化测试

自动化针对类型

C/S 客户端
WEB UI
API

WEB UI 技术解析

对象识别
- DOM 解析
- 定位对象
技术
- html
- css
- js

安装

安装 node

安装 npm

查看 npm 的 registry

npm config get registry

修改源

npm config set registry https://registry.npmjs.org

安装 cypress

npm init

配置镜像

npm config set registry https://registry.npm.taobao.org

安装框架

npm install cypress --save-dev

npx cypress open

linux 环境下运行 cypress

npx cypress run --headless

cypress 自动生成的目录结构

fixtures

用于存放数据的 json 文件放在此目录下，开箱即用。

intergration

用于存放测试用例，方便规范用例的编写和保存。

测试用例编写格式

login(username="admin", password="admin", checkApi = false) {
    // 校验调用接口
    cy
        .intercept("POST", "http://flash-admin.enilu.cn/prod-api/account/login")
        .as("loginRequest")

    this.visit()
    this.getUsernameElement().type(username)
    this.getPasswordElement().type(password)
    this.getSubmitElement().click()
    if (checkApi) {
        cy
            .wait("@loginRequest")
            .should(({request, response}) => {
                // 校验请求体信息
                expect(request.body).eq("username=admin&password=admin")
                // 校验响应信息
                expect(response.body.code).eq(20000)
                expect(response.body.msg).eq("成功")
                expect(response.body.data.token).not.be.empty
            })
    }

plugins

对于 cypress 的插件管理目录

support

对于 cypress 的支持拓展目录，commands.js 可以编写一些复用较多代码。

videos

用于存放测试的录频，方便检查测试用例运行时的实际情况。

查找元素

`contain("your string")` 通过文本定位元素

通过 UI 上的文本内容定位元素。例如 <span>提交</sapn>可以通过 cy.contains("提交") 定位到，然后对其进行下一步操作。

`get("your css selector")` 通过 css 选择器定位元素

调用 get 函数，传入 css 选择器语法定位元素。例如 <span>提交</sapn>可以通过 cy.get("span") 定位到，然后对其进行下一步操作。

操作元素

点击

click()

输入文字

type("your string")

操作浏览器

后退

cy.go("back")

断言

元素存在

should("exist")

元素不存在

should("not.exist")

元素文本内容一致

// 完全匹配原则
should("have.text","your target string")

网址是否一致

cy.url().should("eq","http://www.baidu.com")

网址是否包含指定内容

cy.url().should("include","baidu")

小技巧

使用 `data-*` 属性

在 UI 测试工作中，我们很多时间其实会消耗在定位元素中。使用 css 选择器或者文本是非常脆弱的，因为极易发生变更。如果前端能够在 html 中加入一些测试标识属性会帮助我们快速定位元素，极大的提高效率。

不要尝试在代码中定义变量

/// <refrence types="cypress"/>

decribe("测试套件描述",()=>{
    
    it("测试用例描述",()=>{
        cy.visit("http://www.baidu.com")
        // 这是十分垃圾的用法
        let inputElement = cy.get("#kw")
    })
    
})

cypress 的工作机制时异步执行的，所以不要在 it 函数的回调顶层直接定义变量。在 cypress 中你不能去定义一个变量，这是完全没有必要的。

更改视窗大小

// 指定视窗的大小
cy.viewport(1280, 720)

// 指定机型
cy.viewport('iphone-12')

使用 it.only 指定运行用例

当我们在编写用例的过程中我们有时候不需要跑所有的测试用例，我们就可以使用 it.only() 指定需要运行的用例。指定之后，我们运行测试文件的时候只会运行指定的用例。

打印日志

cy.log("your message")

// 在执行后调用返回值，并且打印
cy.url().then(value => {
    cy.log(`url: ${value}`)
})

存储 token 到本地

实际测试的时候其实并不需要频繁的登录，而是希望直接进入测试网站进行测试。我们可以使用 cypress 存储 token 避免频繁登录带来的不便。获取 token 的一种方式是去 window 对象的 localStorage 中去取，但是别忘记异步机制。

cy.then(()=>{
    window.localStorage.setItem("key","value ")
})

切换窗口

it("切换窗口", () => {
    cy
        .visit("http://...")

    cy
        .get("a")
        .invoke('removeAttr', 'target')
        .click()

    cy.url().should('include', '"http://...')
    cy.get('#sb_form_q').type(`python{enter}`)
})