DEV Community

Alex Spinov
Alex Spinov

Posted on

Cypress Has a Free E2E Testing Framework — Visual Testing and Time Travel Debugging for Web Apps

#webdev #javascript #testing #cypress

Why Cypress?

Cypress runs in the browser alongside your app — real DOM, real events, real network. Time-travel debugging shows every step visually.

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

Your First Test 

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

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

Custom Commands 

Cypress.Commands.add('login', (email, password) => {
  cy.session([email, password], () => {
    cy.visit('/login')
    cy.get('#email').type(email)
    cy.get('#password').type(password)
    cy.get('button[type=submit]').click()
    cy.url().should('include', '/dashboard')
  })
})

// Usage
cy.login('admin@test.com', 'pass123')
Enter fullscreen mode Exit fullscreen mode

Cypress vs Playwright

Feature Cypress Playwright
Browsers Chrome, Firefox, Edge + WebKit
API testing cy.request() request fixture
Debugging Time travel Trace viewer
Parallel Cypress Cloud Built-in
Speed Fast Faster

Need to extract data from any website at scale? I build custom web scrapers — 77 production scrapers running on Apify Store. Email me at spinov001@gmail.com for a tailored solution.

Top comments (0)