skip to content
e2e raised $8m to build the software verification layer for the agentic coding era
13.9kstar on github
all examples

Testing a drag-and-drop timetable planner with e2e

Course search, enrolment numbers, and dragging classes between time slots in a Vite and React timetable planner, tested with locators and the agent.

Community examples aren't actively verified by the e2e team so exercise extra caution when running.

End-to-end tests for MyTimetable, the drag-and-drop timetable planner for Adelaide University students, written with e2e. The suite runs against the app's own mock course API, so it needs no backend and no account.

What it tests

  • tests/welcome.e2e.ts: a first-time visitor opens the planner from the welcome screen.
  • tests/timetable.e2e.ts: locator tests for the planner:
    • add a course through the subject and course search
    • remove an enrolled course
    • list the class numbers to enrol in, in the "Ready for Enrolment" dialog
    • drag a workshop to another time, then check the new class number
  • tests/agentic.e2e.ts: the agent adds a course by its title and finds the class numbers to enrol in, from plain-English goals. A locator check follows each agent step. The drag stays in the locator test: its drop zones exist only while the pointer is held down, so the agent cannot see them before it drags.

Patterns worth copying

  • Drag and drop with hidden drop zones. The other times for a class only appear while a drag is held, so dragTo has no target yet. The test holds the pointer down with browser.mouse, waits for the drop zone, then releases it on that zone.
  • A button that never holds still. "Start scheduling!" pulses forever, so it never passes the stability check before a tap. The test taps the center of its box with screen.tapAt.
  • Skipping onboarding. browser.addInitScript sets the app's MTT.first-time flag before the page loads, as for a returning visitor.

Run

Use Node 22.22.3+, 24.8+, or 26+, and pnpm for the app. The suite is on the e2e-example branch of this fork:

terminal
git clone --branch e2e-example https://github.com/samanyudas/mytimetable.git
cd mytimetable
pnpm install
cd e2e
npm install
npm test

The runner starts the Vite dev server with VITE_API_BASE_URL=/mock at http://localhost:5173. It downloads Chromium on the first run if needed.

Agent tests

Set a Vercel AI Gateway key:

terminal
AI_GATEWAY_API_KEY="your-key" npm test

Without the key, the agent tests are skipped. Results are in .e2e/report.json, and each test's trace page is in .e2e/results/.

See e2e.config.ts and tests/ for the setup.

Last checked with e2e 0.23.1, @e2e-dev/web 0.16.0, and Node 26.

related examples

[ get started ]

your verificationlayerstarts withjust one command

npx e2e init