We often only show UI elements as a result of some user interaction. Cypress detects visibility and by default won’t allow your test to interact with an element that isn’t visible. In this lesson, we’ll work with a button that is shown on hover and see how you can either bypass the visibility restriction or use Cypress to update the state of your application, making items visible prior to interacting with them.

For example the delete icon was hidden by default, only show up when you hover over it, to test those hidden element. we need to call:

.invoke('show')
    it('should Delete an item', function () {
cy.server();
cy.route({
method: 'DELETE',
url: '/api/todos/*',
response: {}
}).as('delete'); cy.seedAndVisit(); cy.get('.todo-list li')
.first()
.find('.destroy')
.invoke('show') // Make the hidden button appear
.click(); cy.wait('@delete'); cy.get('.todo-list li')
.should('have.length', 3);
});

[Cypress] Interact with Hidden Elements in a Cypress Test的更多相关文章

  1. [Cypress] Test Variations of a Feature in Cypress with a data-driven Test

    Many applications have features that can be used with slight variations. Instead of maintaining mult ...

  2. [Cypress] Wait for XHR Responses in a Cypress Test

    When testing interactions that require asynchronous calls, we’ll need to wait on responses to make s ...

  3. [Cypress] Load Data from Test Fixtures in Cypress

    When creating integration tests with Cypress, we’ll often want to stub network requests that respond ...

  4. [Cypress] Test React’s Controlled Input with Cypress Selector Playground

    React based applications often use controlled inputs, meaning the input event leads to the applicati ...

  5. [Cypress] Use the Most Robust Selector for Cypress Tests

    Which selectors your choose for your tests matter, a lot. In this lesson, we'll see the recommended ...

  6. Cypress系列(0)- 如何学习 Cypress

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 Cypress 未来很有可能会火的 ...

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

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

  8. 【cypress】2. 安装Cypress(windows系统),以及cypress open报错解决。

    安装cypress. 一.操作系统 先确认下你的系统,是否在cypress支持范围之内: macOS 10.9 以上 (仅64-bit) Linux Ubuntu 12.04及以上版本,Fedora ...

  9. [HTML5] How Visible vs. Hidden Elements Affect Keyboard/Screen Reader Users (ARIA)

    There are many techniques for hiding content in user interfaces, and not all are created equal! Lear ...

随机推荐

  1. vagrant使用centos的环境安装..

    vagrant这货挺好用的..简要就是, 下好virtualbox, vagrant, 然后下个你需要的box. 然后vagrant box add boxname boxpath就行. 然后在合适的 ...

  2. UNIX环境高级编程--9. 进程控制

    进程关系    当子进程终止时,父进程得到通知并能取得子进程的退出状态. 终端登录:    早起UNIX系统通过哑终端登录,本地的终端 or 远程的终端 .主机上链接的终端设备是固定的,所以同时登录数 ...

  3. 实现一个类似于收趣APP的功能

    近日想做一个类似于收趣APP软件的一个功能,将头条.微信等其他App的文章能够通过分享微信好友的方式分享到自己的平台软件中. 分享的方式有三种: 1.通过微信好友的方式,将文章分享给收趣. 2.复制文 ...

  4. Spring Boot (25) RabbitMQ消息队列

    MQ全程(Message Queue)又名消息队列,是一种异步通讯的中间件.可以理解为邮局,发送者将消息投递到邮局,然后邮局帮我们发送给具体的接收者,具体发送过程和时间与我们无关,常见的MQ又kafk ...

  5. Python随笔-快排

    def swap(arr, i, j): temp = arr[i] arr[i] = arr[j] arr[j] = temp def part(arr, beg, end): : return b ...

  6. Java_Web三大框架之Hibernate+jsp+selvect+HQL注册用户

    Hibernate比SQL语句简单多了,代码冗余少,切方便简洁明了.下面用Hibernate+jsp+selvect+HQL来实现注册用户. 第一步:编写用户实体类和Users2.hbm.xml映射. ...

  7. NBXplorer的配置

    首先,必须安装bitcoin core bitcoin core启动时,会提示你定义数据存放目录,在数据存放目录下,找到bitcoin.conf文件,并填写内容: server=1rpcuser=rp ...

  8. CAD把实体放到当前选择集中

    主要用到函数说明: _DMxDrawX::AddCurrentSelect 把实体放到当前选择集中,详细说明如下: 参数 说明 LONGLONG lId 实体id VARIANT_BOOL isSho ...

  9. js 输入框只能输入 1-7 的数字

    $jq(function () { $jq("#XSCM_WORKDAY").keyup(function () { //如果输入非数字,则替换为'',如果输入数字,则在每4位之后 ...

  10. Bullet:Python的函数中参数是引用吗?

    别的语言中关于函数有传值和传引用的区分. 关于此,流传很广的一个说法是 他们在现象的区别之一就是值传递后的变化,受到影响的就是引用,未受到影响的就是传值.   在学习中,也曾碰到过这个问题,网上关于这 ...