Setup

The demo in the webinar used GitHub Copilot in agent mode and Claude Sonnet 4.

The following MCP servers were installed:

• context7
• Playwright

Prompts

Some of the prompts are tailed to the local e-commerce example shown in the webinar. Tweak them to your needs.

Access Playwright docs via context7

How can I check if an element is visible in Playwright? #context7 What’s Playwright auto-waiting about? #context7 What’s the recommended way to locate elements? #context7

Get project information

I’m new to this project. I want to create end-to-end tests with Playwright. Please summarize possible pages and API routes and where they are defined. Don’t share more information. Please write the result to setup.md.

Create a test plan

Can you navigate to localhost:3000 using Playwright MCP and scan the homepage and core functionality? Please create a end-to-end testing plan with Playwright. Don't write any code yet, I just want to have an idea of what I could test. Use the information in #setup.md. Write the test plan to testplan.md and include three actionable test scenarios (including search). Don’t include additional information.

Generate a test with AI

Here's a Playwright test case scenario:

[YOUR DETAILED TEST CASE SCENARIO]

Can you execute the test plan using Playwright MCP. Once you're done please generate a Playwright test case in tests/webinar/search.spec.ts. The test case should include the test case scenario on top as comments.

Refactor existing code

Hey, can you bring in test steps? Please use Playwrights test.step() method.

Could you look at the generated file and extract locators to place them into variables?

Can you extract the hardcoded price and assign it to a variable?

Refactor code to use page object models

Please use Playwright MCP to run the test scenario defined in tests/webinar/search.spec.ts. Please refactor the existing test to use proper page object models located in tests/webinar/poms. Don’t change the existing functionality and don’t create new tests.

Check code quality

Could you please look at the page object models in #file:poms and verify that they're following best practices? #context7

Parse an existing API endpoint and create a test for it

There’s also an API route to fetch products. Can you create one Playwright test in tests/webinar/api.spec.ts to validate the GET call, too? Please read the source code, run the test and verify the result automatically. Fix it if needed. #file:setup.md