Playwright

Locators can be [chained](https://playwright.dev/docs/locators#chaining-locators) to narrow down the search to a particular part of the page.

Use [codegen](https://playwright.dev/docs/codegen-intro#running-codegen) to quickly write tests

`const product = page.getByRole('listitem').filter({ hasText: 'Product 2' });`

- [Locate parent element](https://playwrightsolutions.com/how-do-you-locate-the-parent-of-an-element-with-playwright/)

[Set up watch mode to rerun the associated test upon save](https://infinite-table.com/blog/2024/04/18/the-best-testing-setup-for-frontends-playwright-nextjs#step-4---adding-watch-mode) (this assumes the test file and the test are in the same dir)

[Playwright automatically traverses the shadow DOM](https://testersdock.com/playwright-shadow-dom/).

**NOTE**: If you call expect, but forget to import `expect`, it will fail the test, but won't tell you why. 🤬

[Use project dependencies for running login once](https://github.com/debs-obrien/playwright-project-dependencies)

[Fail test if there's a console log](https://twitter.com/housecor/status/1706287362366484854)

## npm scripts
"start:codegen": "concurrently npm:start-mocked npm:codegen",
"codegen": "playwright codegen --load-storage=storageState.json http://localhost:3000",

Start by reviewing the project's existing documentation and the npm scripts named in the issue, especially start:codegen and codegen. The issue does not identify a target file, specific change, tests, or acceptance criteria, so the completed state cannot be determined without clarifying the scope.

Written by the indexing model from the issue text.