Start with the supplied playwright.spec.ts, then add the checks and setup your test needs.

Inspect the script

Open playwright.spec.ts from the shared artifact bundle. Compare it with the expected behavior in session.md, the numbered action sequence, and any limitations recorded by the tester. Review the generated file directly for locator risks, redacted values, omitted actions, and comments.

Prepare your test project

Use a project with Playwright Test and its browser dependencies installed. Follow the Playwright installation guide if you need a test project first.

Place a reviewed copy in the project’s test directory. Review the starting URL, authentication, input values, and data dependencies. The generated navigation does not recreate an already signed-in browser state.

Add fixtures or setup and cleanup for your application. Replace redacted values with approved test data. Review selectors and unsupported actions against the actual flow.

Keyboard actions and file-upload changes are omitted. Redacted inputs are skipped with comments, so add those steps using safe test data. Generated actions target the page; add frame locators for actions recorded inside iframes.

Add an expected result

Add assertions for the behavior you intended to check. Generated actions alone do not establish a pass. Use reliable automated tests for locator, wait, and repeatability guidance.

Adapt the sample recording

The sample ZIP includes a real playwright.spec.ts for the sticky Blocked tag. It imports test but no assertion helper, sets a 1920 × 907 viewport, opens the recorded public URL, creates a card, and performs the two lane changes. Completing those actions would not detect the reported bug.

Before running a copy in your test project:

1. Replace the recorded URL with your authorized test environment and provide a signed-in state for Pond Redesign or equivalent test data.
2. Create a uniquely named disposable card and arrange cleanup. The exported title QB-DEMO sticky Blocked can collide with earlier runs.
3. Replace positional nth-of-type locators and long style-class selectors with stable application locators. Scope the card by its unique identity across lane changes.
4. Review duplicate fills for #qb-title and #qb-points, plus the two clicks and check() on #qb-top. Preserve the intended final state when simplifying recorded events.
5. After moving into Blocked, assert that the card is in that lane and has the badge. After moving to In progress, assert both the new lane and absence of that card’s Blocked badge.

Wait for the destination card to appear before checking the badge is absent, so a missing card cannot produce a false pass. If persistence is part of the agreed behavior, reload and repeat the checks as an additional test; the supplied recording does not include a reload.

The HAR walkthrough gives the request and returned state to compare with your test. A successful HTTP response alone is not the regression assertion.

Run the adapted test

From a configured project, run the file using Playwright Test:

npx playwright test tests/playwright.spec.ts

Adjust the path to where you saved it. See Playwright’s command-line reference.

Read any failure before changing timeouts. Confirm the locator, page state, response, and expected assertion. Repeat from a clean state before adding the test to your suite. Recorder exports the retained segment only; earlier evicted actions must be supplied as setup where required.