[Cypress] Create Aliases for DOM Elements in Cypress Tests
We’ll often need to access the same DOM elements multiple times in one test. Your first instinct might be to use cy.get
and assign the result to a variable for reuse. This might appear to work fine at first, but can lead to trouble. Everything in Cypress is done asynchronously and you’re interacting with an application’s DOM, which is changing as your tests interact with it. In this lesson, we’ll see how we can reference DOM elements in multiple places with the alias feature in Cypress.
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);
});
The code above, we have use 'cy.get('.todo-list li')' in two places.
We can use alias for DOM element as well to reduce duplication:
it('Using alias for the DOM element', function () {
cy.server();
cy.route({
method: 'DELETE',
url: '/api/todos/*',
response: {}
}).as('delete'); cy.seedAndVisit(); cy.get('.todo-list li')
.as('list'); // alias the DOM element cy.get('@list')
.first()
.find('.destroy')
.invoke('show')
.click(); cy.wait('@delete'); cy.get('@list')
.should('have.length', 3);
});
[Cypress] Create Aliases for DOM Elements in Cypress Tests的更多相关文章
- [Cypress] Create a Single Custom Cypress Command from Multiple Commands
Cypress provides a straightforward API that allows you to define custom commands. In this lesson, we ...
- [D3] Create DOM Elements with D3 v4
Change is good, but creating from scratch is even better. This lesson shows you how to create DOM el ...
- Adding DOM elements to document
1.JavaScript 添加DOM Element 执行效率比较: 抄自:http://wildbit.com/blog/2006/11/21/javascript-optimization-add ...
- [D3] Select DOM Elements with D3 v4
Before you can create dazzling data driven documents, you need to know how D3 accesses the DOM. This ...
- [D3] Modify DOM Elements with D3 v4
Once you can get hold of DOM elements you’re ready to start changing them. Whether it’s changing col ...
- ReactDOM & DOM Elements
一.ReactDOM 1.1 render() ReactDOM.render(element,container,[callback]) 在container中渲染一个React元素,然后返回组件一 ...
- [Cypress] Create True end-to-end Tests with Cypress (Smoke test)
Integration tests let us keep our tests fast and reliable. They also allow us to test scenarios that ...
- [Javascript] Create scrollable DOM elements with Greensock
In this lesson, we will look at Greensock's Draggable API. We will implement a scrollable <div> ...
- [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 ...
随机推荐
- jdk1.8 api 下载
链接: https://pan.baidu.com/s/1Wmf2vzXxclVcBPUfPp_g_A 提取码: dpwu 希望那些CSDN的不要借此収积分,行行好吧你,小众程序员就是为了方便 凑字数 ...
- [转]Linux 正则表达式详解
转自:http://www.jb51.net/article/42989.htm 一.linux文本查找命令 在说linux正规表达式之前,还介绍下linux中查找文本文件常用的三个命令: 1.gre ...
- Flume NG基本架构与Flume NG核心概念
导读 Flume NG是一个分布式.可靠.可用的系统,它能够将不同数据源的海量日志数据进行高效收集.聚合.移动,最后存储到一个中心化数据存储系统中. 由原来的Flume OG到现在的Flume NG, ...
- java练习题-求int类型N值的阶乘
//求int类型N值的阶乘 public static int getNumsJieCheng(int i){ int rs = 1; if(i==0||i==1){ return i; } if(i ...
- Andorid Scrolling Activity(CoordinatorLayout详情)
1.new project -> Scrolling Activity 2.Layout xml code activity_scrolling.xml <?xml version=&qu ...
- 《Java编程的逻辑》第三部分 泛型与容器
- [Windows Server 2008] Apache+PHP安全设置
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:Win2008 ...
- String数据类型转换
String是final类,提供字符串不可修改.强制类型转换,String类型无处不在.下面介绍一些常见的String数据类型转换. String数据类型转换成long.int.double.floa ...
- Linux Shell ssh登录脚本
Linux 登陆服务器敲命令太多,某时候确实不便,所以就用shell写了一个 我的blog地址: http://www.cnblogs.com/caoguo 一.说明 支持秘密和密钥两种格式 用户名 ...
- java_io学习_编码
package io; public class encodingDemo{ public static void main(String[] args) throws Exception{ // T ...