Cypress Practice Website

Cypress Practice Site with Deterministic Test Data

PassTheNote is packed with realistic UI states, REST APIs, and automation-friendly copy so you can practice Cypress fundamentals, API helpers, and advanced debugging workflows without spinning your own stack.

Quick Start

  • Install Cypress and point baseUrl to https://www.passthenote.com or your local dev server.
  • Leverage documented data-test attributes for resilient selectors and chainable commands.
  • Use cy.request to seed carts, notes, or users before hitting the UI for faster suites.

Why Cypress engineers choose PassTheNote

  • Battle-tested data-test ids across nav, drawers, forms, and modals to minimize locator churn.
  • REST endpoints mirror the UI modules so cy.request can prep data for deterministic test states.
  • Purpose-built dashboards and admin RBAC to rehearse intercepts, retries, and accessibility audits.

Flaky Test Hardening

Use Cypress retry-ability to stabilize asynchronous UI.

  • Target skeleton loaders before asserting final table states.
  • Wrap API requests with cy.intercept and wait on aliases.
  • Leverage Cypress clock + tick to validate debounce behaviors.

Visual Regression Hooks

Pair Percy or Cypress component testing with PassTheNote UI.

  • Capture baseline screenshots of hero, cards, and dashboards.
  • Introduce intentional UI changes locally to validate diff reporting.
  • Automate component tests for Button, Card, and Navbar states.

Notes API + UI Combo

Use cy.request to create data, then assert UI rendering.

  • POST a note via API, visit /notes/mine, and confirm list updates.
  • PATCH the note and verify UI optimistically updates without refresh.
  • DELETE via API and confirm UI empty state renders with CTA.

Checkout Error Handling

Create negative scenarios for payment or inventory failures.

  • Force coupon validation errors and assert inline messaging.
  • Mock payment response to 500 using cy.intercept and confirm fallback UI.
  • Verify cart state persists after failure and can be recovered.

Accessibility Assertions

Pair Cypress axe with PassTheNote pages to log violations.

  • Run axe on /auth/signup and ensure zero critical issues.
  • Document aria-labels on nav, buttons, and form inputs.
  • Create regression tests to prevent future accessibility drift.

Cypress session + coupon workflow

Persist auth with cy.session, hydrate carts through the UI, and assert totals while an API alias monitors checkout traffic.

describe('cart discounts', () => {
  beforeEach(() => {
    cy.session('ptn-user', () => {
      cy.request('POST', '/api/auth/login', {
        email: 'tester@passthenote.com',
        password: 'Tester@123',
      });
        .its('body.token')
        .then((token) => {
          cy.visit('/');
          cy.window().then((win) => {
            win.localStorage.setItem('ptn_token', token);
          });
        });
    });
  });

  it('applies coupons end-to-end', () => {
    cy.visit('/app/products');
    cy.get("[data-testid='ptn-product-card']").first().find("[data-testid='ptn-add-to-cart']").click();
    cy.visit('/app/cart');
    cy.intercept('POST', '/api/v1/cart/apply-coupon').as('applyCoupon');
    cy.get("[data-testid='ptn-cart-coupon-input']").type('SELENIUM10');
    cy.get("[data-testid='ptn-apply-coupon']").click();
    cy.wait('@applyCoupon').its('response.statusCode').should('eq', 200);
    cy.get("[data-testid='ptn-order-total']").should('contain', '$');
  });
});

Sample end-to-end validation

  • cy.login() via custom command using API to bypass UI auth.
  • Visit /app/cart and intercept /api/v1/cart for deterministic data.
  • Add item, apply coupon, and assert line-item totals.
  • Trigger checkout submission and wait on POST /api/v1/orders alias.
  • Assert success banner, verify redirect to /app/orders, and snapshot final table.