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 =>  
     
    
        
     

 

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');    });});

 

,