[Cypress] Find and Test Focused Input with Chrome’s DevTools in Cypress
2024-08-31 06:02:18
In this lesson, we’ll add tests that finds a focused input. We’ll use Chrome’s dev tools from inside the Cypress runner to inspect the element and update our test to verify that the expected element is focused. We’ll see how Cypress can be used to test drive our application by creating a failing test and updating our application code to make it pass.
For exmaple in the todo app, when the page loaded, we want to test,
- whether the input field is focused
- whether the value of input filed is empty
- whether the placeholder of the input field is "What needs to be done?"
The component code we have:
import React from 'react' export default props =>
<form onSubmit={props.handleTodoSubmit}>
<input
type='text'
autoFocus
value={props.currentTodo}
onChange={props.handleNewTodoChange}
className="new-todo"
placeholder="What needs to be done?"/>
</form>
The test code:
form-input.spec.js:
describe('Form input', function () {
it('should has input filed auto focused when page loaded', function () {
cy.visit('/');
cy.focused()
.should('have.class', 'new-todo')
.and('have.attr', 'placeholder', 'What needs to be done?')
.and('be.empty');
});
});
最新文章
- JavaBean和Map转换封装类
- support-v4不能查看源码
- PHP中的strtotime()对于31日求上个月有问题
- cdh 上安装spark on yarn
- hibernate--联合主键--annotation
- 4.vbs的循环,switch,判断等语句
- python 爬取天猫美的评论数据
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之八 || API项目整体搭建 6.3 异步泛型仓储+依赖注入初探
- js前台计算两个日期的间隔时间(时间差)
- numpy交换列
- es6+的javascript拓展内容
- C语言变量的作用域和存储类型
- 关闭provider进程或者consumer进程后,会发生什么?
- lastlog
- 将本地的项目推送到github上
- 在VM克隆CENTOS以后,网卡的处理过程
- jdeveloper基础教程(中文版)
- XCODE的演变及使用经验分享
- 在vps上安装中文环境
- 《C++ Primer Plus》学习笔记 第1章 预备知识