npm i cypress

npm i selenium-webdriver
npm i chai
npm i mocha

// download chromedriver 
// set your PATH variable 
// to include location 
// for chromedriver

const { Builder, By, Key, until } = require('selenium-webdriver');
const { expect } = require('chai');

beforeEach(async () => {
    driver = new Builder().forBrowser('chrome').build();
    await driver.get('http://todomvc.com/examples/react/');

    newTodoField = By.css('.new-todo');
    todoList = By.css('.todo-list li');

    await driver.wait(until.elementLocated(newTodoField));
    await driver
      .findElement(newTodoField)
      .sendKeys('do lunch and learn about Cypress', Key.ENTER);
    await driver.findElement(newTodoField).sendKeys('have lunch', Key.ENTER);
  });

afterEach(async () => driver.quit());

it('should add a new todo successfully', async () => {
    await driver.wait(until.elementLocated(todoList));
    await driver
      .findElements(todoList)
      .then((elements) => expect(elements.length).to.equal(2));
  });

it('should mark a todo item as completed', async () => {
    await driver.findElement(By.css('.toggle:first-child')).click();
    await driver.findElement(By.linkText('Completed')).click();
    await driver
      .findElements(todoList)
      .then((elements) => elements[0].getText())
      .then((text) =>
        expect(text).to.equal('do lunch and learn about Cypress')
      );
  });

/// <reference types="cypress" />

beforeEach(() => {
    cy.visit('http://todomvc.com/examples/react/');
    cy.get('.new-todo').as('addTodo');

    cy.get('@addTodo').type('do lunch and learn about Cypress {enter}');
    cy.get('@addTodo').type('have lunch {enter}');
  });

it('should add a new todo successfully', () => {
    cy.get('.todo-list').find('li').should('have.length', 2);
  });

it('should mark a todo item as completed', () => {
    cy.get('.toggle').first().click();

    cy.contains('Completed').click();
    cy.getFirstTodoItem().should(
      'be.equal',
      'do lunch and learn about Cypress'
    );
  });