前面 2 篇我们知道了如何安装、进行页面元素交互,现在我们开始编写一个测试用例
Cypress 提供了基于 Mocha 的语法,基本功能模块
describe() 声明一个测试用例集,可包含多个 it()测试用例,也可以在嵌套测试套件 context()
it() 声明一个测试用例,一个测试用例集至少有一个测试用例
before() 在一个测试用例集中,只执行一次,在所有测试用例之前执行
beforeEach() 在一个测试用例集中,每个测试用例前执行一次
afterEach() 在一个测试用例集中,每个测试用例后执行一次
after() 在一个测试用例集中,只执行一次,在所有测试用例之后执行
上述 4 个方法有没有很熟悉的感觉?
在方法名后面加 .skip() 可以跳过该方法,如 it.skip()
在方法名后面加 .only() 可以只执行该方法,如 it.only()
下面我们以登录为例,编写一个测试用例
这里我们发现如果每个测试用例都要去写跳转全路径的话,很麻烦,我们能不能把 URL 中公共的部分提取出来呢?
答案是可以的
我们打开图中所示文件
我们在此可以配置全局 baseUrl,此设置对 cy.visit()和 cy.request() 都生效。
修改后的样子
当我们做自动化的时候,会考虑只登录一次,去执行多个测试用例,那么在 Cypress 中如何做呢?
我要用到 cypress 的 Custom commands 模式来对登录进行封装
在 support 目录下的 commands.js 中增加一个自定义方法
这样我们就可以在测试用例集中,通过 cy.方法名 来调用它。
上面的操作是不是也很熟悉?
Cypress 还可以通过调用接口的方式,允许绕过 UI 层
多个测试用例共享 cookie 的问题
Cypress 在执行每个测试用例的时候会清空 cookies。这样的话我们只登录一次,执行多个测试用例的愿望就落空了!,这怎么办呢?
同学们不要慌!哈,Cypress 给出了几个解决方案。这里我们用其中一种方法来解决它。非常的简单!
我们在 support 目录下找到 index.js 文件,打开它,配置我们的白名单~
完成后我们就搞定啦。
到此我们之前的例子的测试数据都是在测试用例集里定义的常量。那么我们是不是可以参数化呢?
对此 Cypress 提供了一个 fixtures 的目录,在该目录下新建一个 JSON 文件即可共享数据。
我们通过 cy.fixture()引用数据,参数为 JSON 文件名。
断言
Cypress 推荐使用 .should()
should('have.class', 'success') 断言元素的 class 属性值是 'success'
should('have.text', 'Column content') 断言元素文本值 'Column content'
should('contain', 'Column content') 断言元素文本包含 'Column content'
should('have.html', 'Column content') 断言元素 HTML 文本'Column content'
should('match', 'td') chai-jquery 使用 "is()"检查元素是否与选择器匹配
对同一个元素多个断言
``` cy.get('.assertions-link') .should('have.class', 'active') .and('have.attr', 'href') .and('include', 'cypress.io') ```
最后我们写测试用例的时候会遇到上传文件,那么 Cypress 如何上传文件呢?
第一步 安装插件
``` npm install --save-dev cypress-file-upload ```
第二步,我们在在 cypress/support/commands.js 中导入
第三步把要上传的文件放入 cypress/fixtures 目录下
测试用例中引用的示例