DEV Community

Alex Spinov
Alex Spinov

Posted on

Cypress Has a Free API That Makes Frontend Testing Visual and Developer-Friendly

#webdev #javascript #testing #cypress

Cypress pioneered the "time-travel debugging" approach to E2E testing. You see every step visually, can hover over commands to see DOM snapshots, and the Test Runner shows exactly what happened when a test fails.

Quick Start 

npm install cypress --save-dev
npx cypress open
Enter fullscreen mode Exit fullscreen mode

Basic Test 

describe('Login', () => {
  it('should login successfully', () => {
    cy.visit('/login')
    cy.get('[data-testid="email"]').type('user@example.com')
    cy.get('[data-testid="password"]').type('password123')
    cy.get('button[type="submit"]').click()
    cy.url().should('include', '/dashboard')
    cy.get('h1').should('contain', 'Welcome')
  })
})
Enter fullscreen mode Exit fullscreen mode

Time-Travel Debugging

The Cypress Test Runner shows:

  • Every command in the left panel
  • Hover over any command to see the DOM at that point
  • Click to pin a snapshot
  • See before/after state for each assertion

This is why developers love Cypress — you SEE what happened.

Network Stubbing 

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('getUsers')
cy.visit('/users')
cy.wait('@getUsers')
cy.get('.user-card').should('have.length', 3)
Enter fullscreen mode Exit fullscreen mode

Component Testing 

import { mount } from 'cypress/react'
import Button from './Button'

it('renders with label', () => {
  mount(<Button label="Click me" />)
  cy.get('button').should('contain', 'Click me')
})
Enter fullscreen mode Exit fullscreen mode

Custom Commands 

// cypress/support/commands.js
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login')
  cy.get('[data-testid="email"]').type(email)
  cy.get('[data-testid="password"]').type(password)
  cy.get('button[type="submit"]').click()
})

// In tests:
cy.login('user@example.com', 'password123')
Enter fullscreen mode Exit fullscreen mode

The Bottom Line

Cypress is still the most developer-friendly testing tool. Time-travel debugging, visual Test Runner, and great DX. Use Playwright if you need multi-browser or better parallel support.

Need to automate data collection or build custom scrapers? Check out my Apify actors for ready-made tools, or email spinov001@gmail.com for custom solutions.

Top comments (0)