React based applications often use controlled inputs, meaning the input event leads to the application code setting the value of the very input we’re typing into. Since this moves the input setting behavior into the application code, we should have a test to guard against future changes that might break this behavior. In this lesson, we’ll use the Selector Playground feature in Cypress and create a test that enters text into an input and asserts that the value is the same as the entered text.

The get the selected element, we can use the cypress interface:

    it.only('should type new todo into the input field', function () {
const typedText = 'New todo';
cy.visit('/');
cy.get('.new-todo')
.type(typedText)
.should('have.value', typedText);
});

[Cypress] Test React’s Controlled Input with Cypress Selector Playground的更多相关文章

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

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

  2. react中使用Input表单双向绑定方法

    input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete="ne ...

  3. [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 ...

  4. [React] Make Controlled React Components with Control Props

    Sometimes users of your component want to have more control over what the internal state is. In this ...

  5. [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 ...

  6. [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 mig ...

  7. [Cypress] Interact with Hidden Elements in a Cypress Test

    We often only show UI elements as a result of some user interaction. Cypress detects visibility and ...

  8. [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 ...

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

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

随机推荐

  1. React-Native 踩坑过程

    踩坑过程: 解决方法就是去 SDK Manager 把 23.0.1 的版本下载了 而如果报错信息中含有bintray.com.gradle.org等网址,请***,反复重试,或者去react nat ...

  2. bzoj3211: 花神游历各国(线段树) 同codevs2492

    3211: 花神游历各国 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 3628  Solved: 1326[Submit][Status][Discu ...

  3. JS网页播放声音实现代码兼容各种浏览器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. django-2的路由层(URLconf)

    URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于客户端发来的某个URL调用哪一段逻辑代码 ...

  5. Spark Streaming基础概念

    为了更好地理解Spark Streaming 子框架的处理机制,必须得要自己弄清楚这些最基本概念. 1.离散流(Discretized Stream,DStream):这是Spark Streamin ...

  6. 5.13会话技术Cookie---Session

    .会话技术: 1.会话:一次会话中包含多次请求和相应. 一次会话:浏览器第一次给服务器资源发送请求,会话建立,直到有一方断开为止 2.功能:在一次会话的范围内的多次请求间,共享数据 3.方式: 1.客 ...

  7. 2.Dubbo开源分布式服务框架(JAVA RPC)

    1. Dubbo介绍 Dubbox是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能RPC(即远程调用)实现服务的输出和输入功能, 可以和Spring框架无集成.Dubbo是一款高性能 ...

  8. 2星|《工业X.0》:物联网的资料汇编

    工业X.0:实现工业领域数字价值 看完比较失望,没有看到新的观点想法.基本算是物联网的资料汇编.总体评价2星. 以下是书中一些内容的摘抄: 1:例如,埃森哲为其员工开发了一个用例,用增强现实技术解决实 ...

  9. Java中final,finally和finalize区别

    Day11_SHJavaTraing_4-18-2017 Java中final,finally和finalize区别 1.final—修饰符(关键字) ①final修饰类,表示该类不可被继承 ②fin ...

  10. Sobel算子取代:基于特定点方向的canny边缘检测

    前言: Canny边缘检测使用了Sobel算子,计算dx和dy两个方向,对于特定方向的边缘检测,可以作少量修改. 代码: 计算特定方向上的边缘 void CannyOrient( cv::Mat &a ...