Selenium Practice Site

Selenium Practice Site: End-to-End Automation with PassTheNote

PassTheNote is a purpose-built automation testing practice website that mirrors modern SaaS modules. Rehearse Selenium WebDriver suites with reliable test IDs, rich dashboards, and hybrid UI + API flows that map directly to interview prompts and onboarding drills.

Quick Start

  • Install Selenium WebDriver bindings plus the browser driver of your choice (Chrome, Firefox, Edge).
  • Create a free PassTheNote account or reuse demo credentials to unlock dashboards, carts, notes, and admin routes.
  • Warm up by practicing explicit waits on /auth/login, then jump into add-to-cart, promos, and checkout assertions.

Why Selenium automation teams use PassTheNote

  • Deterministic data-test attributes across hero CTAs, nav, tables, and control panels to keep locators resilient.
  • Mix Selenium UI coverage with /api/v1 data seeding so your suites stay fast and repeatable.
  • Realistic admin + dashboard widgets that require chaining assertions, retries, and screenshot diffs.

Cart & Checkout Flow

Automate start-to-finish purchasing with price, tax, and discount calculations.

  • Add two products, update quantities, and confirm totals adjust.
  • Apply a coupon code and assert the success toast plus recalculated order summary.
  • Finish checkout and verify order confirmation appears in /app/orders.

Notes CRUD & Tagging

Validate dynamic lists, optimistic updates, and toast notifications in /notes.

  • Create a note with multiple tags and assert rich text preview renders.
  • Edit the note, change visibility, and verify history updates.
  • Delete the note and confirm the empty state plus audit trail.

Authentication Edge Cases

Practice handling validation, error banners, and session cookies.

  • Trigger validation errors by submitting blank forms.
  • Attempt multiple failed logins and ensure lockout messaging appears.
  • Validate session persistence after refresh and logout behavior across tabs.

Admin Dashboard Access Control

Assert RBAC, protected routes, and analytics widgets.

  • Log in with admin credentials and confirm redirect to /admin.
  • Validate each metric card and chart has data-test ids and accurate values.
  • Ensure standard users are blocked from admin-only routes.

API + UI Hybrid Tests

Seed data via API before exercising UI workflows.

  • Call /api/v1/orders to create fixtures, then navigate to /app/orders to confirm render.
  • Use API Explorer to reset carts before each UI test run.
  • Chain API cleanup at the end of suites to keep data pristine.

Selenium WebDriver starter snippet

Kick off your suite by authenticating, waiting for dashboard hydration, and asserting cart behavior. Swap in your preferred browser driver or extend the flow with additional modules.

WebDriver driver = new ChromeDriver();
driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(5));

driver.get("https://www.passthenote.com/auth/login");
driver.findElement(By.cssSelector("[data-testid='ptn-login-email']"))
      .sendKeys("tester@passthenote.com");
driver.findElement(By.cssSelector("[data-testid='ptn-login-password']"))
      .sendKeys("Tester@123");
driver.findElement(By.cssSelector("[data-testid='ptn-login-submit-button']"))
      .click();

new WebDriverWait(driver, Duration.ofSeconds(10))
    .until(ExpectedConditions.urlContains("/app/dashboard"));

// Navigate to products and assert cart badge updates
WebElement firstProduct = driver.findElement(By.cssSelector("[data-testid='ptn-product-card']"));
firstProduct.findElement(By.cssSelector("button[data-testid='ptn-add-to-cart']")).click();
String badge = driver.findElement(By.cssSelector("[data-testid='ptn-mini-cart-count']"))
                     .getText();
Assertions.assertEquals("1", badge);

Sample end-to-end validation

  • Navigate to /app/products and capture baseline inventory.
  • Add two distinct SKUs, assert mini cart badge updates, and open the cart drawer.
  • Apply coupon code SELENIUM10 and verify the discount line item and totals.
  • Proceed through checkout, selecting saved address + payment stub.
  • Submit order, wait for success toast, then visit /app/orders to confirm the new order row.
  • Use the API Explorer to GET /api/v1/orders/{id} and validate parity between UI and API data.