如果想从头学起Cypress,可以看下面的系列文章哦

https://www.cnblogs.com/poloyy/category/1768839.html

前言

  • 啥是可操作类型?就是可以和 DOM 元素交互的命令,比如:点击,双击.....等等等
  • 这些命令模拟用户和应用程序交互,Cypress 会触发浏览器事件,进而触发应用程序绑定的时间

这一篇着重讲点击操作,一共有三个命令

  1. click:单击
  2. dbclick:双击
  3. rightclick:右键

.click() 的语法和用法

单击某个元素

六种基础语法格式

// 单击某个元素
.click() // 带参数的单击
.click(options) // 在某个位置点击
.click(position) // 在某个位置点击,且带参数
.click(position, options) // 根据页面坐标点击
.click(x, y) // 根据页面坐标点击,且带参数
.click(x, y, options)

正确用法

宗旨:先获取 DOM 元素,再对 DOM 元素操作

错误用法

position 位置参数

每个元素都有九个 position,具体可看下图

坐标 x, y

距离 DOM 元素左上角的坐标,x 是横轴,y 是竖轴

options 可选参数

共有四个

如何传 options ?

  • .click({ multiple: true })
  • .click({ multiple: true , force: true})

force: true 的作用

背景

  • Cypress 可以通过 Test Runner 的快照找到阻止 DOM 元素交互的情况,但某些情况下可能会阻碍测试的进行
  • 比如:有一个嵌套的导航结构,用户必须将鼠标 hover 在一个非常特定的模式中,才能拿到所需的链接
  • 当测试时,其实我们只是想获取链接而已,前面过多的繁琐操作可能会导致测试失败

作用

  • 当设置了 force: true 时,Cypress 会强制操作命令的发生,避开前面的所有检查
  • 你可以传递 { force: true } 给大多数操作命令

栗子

// 强制点击,和所有后续事件
// 即使该元素 “不可操作”,也会触发点击操作
cy.get('button').click({ force: true })

当使用 force 时,将执行这些操作

  • 继续执行所有默认操作
  • 强制在元素上触发事件

当使用 force 时,将不会执行这些操作

  • 滚动到视图中
  • 确保可见
  • 确保未禁用
  • 确保没有分离
  • 确保它不是只读的
  • 确保它没有动画
  • 确保未覆盖
  • 向后代触发事件

总结

总而言之, { force: true } 跳过检查,它将始终在所需元素处触发事件

.click() 具体的栗子

.click() 的栗子

测试文件代码

测试结果

.click(position)

测试文件代码

测试结果

.click(x, y)

测试文件代码

测试结果

{force: true} 的栗子

.click(options)

.click(position, options)

.click(x, y, options)

{multiple : true } 的栗子

测试文件代码

测试结果

cy.get(' ul > li ') 共匹配四个 DOM 元素,他们均触发单击操作

单击组合键

.click() 命令还可以与 .type() 命令结合使用修饰符来触发组合键操作,以便在单击时结合键盘操作,例如ALT + click

以下修饰符可以和 .click() 结合使用

修饰符 作用 别名
{alt}
等价于 alt 键 {option}
{ctrl} 等价于 ctrl 键 {control}
{shift} 等价于 shift 键  

栗子

.dblclick()

双击,跟 click() 的语法 & 用法一致,只是变成了双击

cy.get("#main1").dblclick()
cy.get("#main1").dblclick("top")
cy.get("#main1").dblclick(15, 15)

.rightclick()

右键,跟 click() 的语法 & 用法一致,只是变成了右键点击

cy.get("#li1").rightclick()
cy.get("#li1").rightclick("top")
cy.get("#li1").rightclick(15, 15)

.click() 注意事项

可操作性

执行 .click()  必须是 DOM 元素达到了可操作状态

关于断言

.click() 将自动等待元素达到可操作状态。

.click() 将自动等待后面链接的断言通过

超时时间

.click() 如果 DOM 元素一直达不到可操作状态,可能会超时

.click() 如果后面链接的断言一直不通过,可能会超时

.click() 会触发的鼠标事件

在命令日志中单击 click 时,控制台console 将输出以下鼠标事件

结尾

本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文,并附上了自己的理解

对书籍感兴趣的,大家可以参考本篇博客:https://www.cnblogs.com/poloyy/p/13052972.html,考虑自身需求进行购买

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1

Cypress系列(18)- 可操作类型的命令 之 点击命令的更多相关文章

  1. Cypress系列(69)- route() 命令详解

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 管理控制整个网络请求 重要注意事项 ...

  2. Cypress系列(70)- server() 命令详解

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 启动服务器以开始将响应路由到 cy ...

  3. 5 个在 Linux 中管理文件类型和系统时间的有用命令

    对于想学习 Linux 的初学者来说要适应使用命令行或者终端可能非常困难.由于终端比图形用户界面程序更能帮助用户控制 Linux 系统,我们必须习惯在终端中运行命令.因此为了有效记忆 Linux 不同 ...

  4. Cypress系列(2)- Cypress 框架的详细介绍

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html Cypress 简介 基于 JavaSc ...

  5. Cypress系列(63)- 使用 Custom Commands

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html Custom Commands 自定义命 ...

  6. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  7. mybatis入门系列三之类型转换器

    mybatis入门系列三之类型转换器 类型转换器介绍 mybatis作为一个ORM框架,要求java中的对象与数据库中的表记录应该对应 因此java类名-数据库表名,java类属性名-数据库表字段名, ...

  8. Cypress系列(1)- Window下安装 Cypress 并打开

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 系统要求 Cypress 是一个被安装在 ...

  9. Cypress系列(13)- 详细介绍 Cypress Test Runner

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 Test Runner 也叫运行器 ...

随机推荐

  1. 万字长文!一次性弄懂 Nginx 处理 HTTP 请求的 11 个阶段

    Nginx 处理一个 HTTP 请求的全过程 前面给大家讲了 Nginx 是如何处理 HTTP请求头部的,接下来就到了真正处理 HTTP 请求的阶段了.先看下面这张图,这张图是 Nginx 处理 HT ...

  2. 常用的code snipper

    Xcode 10.2.1 版本,自动代码提示功能延迟很大,很多情况下代码提示甚至会无效,但是code snippet 唤起的响应很快,从提高效率的情况考虑,即使系统提供的代码提示制作成code sni ...

  3. HDU1588

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1588 题目大意:g(i)= k * i + b. 给定 k 和 b,求0 <= i < n ...

  4. 查找最大元素(hdu2025)

    输入方式:直接循环输入不带空格的未知长度的字符串. 思考:直接循环输入未知长度的字符串,用while(gets_s()),循环内外不用getchar().(注意,每次字符串都是以整体输入) #incl ...

  5. 要小心 JavaScript 的事件代理

    我们知道,如果给 form 里面的 button 元素绑定事件,需要考虑它是否会触发 form 的 submit 行为.除此之外,其它场合给 button 元素绑定事件,你几乎不用担心这个事件会有什么 ...

  6. shell判断语句

    1.test命令  也可以用[  ]来表示 返回值为0时为true,返回值为1时为false. 例1:str1=aaa,str2=bbb 1)判断字符串是否为空(省略了-n选项,-n选项是不为空,-z ...

  7. 安装superset遇到的坑

    实验环境:ubuntu16.04 python环境: 3.6.7 安装参考:https://superset.incubator.apache.org/installation.html 特别提醒: ...

  8. [wordpress使用]001_环境安装

    Wordpress强大的可扩展性和易用性等功能,使得越来越多的人选择它来建立自己的博客和网站.那么新手朋友该如何入手呢,今天制作这个教程就是旨在帮助新手朋友快速入门,从而为今后WP建站打下坚实的基础. ...

  9. html5学习之路_002

    html块 html块元素 块元素在显示时,通常会以新行开始 如:<h1>.<p>.<ul> html内联元素 内联元素头通常不会以新行开始 如:<b> ...

  10. Linux下db2V10.5命令行安装超详细图文教程(附下载地址)

    下载地址:https://pan.baidu.com/s/1GtF03x1FMF3IsGdSiBJu-g 提取码:8vfj 失效了发邮件:wells974@163.com 一.db2prereqche ...