zoukankan      html  css  js  c++  java
  • [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}>
        <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');
        });
    });

    API, Github

  • 相关阅读:
    poj3608Bridge Across Islands(旋转卡壳)
    旋转卡壳(rotate吧)
    旋转卡壳(rotate吧)
    poj2187 Beauty Contest
    poj2187 Beauty Contest
    poj1637 Sightseeing tour
    poj1637 Sightseeing tour
    bzoj2756 [SCOI2012]奇怪的游戏
    bzoj2756 [SCOI2012]奇怪的游戏
    noip胡测之8.15(没有正解)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9085115.html
Copyright © 2011-2022 走看看