Cypress से End-to-End Testing

Cypress के साथ End-to-end testing ऐसा है जैसे एक mystery shopper को hire करना आपके पूरे store से front door से checkout counter तक walk through करने के लिए, यह check करते हुए कि पूरा experience actually काम करता है।

In this page:

एक Test को 'End-to-End' क्या बनाता है
Core Cypress Commands
Automatic Retrying और Flaky Tests से बचना

Syntax

markup

describe("feature", () => {
  it("description", () => {
    cy.visit("/path");
    cy.get("selector").type("text");
    cy.contains("button", "label").click();
    cy.contains("expected text").should("be.visible");
  });
});

एक Test को 'End-to-End' क्या बनाता है

Unit या integration tests के विपरीत जो isolated pieces check करते हैं, एक end-to-end (E2E) test आपके ACTUAL running app को एक real browser में drive करता है, एक complete user journey simulate करते हुए शुरू से आखिर तक — जैसे एक signup page visit करना, form भरना, submit करना, और एक welcome message appear होना confirm करना।

Note: E2E tests सबसे highest confidence देते हैं कि एक real feature काम करता है, क्योंकि वे पूरी stack exercise करते हैं, लेकिन वे सबसे slowest kind of test भी हैं run करने में।

Warning: क्योंकि E2E tests slow और flaky हो सकते हैं, उन्हें अपने सबसे critical flows (signup, checkout, login) के लिए reserve करें हर छोटे feature के लिए नहीं।

उदाहरण: What Makes a Test 'End-to-End'

markup

// Run in your local React project (npm install required)
// cypress/e2e/login.cy.js
describe('Login flow', () => {
  it('logs in successfully', () => {
    cy.visit('/login');
    cy.get('input[name=email]').type('[email protected]');
    cy.get('button').contains('Log In').click();
    cy.contains('Welcome back!').should('be.visible');
  });
});

Core Cypress Commands

cy.visit(url) एक page पर navigate करता है, cy.get(selector) elements ढूंढता है (Testing Library की queries जैसी spirit में similar, लेकिन CSS-selector-based), और .click() या .type() जैसे commands उनसे interact करते हैं, सब एक full user flow describe करने के लिए chained together।

Note: Cypress commands chainable हैं, इसलिए आप एक fluent sequence लिख सकते हैं जैसे cy.get(input).type(hello).should('have.value', hello)।

Warning: Cypress commands हुड के नीचे asynchronous हैं भले ही आपके code में await की ज़रूरत न हो — Cypress queueing और retrying automatically manage करता है।

उदाहरण: Core Cypress Commands

markup

// Run in your local React project (npm install required)
describe('Search feature', () => {
  it('shows results after searching', () => {
    cy.visit('/search');
    cy.get('input[type=search]').type('react{enter}');
    cy.get('.result-item').should('have.length.greaterThan', 0);
  });
});

Automatic Retrying और Flaky Tests से बचना

Cypress fail होने से पहले ज़्यादातर assertions को कुछ seconds के लिए automatically retry करता है, जो बहुत सारी async timing (जैसे एक API response के render होने का wait) handle करता है बिना manual sleeps या arbitrary waits के।

यह built-in retrying timing-related test flakiness को कम करता है, हालांकि पूरी तरह eliminate नहीं करता।

Note: cy.wait(1000)-style fixed delays से बचें — Cypress के built-in retrying को timing handle करने दें, eventual state पर assert करते हुए।

Warning: Fixed-duration waits पर rely करना Cypress के retry-based assertions के बजाय tests को fast runs पर slower बनाता है और genuinely slow वालों पर अब भी flaky बनाता है।

उदाहरण: Automatic Retrying and Avoiding Flaky Tests

markup

// Run in your local React project (npm install required)
// Avoid this (fixed, unreliable wait):
// cy.wait(2000);
// cy.get('.result').should('exist');

// Prefer this (Cypress retries automatically until it appears or times out):
cy.get('.result', { timeout: 10000 }).should('exist');

Chapter Quiz — Complete all 9 topics to unlock

0/9 topics done

Complete these topics first:

← Previous Lesson Snapshot Testing Next Lesson → Error Boundaries

Cypress से End-to-End Testing

एक Test को 'End-to-End' क्या बनाता है

Core Cypress Commands

Automatic Retrying और Flaky Tests से बचना

Chapter Quiz — Complete all 9 topics to unlock

Login to run this code