Cypress test skeleton

Cypress: end-to-end testing inside the browser

Cypress is an end-to-end testing framework created in 2014 by Brian Mann and the team behind cypress.io. Its defining trait — the one that made it explode in popularity — is that the test code runs inside the browser, in the same JavaScript event loop as the application, rather than driving the browser remotely via WebDriver (the Selenium model). This unlocks direct access to the DOM, synchronous control over network requests, time-travel debugging in the GUI runner and a much more pleasant developer experience.

A typical spec follows a familiar BDD structure: describe('flow', () => { it('does X', () => { ... }) }). Inside the it block you chain commands on the global cy object: visit a URL, query elements, interact with them and assert the result. The skeleton this page produces follows that structure so you can start writing real specs immediately.

Core commands you will use every day

• cy.visit('/login') — load a page.
• cy.get('selector') — query by CSS selector.
• cy.contains('text') — find element by text content.
• cy.click(), cy.type('hello'), cy.check(), cy.select('option') — interactions.
• cy.url().should('include', '/dashboard') — URL assertions.
• Assertions: should('be.visible'), should('contain', 'X'), should('have.class', 'active'), should('have.length', 5).

Commands are chainable: each returns a Subject that the next command consumes, similar to jQuery. Crucially, assertions have built-in retry-ability — they re-evaluate automatically until the condition holds or a timeout (default 4 seconds) elapses, drastically reducing flakiness from animation or async data.

Network control, fixtures and sessions

Network mocking is one of Cypress's strongest features. cy.intercept('GET', '/api/users', { fixture: 'users.json' }) replaces a real call with deterministic data; cy.intercept('POST', '/api/login').as('login') assigns an alias you can wait on with cy.wait('@login'). cy.fixture('users.json') loads stub data, and cy.request calls APIs directly, perfect for seeding state before a test. cy.session(id, setup) persists login state across tests so you do not log in from scratch every time.

Component testing, Cypress Cloud and limitations

Since version 10, Cypress unified E2E and component testing: spin up React, Vue, Svelte or Angular components in isolation with the same API and the same runner. Cypress Cloud is the paid SaaS that aggregates runs, enables parallelization, screenshots/videos and flaky-test detection across CI. Limitations to know up front: Cypress runs only Chromium-based browsers and Firefox (no Safari/WebKit); cross-origin navigation requires explicit setup; tab and iframe handling is limited; and the lack of multi-context support (compared with Playwright) makes some scenarios awkward.

Cypress vs Playwright

The most common alternative today is Playwright, created by Microsoft. Cypress usually wins on developer experience — interactive runner, time travel, simpler API. Playwright wins on cross-browser coverage (Chromium + Firefox + WebKit), native multi-context for parallel sessions, generally faster CI and stronger autowait. For greenfield projects with cross-browser requirements Playwright is often the safer pick; for teams already invested in Cypress with a strong UX preference, Cypress remains a solid choice.

FAQ

Can I record tests instead of writing them? Yes — Cypress Studio lets you interact with the application and exports the corresponding commands. It is great for prototyping; for long-term maintainability, hand-written specs are still preferable.

My tests are flaky in CI. What do I do? Use cy.session for login, stub network calls with cy.intercept instead of relying on real backends, prefer assertions with retry over cy.wait(ms), and consider Cypress Cloud's flake-detection feature.

Does Cypress support mobile testing? It can resize the viewport with cy.viewport('iphone-x'), but it does not run on real iOS/Android devices or emulators. For true device testing, look at Appium or Playwright with mobile-emulation contexts.

Can I call APIs directly without going through the UI? Yes — cy.request('POST', '/api/users', payload) hits the backend straight, perfect for seeding data and asserting backend behavior.

Does this generator send my code anywhere? No — the spec skeleton is generated entirely in your browser. Nothing is uploaded.