Cypress系列(22)- 可操作类型的命令 之 select()
如果想从头学起Cypress,可以看下面的系列文章哦
https://www.cnblogs.com/poloyy/category/1768839.html
.select()
在 <select> 中选择一个 <option>
语法格式
// 选中指定值的选项
.select(value) // 选中指定值的多个选项
.select(values) // 选中指定值的选项,且带参数
.select(value, options) // 选中指定值的多个选项,且带参数
.select(values, options)
参数讲解
正确用法
// 选择 值=user的 option
cy.get('select').select('user')
错误用法
// 不能直接通过 cy 调用
cy.select('John Adams') // location 并不是 select 元素
cy.location().select()
前端 html 代码
后面的多个 .select() 栗子都以这个 html 页面为基础哦
.select(value) 的栗子
测试文件代码
重点
.select() 可以传 value 属性(“1”),或者文本内容(“oranges”)
.select(values) 的栗子
测试文件代码
- 后面再讲 .invoke()
- 需要注意,如果要选多个 option 的话, <select> 必须这样写 <select multiple>
.select(value, options) 的栗子
测试文件代码
重点
因为第二个 <select> 默认是不可见状态,所以不加 {force:true} 会报错,如下图
- 它的错误提示也很明显指明了解决方案
- use {force : true} to disable error checking【通过 { force : true } 来禁止错误检查】
再来看看元素不可见时,命令会提示啥
- this element is not visible
- 简直不要太人性化好吧
.select(values, options) 的栗子
测试文件代码
特殊场景
html 代码
<select disabled>
<option value="sz">深圳</option>
<option value="gz">广州</option>
</select>
重点是 select 加了 disabled
测试代码
cy.get("select").eq(2).select("sz", {force: true})
测试结果
即使加了 {force : true} ,也不会禁止检查 <select> 是否可以选择 option,如果加了disabled,代表不可选择,所以仍然报错
结尾
本文是博主基于对蔡超老师的《Cypress 从入门到精通》阅读理解完后输出的博文,并附上了自己的理解
对书籍感兴趣的,大家可以参考本篇博客:https://www.cnblogs.com/poloyy/p/13052972.html,考虑自身需求进行购买
我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=12vd92hxgwgj1
Cypress系列(22)- 可操作类型的命令 之 select()的更多相关文章
- Cypress系列(18)- 可操作类型的命令 之 点击命令
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 啥是可操作类型?就是可以和 DOM ...
- Cypress系列(69)- route() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 管理控制整个网络请求 重要注意事项 ...
- Cypress系列(70)- server() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 启动服务器以开始将响应路由到 cy ...
- Cypress系列(101)- intercept() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 使用该命令在网络层管理 HTTP ...
- Cypress系列(53)- as() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 起别名以供以后使用 可在 cy.g ...
- Cypress系列(68)- request() 命令详解
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 作用 发起一个 HTTP 请求 语法格式 ...
- Cypress系列(2)- Cypress 框架的详细介绍
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html Cypress 简介 基于 JavaSc ...
- Cypress系列(63)- 使用 Custom Commands
如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html Custom Commands 自定义命 ...
- 【Xamarin挖墙脚系列:mac 终端 常用命令+Mac OS X的快捷键+beamoff 】
原文:[Xamarin挖墙脚系列:mac 终端 常用命令+Mac OS X的快捷键+beamoff ] 基本命令 1.列出文件 ls 参数 目录名 例: 看看驱动目录下有什么:ls /S ...
随机推荐
- js 文本框只能输入数字和点
http://www.jb51.net/article/51102.htm 手机端 只能输入数字,能输小数点.且只能2位小数 oninput="this.value=this.value.r ...
- POJ-2488 国际象棋马的走法 (深度优先搜索和回溯)
#include <stdio.h> #define MAX 27 void dfs(int i, int j); int dx[8] = {-1, 1, -2, 2, -2, 2, -1 ...
- BZOJ1017 树形DP
1017: [JSOI2008]魔兽地图DotR Time Limit: 30 Sec Memory Limit: 162 MBSubmit: 2308 Solved: 919[Submit][S ...
- dede搜索页做法
触发搜索页代码 <p class="fl"> <span>热门搜索:</span> {dede:hotwords num=8 subday=36 ...
- APP定位元素之UiSelector
1.UiSelector 类介绍 功能:通过各种属性与节点关系定位组件 操作步骤:找到对象->操作对象 2.四中匹配关系的介绍 (1)完全匹配 (2)包含匹配 (3)正则匹配 (4)起始匹 例子 ...
- jupyter 文件夹重命名
jupyter 文件夹 如何重命名嘞?可能很多童鞋没找到吧,哈哈哈 我们先创建一个文件夹,如何创建嘞,往下看. 然后我们就可以看到, 如何重命名呐,注意注意了啊,选中你创建的文件夹,单击Rename. ...
- vue使用IntersectionObserver实现无限下拉信息流
基于 IntersectionObserver 异步监听方法,实现无线信息流下拉加载, https://developer.mozilla.org/zh-CN/docs/Web/API/Interse ...
- [SD喜爱语言PK大赛]001.PHP vs Node.js
引言:近日,两大编程飓风之战已经愈演愈烈.在程序员社区,一些争端因PHP与Node.js而起. 观点:其实就本人及团队而言,Language just a language!不存在高低之分,而侧重的原 ...
- Django ListView DetailView等基于类的视图如何添加装饰器?
场景: Django开发中,如果我们使用了类视图,如:ListView.DetailView.UpdateView等,这时我们又想要对这个视图添加一个装饰器,来实现某种功能,这时候该怎么处理呢? 环境 ...
- angularjs 指令传参规则
angularjs 指令传参规则 xx-,data- 驼峰