2.5Cypress: Component and E2E Testing

Cypress runs in the browser alongside your application, giving it unique capabilities for frontend testing.

// checkout.cy.ts
describe("Checkout Flow", () => {
    beforeEach(() => {
        cy.login("test@example.com", "pass123");  // custom command
    });

    it("should complete purchase with valid payment", () => {
        cy.visit("/products");
        cy.get('[data-testid="add-to-cart"]').first().click();
        cy.get(".cart-count").should("have.text", "1");

        cy.get('[data-testid="checkout-button"]').click();
        cy.get('[name="card-number"]').type("4111111111111111");
        cy.get('[data-testid="pay-button"]').click();

        cy.get(".confirmation").should("contain", "Order confirmed");
    });

    it("should intercept and mock payment API", () => {
        cy.intercept("POST", "/api/payments", {
            statusCode: 200,
            body: { status: "success", transaction_id: "mock-123" }
        }).as("payment");

        // ... trigger payment
        cy.wait("@payment");
    });
});