qa-copilot-lab 0.1.0

package/views/cart.ejs

@@ -0,0 +1,42 @@
+<%- include('partials/head', { title: 'Cart' }) %>
+<%- include('partials/header') %>
+
+  <h1>Your cart</h1>
+
+  <% if (cart.items.length === 0) { %>
+    <p>Your cart is empty. <a href="/catalog">Go find something to add.</a></p>
+  <% } else { %>
+    <table class="cart-table" data-testid="<%= tid('cart-table') %>">
+      <thead>
+        <tr><th>Item</th><th>Price</th><th>Qty</th><th>Subtotal</th><th></th></tr>
+      </thead>
+      <tbody>
+        <% cart.items.forEach(function(line) { %>
+          <tr data-testid="<%= tid('cart-row-' + line.productId) %>">
+            <td><%= line.name %></td>
+            <td><%= line.price.toFixed(2) %></td>
+            <td>
+              <input type="number" min="1" value="<%= line.qty %>" class="qty-edit" data-product-id="<%= line.productId %>" aria-label="Quantity for <%= line.name %>">
+            </td>
+            <td><%= (line.price * line.qty).toFixed(2) %></td>
+            <td>
+              <button type="button" class="icon-btn remove-line" title="Remove item" data-product-id="<%= line.productId %>" aria-label="Remove <%= line.name %> from cart">
+                🗑
+              </button>
+            </td>
+          </tr>
+        <% }); %>
+      </tbody>
+    </table>
+
+    <p class="cart-total">Total: <strong data-testid="<%= tid('cart-total') %>"><%= cart.items.reduce((s,l) => s + l.price*l.qty, 0).toFixed(2) %> USD</strong></p>
+
+    <a href="/checkout"
+       class="btn btn-primary"
+       data-testid="<%= tid('checkout-button') %>"
+       <%= (bugSet === 1 || cart.items.length === 0) ? 'aria-disabled="true" onclick="return false;" tabindex="-1"' : '' %>>
+      Proceed to checkout
+    </a>
+  <% } %>
+
+<%- include('partials/footer') %>

package/views/catalog.ejs

@@ -0,0 +1,69 @@
+<%- include('partials/head', { title: 'Catalog' }) %>
+<%- include('partials/header') %>
+
+  <div class="catalog-layout">
+    <aside class="filters" aria-label="Filters">
+      <h2>Category</h2>
+      <form method="get" action="/catalog" class="filter-form">
+        <% categories.forEach(function(c) { %>
+          <label class="checkbox-row">
+            <input type="radio" name="category" value="<%= c %>" <%= category === c ? 'checked' : '' %> onchange="this.form.submit()">
+            <%= c %>
+          </label>
+        <% }); %>
+        <label class="checkbox-row">
+          <input type="radio" name="category" value="" <%= category === '' ? 'checked' : '' %> onchange="this.form.submit()">
+          All categories
+        </label>
+
+        <h2>Max price</h2>
+        <label for="maxPrice">Up to $<span id="maxPriceValue"><%= maxPrice || 150 %></span></label>
+        <input type="range" id="maxPrice" name="maxPrice" min="5" max="150" value="<%= maxPrice || 150 %>"
+               oninput="document.getElementById('maxPriceValue').textContent = this.value"
+               onchange="this.form.submit()">
+      </form>
+    </aside>
+
+    <section class="catalog-results">
+      <h1><%= category || 'All products' %><% if (q) { %> — matching "<%= q %>"<% } %></h1>
+
+      <div class="product-grid" data-testid="<%= tid('catalog-grid') %>">
+        <% products.forEach(function(p) { %>
+          <article class="product-card" data-testid="<%= tid('product-card-' + p.id) %>">
+            <img src="/api/img/<%= p.id %>" alt="<%= p.name %> product photo" class="product-thumb">
+            <h3><a href="/product/<%= p.id %>"><%= p.name %></a></h3>
+            <p class="category-tag"><%= p.category %></p>
+            <p class="price"><%= p.price.toFixed(2) %> USD</p>
+            <% if (p.stock === 0) { %>
+              <span class="badge badge-warn">Out of stock</span>
+            <% } else { %>
+              <button type="button"
+                      class="btn btn-primary <%= cx('add-to-cart') %>"
+                      data-role="add-to-cart"
+                      data-testid="<%= tid('add-to-cart-' + p.id) %>"
+                      data-product-id="<%= p.id %>"
+                      data-product-name="<%= p.name %>">
+                Add to cart
+              </button>
+            <% } %>
+          </article>
+        <% }); %>
+      </div>
+
+      <% if (products.length === 0) { %>
+        <p>No products match those filters.</p>
+      <% } %>
+
+      <nav class="pagination" aria-label="Catalog pages">
+        <% for (let i = 1; i <= totalPages; i++) { %>
+          <a href="/catalog?category=<%= category %>&maxPrice=<%= maxPrice || '' %>&page=<%= i %>"
+             class="<%= i === page ? 'page-link active' : 'page-link' %>"
+             aria-current="<%= i === page ? 'page' : 'false' %>">
+            <%= i %>
+          </a>
+        <% } %>
+      </nav>
+    </section>
+  </div>
+
+<%- include('partials/footer') %>

package/views/checkout.ejs

@@ -0,0 +1,49 @@
+<%- include('partials/head', { title: 'Checkout' }) %>
+<%- include('partials/header') %>
+
+  <h1>Checkout</h1>
+
+  <section class="checkout-step">
+    <h2>1. Shipping address</h2>
+    <div class="autocomplete" data-component="autocomplete">
+      <label for="address-input">Street address</label>
+      <input type="text" id="address-input" placeholder="Start typing an address…" autocomplete="off" role="combobox" aria-expanded="false" aria-controls="address-listbox">
+      <ul id="address-listbox" role="listbox" class="autocomplete-list" hidden></ul>
+    </div>
+    <label for="city-input">City</label>
+    <input type="text" id="city-input" name="city">
+  </section>
+
+  <section class="checkout-step">
+    <h2>2. Payment</h2>
+    <iframe src="/payment-frame" title="Payment details" id="payment-frame" class="payment-frame"></iframe>
+  </section>
+
+  <section class="checkout-step">
+    <h2>3. Review</h2>
+    <ul class="checkout-summary">
+      <% cart.items.forEach(function(line) { %>
+        <li><%= line.name %> × <%= line.qty %> — <%= (line.price * line.qty).toFixed(2) %> USD</li>
+      <% }); %>
+    </ul>
+    <p class="cart-total">Total: <strong><%= cart.items.reduce((s,l) => s + l.price*l.qty, 0).toFixed(2) %> USD</strong></p>
+
+    <button type="button" class="btn btn-primary" id="place-order-btn" data-testid="<%= tid('place-order-button') %>">
+      Place order
+    </button>
+  </section>
+
+  <script>
+    document.getElementById('place-order-btn').addEventListener('click', async () => {
+      const res = await fetch('/api/orders', { method: 'POST' });
+      if (res.ok) {
+        const order = await res.json();
+        window.location.href = '/account/orders?placed=' + order.id;
+      } else {
+        const err = await res.json();
+        window.toast(err.error || 'Could not place order', 'error');
+      }
+    });
+  </script>
+
+<%- include('partials/footer') %>

package/views/home.ejs

@@ -0,0 +1,42 @@
+<%- include('partials/head', { title: 'Home' }) %>
+<%- include('partials/header') %>
+
+  <section class="hero">
+    <h1>A store to practice on, not a store to shop at</h1>
+    <p>Every button, table, and form here exists to give a Playwright locator — or an AI agent driving one — something realistic to grab onto.</p>
+    <a href="/catalog" class="btn btn-primary" data-testid="<%= tid('hero-shop-cta') %>">Browse catalog</a>
+  </section>
+
+  <section class="section">
+    <h2>Featured products</h2>
+    <div class="product-grid">
+      <% featured.forEach(function(p) { %>
+        <article class="product-card" data-testid="<%= tid('product-card-' + p.id) %>">
+          <img src="/api/img/<%= p.id %>" alt="<%= p.name %> product photo" class="product-thumb">
+          <h3><a href="/product/<%= p.id %>"><%= p.name %></a></h3>
+          <p class="price"><%= p.price.toFixed(2) %> USD</p>
+          <% if (p.stock === 0) { %>
+            <span class="badge badge-warn"><%= 'Out of stock' %></span>
+          <% } %>
+        </article>
+      <% }); %>
+    </div>
+  </section>
+
+  <section class="section">
+    <h2>Frequently asked questions</h2>
+    <div class="accordion" data-component="accordion">
+      <% faqs.forEach(function(f, i) { %>
+        <div class="accordion-item">
+          <button type="button" class="accordion-trigger" aria-expanded="false" aria-controls="faq-panel-<%= i %>" data-testid="<%= tid('faq-trigger-' + i) %>">
+            <%= f.question %>
+          </button>
+          <div class="accordion-panel" id="faq-panel-<%= i %>" hidden>
+            <p><%= f.answer %></p>
+          </div>
+        </div>
+      <% }); %>
+    </div>
+  </section>
+
+<%- include('partials/footer') %>

package/views/invoice.ejs

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <title>Invoice <%= order.id %></title>
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body class="frame-body">
+  <h1>Invoice <%= order.id %></h1>
+  <p>Date: <%= order.created_at %></p>
+  <p>Billed to: <%= order.username %></p>
+  <table>
+    <tr><td><b>Item</b></td><td><b>Qty</b></td><td><b>Total</b></td></tr>
+    <tr><td><%= order.item %></td><td><%= order.qty %></td><td><%= order.total.toFixed(2) %> USD</td></tr>
+  </table>
+  <p>Status: <%= order.status %></p>
+</body>
+</html>

package/views/locators.ejs

@@ -0,0 +1,323 @@
+<%- include('partials/head', { title: 'Locator Playground' }) %>
+<%- include('partials/header') %>
+
+  <h1>Locator Playground</h1>
+  <p>Thirty-six locator strategies, each isolated below. Try writing the Playwright locator yourself, then press "Reveal" to check.</p>
+
+  <div class="locator-list">
+
+    <section class="locator-demo">
+      <h3>1. Role + accessible name</h3>
+      <button type="button" class="btn btn-primary">Add to cart</button>
+      <button type="button" class="btn btn-primary">Add to cart</button>
+      <p class="hint-text">Two buttons, identical text — on the real catalog page you would scope from the parent card first.</p>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('button', { name: 'Add to cart' }).first()</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>2. Label</h3>
+      <label for="demo-email">Email</label>
+      <input type="email" id="demo-email">
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByLabel('Email')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>3. Placeholder</h3>
+      <input type="search" placeholder="Search products…">
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByPlaceholder('Search products…')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>4. Alt text</h3>
+      <img src="/api/img/1" alt="Wireless Mouse product photo" width="80">
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByAltText('Wireless Mouse product photo')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>5. Title / tooltip</h3>
+      <button type="button" class="icon-btn" title="Remove item" aria-label="Remove item">🗑</button>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByTitle('Remove item')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>6. Test ID</h3>
+      <div data-testid="demo-cart-item-42">Cart line 42</div>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByTestId('demo-cart-item-42')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>7. Text — exact vs substring</h3>
+      <span class="badge badge-warn">Out of stock</span>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByText('Out of stock', { exact: true })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>8. CSS attribute selector</h3>
+      <span data-price="19.99">19.99</span>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.locator('[data-price]')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>9. XPath axes (legacy markup)</h3>
+      <table>
+        <tr><td>SKU-1029</td><td>USB-C Hub</td><td>69.00</td></tr>
+      </table>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.locator('xpath=//tr[td[text()="SKU-1029"]]/td[3]')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>10. Chained + filter</h3>
+      <div class="product-card"><h4>Mechanical Keyboard</h4><button type="button">Add to cart</button></div>
+      <div class="product-card"><h4>Wireless Mouse</h4><button type="button">Add to cart</button></div>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.locator('.product-card').filter({ hasText: 'Mechanical Keyboard' }).getByRole('button')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>11. nth / first / last</h3>
+      <ul class="review-list">
+        <li class="review-item">Review 1</li>
+        <li class="review-item">Review 2</li>
+        <li class="review-item">Review 3</li>
+      </ul>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.locator('.review-item').nth(2)</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>12. Frame locator</h3>
+      <iframe src="/payment-frame" title="Payment details" class="payment-frame-small"></iframe>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.frameLocator('iframe[title="Payment details"]').getByLabel('Card number')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>13. Shadow DOM piercing</h3>
+      <star-rating value="4"></star-rating>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.locator('star-rating').locator('[data-star="4"]')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>14. ARIA state</h3>
+      <button role="tab" aria-selected="true">Description</button>
+      <button role="tab" aria-selected="false">Reviews</button>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('tab', { selected: true })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>15. Disabled state</h3>
+      <a class="btn btn-primary" aria-disabled="true" tabindex="-1">Proceed to checkout</a>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>await expect(page.getByRole('link', { name: 'Proceed to checkout' })).toHaveAttribute('aria-disabled', 'true')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>16. Native browser dialog</h3>
+      <button type="button" class="btn btn-danger" onclick="confirm('Delete this demo account?')">Delete account</button>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.once('dialog', dialog => dialog.accept());</code>
+    </section>
+
+  </div>
+
+  <h2>ARIA roles for getByRole</h2>
+  <p class="hint-text">Twenty common ARIA roles, one demo each — <code>getByRole</code> stays stable even when class names or DOM structure around these elements change.</p>
+
+  <div class="locator-list">
+
+    <section class="locator-demo">
+      <h3>17. Role: textbox</h3>
+      <label for="demo-address">Shipping address</label>
+      <input type="text" id="demo-address">
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('textbox', { name: 'Shipping address' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>18. Role: checkbox</h3>
+      <label><input type="checkbox" id="demo-subscribe"> Subscribe to newsletter</label>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('checkbox', { name: 'Subscribe to newsletter' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>19. Role: combobox</h3>
+      <label for="demo-country">Country</label>
+      <select id="demo-country">
+        <option value="th">Thailand</option>
+        <option value="us">United States</option>
+      </select>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('combobox', { name: 'Country' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>20. Role: slider</h3>
+      <label for="demo-price-range">Max price</label>
+      <input type="range" id="demo-price-range" min="0" max="1000" value="500">
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('slider', { name: 'Max price' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>21. Role: switch</h3>
+      <button type="button" role="switch" aria-checked="true">Dark mode</button>
+      <p class="hint-text">No native HTML element maps to <code>switch</code> — it always needs an explicit <code>role</code> and <code>aria-checked</code>.</p>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('switch', { name: 'Dark mode' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>22. Role: navigation</h3>
+      <nav aria-label="Product categories">
+        <a href="/catalog">Electronics</a>
+        <a href="/catalog">Home</a>
+      </nav>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('navigation', { name: 'Product categories' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>23. Role: heading</h3>
+      <h4>Frequently bought together</h4>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('heading', { name: 'Frequently bought together', level: 4 })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>24. Role: list</h3>
+      <ul class="review-list" aria-label="Order perks">
+        <li class="review-item">Free shipping over $50</li>
+        <li class="review-item">30-day returns</li>
+      </ul>
+      <p class="hint-text">Named so this list is unambiguous — the page has other <code>&lt;ul&gt;</code> elements too.</p>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('list', { name: 'Order perks' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>25. Role: listitem</h3>
+      <ul class="review-list" aria-label="Checkout benefits">
+        <li class="review-item">Free shipping over $50</li>
+        <li class="review-item">30-day returns</li>
+      </ul>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('list', { name: 'Checkout benefits' }).getByRole('listitem').filter({ hasText: '30-day returns' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>26. Role: table</h3>
+      <table aria-label="Recent orders">
+        <thead><tr><th scope="col">Order</th><th scope="col">Total (USD)</th></tr></thead>
+        <tbody><tr><td>#1029</td><td>69.00</td></tr></tbody>
+      </table>
+      <p class="hint-text">Named so this table is unambiguous — three more demo tables follow below.</p>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('table', { name: 'Recent orders' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>27. Role: row</h3>
+      <table aria-label="Order totals">
+        <thead><tr><th scope="col">Order</th><th scope="col">Total (USD)</th></tr></thead>
+        <tbody><tr><td>#1029</td><td>69.00</td></tr></tbody>
+      </table>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('table', { name: 'Order totals' }).getByRole('row').filter({ hasText: '#1029' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>28. Role: cell</h3>
+      <table aria-label="Order breakdown">
+        <thead><tr><th scope="col">Order</th><th scope="col">Total (USD)</th></tr></thead>
+        <tbody><tr><td>#1029</td><td>69.00</td></tr></tbody>
+      </table>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('table', { name: 'Order breakdown' }).getByRole('cell', { name: '69.00' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>29. Role: columnheader</h3>
+      <table aria-label="Order columns">
+        <thead><tr><th scope="col">Order</th><th scope="col">Total (USD)</th></tr></thead>
+        <tbody><tr><td>#1029</td><td>69.00</td></tr></tbody>
+      </table>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('table', { name: 'Order columns' }).getByRole('columnheader', { name: 'Total (USD)' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>30. Role: dialog</h3>
+      <div role="dialog" aria-label="Confirm deletion" class="demo-dialog">
+        <p>Are you sure you want to delete this address?</p>
+      </div>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('dialog', { name: 'Confirm deletion' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>31. Role: alert</h3>
+      <div role="alert" class="badge-warn">Only 2 left in stock</div>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('alert')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>32. Role: progressbar</h3>
+      <label for="demo-upload-progress">Uploading receipt</label>
+      <progress id="demo-upload-progress" value="70" max="100"></progress>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('progressbar', { name: 'Uploading receipt' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>33. Role: status</h3>
+      <output class="demo-status">Cart updated</output>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('status')</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>34. Role: img</h3>
+      <svg role="img" aria-label="Verified seller badge" width="24" height="24"><circle cx="12" cy="12" r="10" fill="#1f7a5c"></circle></svg>
+      <p class="hint-text">An inline SVG can't take <code>alt</code>, so it needs <code>role="img"</code> plus <code>aria-label</code> instead.</p>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('img', { name: 'Verified seller badge' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>35. Role: tab / tabpanel</h3>
+      <div role="tablist" aria-label="Product info">
+        <button type="button" role="tab" aria-selected="false">Overview</button>
+        <button type="button" role="tab" aria-selected="false">Specs</button>
+      </div>
+      <div role="tabpanel" aria-label="Overview panel">Lightweight wireless mouse with 18-month battery life.</div>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('tab', { name: 'Specs' })
+page.getByRole('tabpanel', { name: 'Overview panel' })</code>
+    </section>
+
+    <section class="locator-demo">
+      <h3>36. Role: search</h3>
+      <form role="search">
+        <label for="demo-site-search">Search the store</label>
+        <input type="search" id="demo-site-search">
+      </form>
+      <button type="button" class="reveal-btn">Reveal</button>
+      <code class="answer" hidden>page.getByRole('search')</code>
+    </section>
+
+  </div>
+
+<%- include('partials/footer') %>

package/views/login.ejs

@@ -0,0 +1,22 @@
+<%- include('partials/head', { title: 'Login' }) %>
+<%- include('partials/header') %>
+
+  <div class="auth-form-wrap">
+    <h1>Login</h1>
+    <% if (error === 'invalid') { %>
+      <p class="form-error" role="alert">Incorrect username or password.</p>
+    <% } %>
+    <form method="post" action="/login" class="auth-form">
+      <label for="username">Username</label>
+      <input type="text" id="username" name="username" required autocomplete="username">
+
+      <label for="password">Password</label>
+      <input type="password" id="password" name="password" required autocomplete="current-password">
+
+      <button type="submit" class="btn btn-primary" data-testid="<%= tid('login-submit') %>">Log in</button>
+    </form>
+    <p>Seeded account: <code>qa_student</code> / <code>Passw0rd!</code></p>
+    <p>No account? <a href="/register">Register here</a>.</p>
+  </div>
+
+<%- include('partials/footer') %>

package/views/orders.ejs

@@ -0,0 +1,33 @@
+<%- include('partials/head', { title: 'Order history' }) %>
+<%- include('partials/header') %>
+
+  <h1>Order history</h1>
+  <p class="hint-text">This table is deliberately plain HTML — no ids, no classes, no data-testid — the way a lot of legacy internal tools actually look. Locate rows with XPath.</p>
+
+  <table>
+    <tr>
+      <td><b>Order</b></td>
+      <td><b>Date</b></td>
+      <td><b>Item</b></td>
+      <td><b>Qty</b></td>
+      <td><b>Total</b></td>
+      <td><b>Status</b></td>
+      <td></td>
+    </tr>
+    <% orders.forEach(function(o) { %>
+      <tr>
+        <td><%= o.id %></td>
+        <td><%= o.created_at %></td>
+        <td><%= o.item %></td>
+        <td><%= o.qty %></td>
+        <td><%= o.total.toFixed(2) %></td>
+        <td><%= o.status %></td>
+        <td><a href="/account/orders/<%= o.id %>/invoice" target="_blank" rel="noopener">Open invoice ↗</a></td>
+      </tr>
+    <% }); %>
+    <% if (orders.length === 0) { %>
+      <tr><td colspan="7">No orders yet.</td></tr>
+    <% } %>
+  </table>
+
+<%- include('partials/footer') %>

package/views/partials/footer.ejs

@@ -0,0 +1,18 @@
+  </main>
+
+  <footer class="site-footer">
+    <span>QA Copilot Lab — local practice target for the Playwright MCP for QA course</span>
+  </footer>
+
+  <script src="/js/cart.js"></script>
+  <script src="/js/accordion.js"></script>
+  <script src="/js/tabs.js"></script>
+  <script src="/js/star-rating.js"></script>
+  <script src="/js/toast.js"></script>
+  <script src="/js/confirm-dialog.js"></script>
+  <script src="/js/theme-toggle.js"></script>
+  <script src="/js/drag-drop.js"></script>
+  <script src="/js/autocomplete.js"></script>
+  <script src="/js/reveal-answer.js"></script>
+</body>
+</html>

package/views/partials/head.ejs

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title><%= typeof title !== 'undefined' ? title + ' · QA Copilot Lab' : 'QA Copilot Lab' %></title>
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body>