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 starter snippet

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.