[Cypress] Find and Test Focused Input with Chrome’s DevTools in Cypress

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}><inputtype='text'autoFocusvalue={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');});
});

API, Github

转载于:https://www.cnblogs.com/Answer1215/p/9085115.html

[Cypress] Find and Test Focused Input with Chrome’s DevTools in Cypress相关推荐

关于 input在 chrome 、IE浏览器中遇到的兼容性问题处理
1.谷歌中input自动填入后会出现背景色处理 input CSS样式 input:-webkit-autofill , textarea:-webkit-autofill, select:-webk ...
Chrome 73 DevTools 新功能之 Logpoints
前言今天早上 Chrome 更新到 73 版本,其中 Logpoints 对于常用 console.log 的开发者来说,有较大的便捷性. 版本说明本篇文章提到的 Chrome 73 的版本为: ...
Chrome中devtools安装
1.官网下载下载压缩包即可 https://github.com/vuejs/devtools/releases 我先使用npm安装但是下载依赖总报错 npm install -g cnpm -- ...
python selenium chrome 控制devtools 一些线索
chrome webdriver下载地址:http://chromedriver.storage.googleapis.com/index.html 注意和国产浏览器的内核版本对应(星愿浏览器80.0 ...
chrome浏览器devtools切换主题（亮色，暗色）
打开devtools,windows下使用快捷键ctrl+shift+p打开command命令,mac用户使用command+shift+p.输入theme则可看见切换命令选中即可. 切换到亮色切换 ...
通过一个简单的例子，了解 Cypress 的运行原理
Cypress 是 SAP Spartacus 前端 e2e 测试使用的框架. Cypress 并不是广义上的 web 自动化工具,并不适合编写脚本来测试已经处于生产状态下的不受测试者控制的网站. C ...
cypress 自动化测试
文章目录前言一.简介二.原理三.特性四.优势五.安装使用 1. npm install cypress --save-dev # 安装cypress 1.1 在项目根目录下增加配置文件cy ...
E2E 端到端测试学习 - E2E 介绍、Cypress 案例基本使用
E2E 测试介绍 E2E E2E(end to end)端到端测试是最直观可以理解的测试类型.在前端应用程序中,端到端测试可以从用户的视角通过真实浏览器自动检查应用程序是否正常工作. E2E 把整个系 ...
屏幕分辨率测试工具（舍弃）---chrome开发者工具devTools(强烈建议系统学习)
2019-01-25 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://w ...

[Cypress] Find and Test Focused Input with Chrome’s DevTools in Cypress

[Cypress] Find and Test Focused Input with Chrome’s DevTools in Cypress相关推荐

最新文章

热门文章