# Drill Grounds — Product Requirements (v1.1)

Drill Grounds is a set of classic web practice pages: an index of twelve examples including form authentication with flash messages, add/remove elements, checkboxes, a bare dropdown, inputs, key presses, JavaScript dialogs, multiple windows, hovers, a sortable table, dynamic loading and HTTP status codes. Markup is deliberately plain so controls can be driven directly.

**Problem.** Anyone learning or validating web automation needs small, predictable pages with well-known behaviours: waits, native dialogs, new tabs, sorting, sessions and flash messages.

## Users
- **Automation learner** — Practise each interaction type on a page with a single, obvious behaviour.
- **Tool evaluator** — Check that a tool handles waits, dialogs, windows, hover and session flows correctly.

## Goals
- Every example behaves exactly as its heading and instructions say.
- Sessions and flash messages follow the classic one-shot pattern.
- Timed elements appear after a delay of about 2.5 seconds.

## Index (IDX)

Landing page linking every example.

- **FR-IDX-01** (Must) The index lists all twelve examples and each link opens its page with a 200 response.
  - Title "Drill Grounds"; heading "Welcome to drill-grounds"; sub-heading "Available Examples"
  - Links: Add/Remove Elements, Checkboxes, Dropdown, Dynamic Loading, Form Authentication, Hovers, Inputs, JavaScript Alerts, Key Presses, Multiple Windows, Status Codes, Sortable Data Tables
  - Footer "Powered by Drill Grounds"

## Form authentication (AUT)

Login page, secure area and flash messages.

- **FR-AUT-01** (Must) Valid credentials open the secure area with a green, dismissible flash.
  - Login page heading "Login Page" with Username, Password and "Login"
  - URL /drill-grounds/secure; flash "You logged into a secure area!"; heading "Secure Area"; button "Logout"
  - The flash close button (x) removes the flash
- **FR-AUT-02** (Must) Invalid credentials are refused with a red flash; the username is checked first (case-sensitive), then the password.
  - Unknown, differently cased or empty username: "Your username is invalid!"
  - Right username with a wrong password: "Your password is invalid!"
  - The login page is shown again
- **FR-AUT-03** (Must) The secure area requires a session; anonymous access is redirected to the login page with a flash shown only once.
  - Flash "You must login to view the secure area!"
  - Reloading the login page shows no flash
- **FR-AUT-04** (Should) Logout ends the session, returns to the login page and the secure area is protected again.
  - Flash "You logged out of the secure area!"
  - Opening /drill-grounds/secure redirects to login with "You must login to view the secure area!"

## Native controls (CTL)

Add/remove, checkboxes, dropdown, inputs and keys.

- **FR-CTL-01** (Should) Each click of "Add Element" adds a "Delete" button (class added-manually); each Delete removes itself.
  - 3 clicks give three buttons; deleting one leaves two; deleting all leaves none and "Add Element" still works
- **FR-CTL-02** (Should) Two checkboxes start unchecked and checked and toggle on click; state is not persisted.
  - "checkbox 1" unchecked, "checkbox 2" checked; after clicking both the reverse; reload restores the start state
- **FR-CTL-03** (Should) The dropdown is a bare select (id "dropdown", no label or ARIA) with a disabled placeholder; choosing an option sets its value.
  - Heading "Dropdown List"; placeholder "Please select an option" is disabled and cannot be re-selected
  - "Option 2" gives value "2"
- **FR-CTL-04** (Could) The number field accepts digits, signs and arrow keys only.
  - 12 then ArrowUp twice = 14
  - -3 then ArrowDown = -4
  - Typing "abc" leaves the field empty
- **FR-CTL-05** (Should) The key-press page reports the last key pressed in upper case.
  - "a" gives "You entered: A"; Enter gives "You entered: ENTER"; Escape gives "You entered: ESCAPE"; Shift gives "You entered: SHIFT"

## Browser features (BRW)

Dialogs, windows and hovers.

- **FR-BRW-01** (Must) Each JavaScript alert, confirm and prompt shows its native dialog and reports the outcome in Result.
  - Alert (text "I am a JS Alert"): "You successfully clicked an alert"
  - Confirm: dismiss "You clicked: Cancel"; accept "You clicked: Ok"
  - Prompt: typing hello gives "You entered: hello"; dismiss gives "You entered: null"
- **FR-BRW-02** (Should) "Click Here" opens a second tab that can be switched to and closed without affecting the first.
  - New tab /drill-grounds/windows/new titled "New Window" with heading "New Window"
  - Original tab still shows "Opening a new window"
- **FR-BRW-03** (Could) Each of three avatars shows its caption and a "View profile" link only while hovered.
  - Second avatar caption "name: user2"; other captions hidden; hidden again after moving away
- **FR-BRW-04** (Could) Each "View profile" link opens a profile page.
  - /drill-grounds/users/1 responds 200

## Sortable table (TBL)

Header sorting with direction toggle.

- **FR-TBL-01** (Should) Clicking a header sorts the rows and a second click reverses the order; text sorts alphabetically and Due sorts numerically.
  - Table #table1 columns Last Name, First Name, Email, Due, Web Site, Action; initial rows Smith, Bach, Doe, Conway
  - Last Name ascending: Bach, Conway, Doe, Smith; descending: Smith, Doe, Conway, Bach
  - Due ascending: $50.00, $50.00, $51.00, $100.00; descending starts with Doe $100.00 then Bach $51.00

## Dynamic loading (DYN)

Waits for delayed content.

- **FR-DYN-01** (Should) Example 1 contains a hidden element that becomes visible after the loader.
  - Heading "Example 1: Element on page that is hidden"; #finish exists but hidden
  - Start shows "Loading... " and hides Start; after about 2.5 s "Hello World!" is visible and the loader hidden
- **FR-DYN-02** (Should) Example 2 renders its element only after the loader finishes.
  - Heading "Example 2: Element rendered after the fact"; no #finish before Start
  - "Hello World!" appears after about 2.5 s
- **FR-DYN-03** (Could) An example number that does not exist responds 404.
  - /drill-grounds/dynamic_loading/3 returns HTTP 404

## Status codes (STA)

Pages returning chosen HTTP statuses.

- **FR-STA-01** (Should) Each status link returns the status it names with a body naming it and a link back; unsupported codes return 404.
  - Links 200, 301, 404, 500 return HTTP 200, 301, 404, 500
  - Body "This page returned a <code> status code."
  - /drill-grounds/status_codes/418 returns 404 and the body says 404

## Glossary and rules

- **Flash** — A one-shot message shown after a redirect and gone on the next page view.

## Out of scope

- Visual styling
- Examples not listed on the index