持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第10天,点击查看活动详情
关于yields
为了保证端对端测试结果的准确性和一致性,Cypress中的命令是以异步的方式执行,也就是说,命令被使用后并不会立即执行,而是会维持一个队列,等待调度。而当命令真正执行时,前一个命令就会生成一个subject(比如DOM元素)来供下一个命令使用。而这个“生成”,在Cypress中就叫yields,而不是returns返回(按Cypress官网的说法,同步中的生成称为returns)
了解了yields subject,就会明白为什么Cypress中有些命令后面可以再连接其它命令,有些不可以;以及为什么有些命令不能直接使用了
DOM元素相关
查找DOM元素
| 命令 | 作用 | yields |
|---|
| cy.get() | 通过选择器获取元素,如 class | 获取到的 subject |
| cy.contains() | 通过内容获取元素,如文本 | 获取到的 subject |
| .find() | 通过选择器在指定元素的后代中查找元素 | 获取到的 subject |
| .within() | 在指定元素内部查找元素,如表单 | 获取到的 subject |
遍历DOM元素
| 命令 | 作用 | yields |
|---|
| .eq() | 通过索引从 DOM 元素列表中获取元素 | 获取到的 subject |
| .first() | 获取 DOM 元素列表中的第一个元素 | 获取到的 subject |
| .last() | 获取 DOM 元素列表中的最后一个元素 | 获取到的 subject |
| .children() | 获取子元素 | 获取到的 subject |
| .parent() | 获取父元素 | 获取到的 subject |
| .parents() | 获取所有父元素,包括爷爷等 | 获取到的 subject |
操作DOM元素
| 命令 | 作用 | yields |
|---|
| .click();.dblclick();.rightclick() | 单击;双击;右击 | 上一命令的subject |
| .type() | 向输入框输入文本元素 | 上一命令的 subject |
| .trigger() | 对 DOM 元素触发事件,如鼠标移入移出 | 上一命令的 subject |
| .submit() | 提交表单 | 上一命令的 subject |
| .focus() | 聚焦 DOM 元素 | 上一命令的 subject |
| .blur() | 使 DOM 元素失去焦点 | 上一命令的 subject |
| .check(); .uncheck() | 选中单选框、复选框;取消选中 | 上一命令的subject |
| .select() | 用于元素 | 上一命令的 subject |
| .scrollTo() | 将 DOM 元素滚动到指定位置 | 上一命令的 subject |
| .scrollIntoView() | 将 DOM 元素滚动到可视区域 | 上一命令的 subject |
引用DOM元素或网络请求资源
| 命令 | 作用 | yields |
|---|
| .as() | 为路由或 DOM 元素起别名,之后使用时在名称前加@ | 上一命令的subject |
用于连接命令
| 命令 | 作用 | yields |
|---|
| .its() | 获取当前 subject 的属性值 | 属性值 |
| .invoke() | 调用方法来操作当前 subject,比如 jQuery 中的效果 | 取决于调用的方法 |
| .then() | 将上一条命令返回的结果注入到下一个命令中 | 新的 subject |
HTTP请求相关
处理网络请求
| 命令 | 作用 | yields |
|---|
| cy.request() | 发起 HTTP 请求 | 对象字面量形式的 response |
| cy.intercept() | 监听、存根和修改 request 和 response | null |
等待
| 命令 | 作用 | yields |
|---|
| cy.wait() | 强制等待数毫秒或别名资源解析完成,再继续执行下一个命令 | 等待的时间时,生成上一命令的 subject;等待的是别名资源时,生成的是一个包含 request 和 response 的对象 |
获取URL
| 命令 | 作用 | yields |
|---|
| cy.url() | 获取当前页面的url | 字符串 |
| cy.hash() | 获取当前页面的url哈希值 | 字符串 |
| cy.location() | 获取当前页面的window.location对象 | window.location对象 |
浏览器相关
访问浏览器页面
| 命令 | 作用 | yields |
|---|
| cy.visit() | 访问指定的url | window 对象 |
| cy.go() | 前进或后退页面 | window 对象 |
| cy.reload() | 刷新页面 | window 对象 |
管理浏览器存储
| 命令 | 作用 | yields |
|---|
| cy.getCookie() | 获取指定名称的cookie | cookie对象 |
| cy.getCookies() | 获取所有cookie | cookie对象组成的数组 |
| cy.setCookie() | 设置一个cookie | cookie对象 |
| cy.clearCookie() | 清除指定名称的cookie | null |
| cy.clearCookies() | 清除所有cookie | null |
| cy.clearLocalStorage() | 清除当前域名和子域名的所有localStorage | null |
Windows相关
| 命令 | 作用 | yields |
|---|
| cy.viewport() | 设置屏幕的大小和方向 | null |
| cy.window() | 获取当前页面的 window 对象 | window 对象 |
| cy.document() | 获取当前页面的 windowd.document对象 | windowd.document对象 |
| cy.title() | 获取当前页面的title | 字符串 |
断言
| 命令 | 作用 | yields |
|---|
| .should() | 断言当前 subject | 取决于断言的内容 |
| .and() | 断言当前 subject,并连接多个断言 | 取决于断言的内容 |
操作文件
| 命令 | 作用 | yields |
|---|
| cy.fixture() | 从fixtures中加载数据 | 文件内容,格式取决于文件扩展名 |
| cy.readFile() | 读取文件 | 文件内容,格式取决于文件扩展名 |
| cy.writeFile() | 向文件写入数据 | null |
其它
| 命令 | 作用 | yields |
|---|
| cy.exec() | 执行系统命令 | 对象 |
| cy.screenshot() | 截图屏幕快照 | 上一命令的subject |
| cy.wrap() | 返回一个传递给它的对象,若是Promise则返回resolved后的值 | 传递进来的对象 |