[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