2 / 11
Playwright

Create a card through the modal dialog

Easy30 pts~2 min
  • Modal dialogs
  • Form validation
  • Checkboxes
  • Dropdowns
Practice app · TaskBoard

A team kanban board: sign-in, four columns with WIP limits, a create-card dialog, pointer-based drag and drop, inline title editing, a right-click card menu with archive and undo, delete confirmation, search, keyboard shortcuts, a native reset confirm and an activity log.

Test URL
/lab/playwright-taskboard-create-card

Your starter code already declares TEST_URL — never hardcode a host.

Objective

Open the Create card dialog, confirm that an empty title is rejected, then create a labelled, assigned card in the Review column.

Your task

  1. 1Open TEST_URL (you are already signed in) and click #new-card-button.
  2. 2Wait for the dialog #new-card-modal and click #create-card-submit without typing a title.
  3. 3Assert #card-title-error reads “Title is required”.
  4. 4Type “Add dark mode toggle” into #card-title and “Respect the operating system theme” into #card-description.
  5. 5Tick #label-feature and #label-design, choose High in #card-priority, Priya Nair in #card-assignee and Review in #card-column.
  6. 6Click #create-card-submit and assert the dialog closes and the new card TB-112 appears in the Review column (#column-review-cards).

Acceptance criteria

  • The dialog is closed.
  • Card TB-112 “Add dark mode toggle” is in the Review column with the Feature label and High priority.
  • The Review column count is 3.
  • The test asserts the validation error and the new card.

Fixtures

Email
lead@taskboard.test
Password
Board@2026
Signed-in member
Maya Lin (Project lead)
Board
Website Relaunch, 11 cards (TB-101 to TB-111); new cards get TB-112, TB-113…
Today’s date
Tuesday 10 November 2026 (due dates are relative to it)
Team
Maya Lin, Diego Alvarez, Priya Nair, Sam Okafor, Lena Fischer

Playwright · Playwright Challenges · TaskBoard