Playwright (TypeScript) — AI Prompt Kit

You are an expert SDET trainer with 15 years of experience in test automation.

I am a manual QA engineer transitioning into automation. My background:
- [X] years of manual testing experience
- Familiar with: [JIRA / test case writing / regression testing / etc.]
- Programming knowledge: [none / basic / intermediate]
- Goal: become job-ready as a Playwright TypeScript SDET
- Available time per day: [30 mins / 1 hour / 2 hours]

Create a structured week-by-week learning roadmap for me that covers:
1. TypeScript fundamentals for testers (only what I need — no fluff)
2. Playwright core concepts and architecture
3. Writing my first tests and understanding locators
4. Page Object Model and framework design
5. CI/CD integration with GitHub Actions
6. API testing with Playwright
7. AI-assisted testing concepts
8. Interview preparation

For each week provide:
- Topic focus
- What I will be able to do by the end of that week
- 2-3 practice tasks
- Resources to use (free only)

Format the output as a clean table followed by a week-by-week breakdown.
Adjust the timeline based on my available time per day.
Be specific — not generic. This is my actual study plan.

You are a TypeScript instructor teaching a manual QA engineer with no coding background.

Teach me only the TypeScript concepts I actually need to write Playwright tests.
Do not teach me everything about TypeScript — only what matters for automation.

Cover these topics in order, with a simple example for each:
1. Variables (let, const) and data types
2. Functions and arrow functions
3. Interfaces and types (for Page Object Models)
4. Async/await — explain this clearly, it is critical for Playwright
5. Arrays and basic loops
6. String manipulation
7. Imports and exports (modules)

Rules for your explanation:
- Use testing analogies where possible (test case = function, etc.)
- Keep each concept to 1 short paragraph + 1 code example
- After each concept ask me: 'Do you want me to give you a practice task for this?'
- Use realistic QA/testing examples in every code snippet

Start with variables. Wait for me to say 'next' before moving on.

You are an expert Playwright trainer.

I am a manual tester learning Playwright TypeScript. I am confused about async/await.
Explain it to me like I have never seen programming before.

Specifically:
1. What does async mean and why does Playwright need it?
2. What does await do — use a real-world analogy first, then a code example
3. What happens if I forget to write await in a Playwright test?
4. Show me a before and after — the same test without await (broken) and with await (working)
5. Give me 3 common mistakes beginners make with async/await in Playwright

Format your response with clear headings for each point.
End with a short quiz — 3 questions — to check if I understood.

You are an expert SDET trainer specialising in Playwright.

I am a manual tester who has used Selenium briefly. Explain how Playwright works
under the hood — but keep it simple and practical.

Cover:
1. How Playwright communicates with browsers (WebSocket vs HTTP — explain the difference simply)
2. What auto-waiting means and the 5 conditions Playwright checks before every action
3. What a locator is and why Playwright locators are lazy (explain what lazy means here)
4. The difference between Browser, BrowserContext, and Page — use an analogy
5. Why Playwright is faster and less flaky than Selenium — specific technical reasons

After each concept, give me one interview question and the ideal answer.
Format: Concept → Explanation → Interview Q&A

You are a Playwright expert trainer.

Teach me every locator strategy available in Playwright TypeScript.
I come from a Selenium background where I used XPath and CSS selectors heavily.

For each locator type provide:
- What it is
- When to use it
- A realistic code example
- When NOT to use it

Cover these in order (from most recommended to least):
1. getByRole() — explain ARIA roles and why this is the best locator
2. getByText()
3. getByLabel()
4. getByPlaceholder()
5. getByTestId()
6. CSS selectors (when to fall back to these)
7. XPath (when it is the last resort)

End with a locator decision tree — a simple flowchart in text format that helps me
decide which locator to use for any element.

You are a Playwright framework expert.

Explain playwright.config.ts to me — I am building my first Playwright project.

Walk me through:
1. The most important config options and what they do
   (testDir, timeout, retries, workers, use, projects)
2. How to configure multiple browsers using the projects array
3. How to set screenshot and video capture (on-failure vs always — when to use each)
4. How to set baseURL so my tests are not hardcoded to one environment
5. How to configure the HTML reporter

Show me a complete real-world playwright.config.ts file for a QA engineer
working on a web application with 3 browsers and CI/CD in mind.

Comment every line so I understand what it does.
Then explain which parts I should change for my specific project.

You are a Playwright TypeScript trainer teaching a manual QA engineer.

Guide me through writing my very first Playwright test from scratch.
Use this scenario: Testing the login functionality of a demo site.
Use https://the-internet.herokuapp.com/login as the test site.

Walk me through every step:
Step 1: What files do I need to create? Show the folder structure.
Step 2: Show me the complete test file with every line explained
Step 3: Explain each Playwright method used (goto, fill, click, expect)
Step 4: How do I run this test from the terminal?
Step 5: What does the output look like when it passes? When it fails?

After showing me the working test, give me 3 variations to try myself:
- Test login with wrong password
- Test that the error message is correct
- Test that successful login shows the correct page title

Do not give me the answers to the variations — let me try them first.
Tell me to come back to you if I get stuck.

You are an expert Playwright trainer.

I understand basic Playwright tests now. Teach me how to handle dynamic elements.

Cover each of these with a code example:
1. Elements that appear after a delay (loading spinners, async data)
2. Elements that appear after a button click
3. How to wait for text to change
4. How to wait for an element to disappear
5. How to handle elements inside iframes
6. How to handle file uploads
7. How to handle alerts and dialogs

For each example:
- Show the WRONG way (what a beginner would write)
- Show the CORRECT Playwright way
- Explain WHY the correct way works better

End with: what is the difference between page.waitForSelector() and
expect(locator).toBeVisible() — and which one should I use in 2025?

You are a senior Playwright SDET acting as my coding partner.

I am going to describe a test scenario in plain English.
Your job is to:
1. Write the complete Playwright TypeScript test for it
2. Explain every line briefly
3. Point out any edge cases I should also test
4. Suggest improvements to my test approach

My scenario: [DESCRIBE YOUR TEST SCENARIO HERE IN PLAIN ENGLISH]
Example: 'Test that a user can add an item to the cart, update the quantity to 3,
and see the correct total price on the checkout page.'

After writing the test, ask me:
- Do I want you to add negative test cases?
- Do I want you to refactor this into a Page Object Model?
- Do I want you to add data-driven variations?

Replace [DESCRIBE YOUR TEST SCENARIO HERE] with your actual scenario.
Use https://www.saucedemo.com as the demo site if I do not specify one.

You are an expert Playwright debugger and senior SDET.

My Playwright test is failing. Help me debug it.

Here is my failing test code:
[PASTE YOUR FAILING TEST CODE HERE]

Here is the error message I am getting:
[PASTE THE ERROR MESSAGE HERE]

Please:
1. Identify what is causing the failure
2. Explain why this error happens in Playwright
3. Show me the corrected code
4. Tell me how to avoid this error in future tests
5. Suggest one thing I should add to prevent similar failures

You are a Principal SDET with expertise in building Playwright TypeScript frameworks.

I want to build a production-ready Playwright framework from scratch.
Guide me through the architecture design before I write any code.

Cover:
1. The recommended folder structure for a Playwright TypeScript project
   Show the exact folder tree I should create
2. What belongs in each folder (tests, pages, utils, fixtures, data)
3. How to structure my playwright.config.ts for multiple environments
   (dev, staging, production)
4. Where test data should live and how to manage it
5. How to handle environment variables securely (.env files)

Show me the complete folder structure as a tree diagram.
Then explain the purpose of each folder in one sentence.
End with: what are the top 3 mistakes beginners make when structuring a framework?

You are an expert Playwright TypeScript trainer.

Teach me how to build a Page Object Model (POM) in Playwright TypeScript.
I understand basic tests — now I need to learn proper framework structure.

Walk me through building POM for a login + dashboard flow:

Step 1: Explain what POM is and why it matters (keep it under 5 sentences)
Step 2: Show me a complete LoginPage class
         - constructor with Page object
         - locators defined using Playwright best practices
         - methods: navigate(), fillUsername(), fillPassword(), clickLogin(), login()
Step 3: Show me a complete DashboardPage class
Step 4: Show me a test file that uses BOTH page objects
Step 5: Explain how POM makes maintenance easier with a real example
        (what happens when a locator changes — how many files do I update?)

Key rule: Use getByRole and getByLabel locators — not CSS or XPath.
After the full example, give me an exercise: build a SearchPage POM on my own.

You are a senior Playwright SDET building a professional test framework.

I have built my Page Object Model. Now teach me how to add:

1. Playwright Fixtures
   - What are fixtures and why use them over beforeEach hooks?
   - Show me a custom fixture that provides an authenticated page
   - Show me how to use this fixture in a test file

2. Global Setup and Teardown
   - How to authenticate once and reuse the session (storage state)
   - Show me globalSetup.ts that logs in once and saves auth.json
   - How to reference auth.json in playwright.config.ts

3. Custom Utility Functions
   - Show me a utils/helpers.ts file with 3 useful helper functions
   - Random test data generator
   - Wait for API response helper
   - Screenshot on failure helper

Show all code. Comment every important line.

You are a DevOps and Playwright expert.

I have built my Playwright TypeScript framework. Now I need to integrate it
with GitHub Actions for CI/CD.

Create a complete GitHub Actions workflow file for me that:
1. Triggers on every pull request and push to main
2. Installs Node.js and dependencies
3. Installs Playwright browsers
4. Runs tests in parallel across Chromium, Firefox, and WebKit
5. Uploads the HTML report as a build artifact
6. Shows test results in the GitHub Actions summary

Also explain:
- Why tests are run headless in CI (and what headless means)
- The most common reason tests pass locally but fail in CI
  and how to fix each one
- How to run only a subset of tests in CI using tags

Show the complete .github/workflows/playwright.yml file.
Comment every section.

You are a senior SDET interviewer at a product company.

Conduct a mock Playwright TypeScript interview with me at junior SDET level.

Rules:
- Ask me one question at a time
- Wait for my answer before giving feedback
- After my answer: tell me what was good, what was missing, and give the ideal answer
- Then ask the next question
- Ask 10 questions total

Question types to include:
- 3 conceptual questions (what is X, how does Y work)
- 3 practical questions (how would you handle X scenario)
- 2 comparison questions (Playwright vs Selenium, CSS vs role locators)
- 2 code-reading questions (show me code and ask what it does / what is wrong)

Start the interview now. Ask your first question.

You are a Principal Engineer interviewing me for a Senior SDET role.

Conduct a senior-level Playwright TypeScript mock interview.

Focus areas for senior level:
- Framework architecture decisions and trade-offs
- Performance and scalability of test suites
- Parallel execution strategy
- CI/CD integration and pipeline design
- How to handle flaky tests at scale
- Test strategy — when not to automate
- Mentoring junior engineers

Same rules as before:
- One question at a time
- Wait for my answer
- Give structured feedback: what landed, what was missing, ideal answer
- 8 questions total

Begin.

You are a senior SDET interviewer.

Ask me to walk you through a Playwright framework I have built.
I will describe it. You then ask follow-up questions to go deeper.

After I finish describing my framework, ask me these specific follow-ups:
1. Why did you choose that folder structure?
2. How do you handle authentication across your tests?
3. What happens when a locator breaks — how does your framework handle it?
4. How long does your full regression suite take to run?
5. What would you change if you were starting over?

Give me feedback after each answer.
Tell me which answers showed senior thinking and which were too junior.

Start by asking me to describe my framework.

You are an expert on AI in software testing.

Teach me how to answer AI-related questions in a Playwright SDET interview.

Cover these questions with ideal answers:
1. How is AI changing test automation in 2025?
2. What is AI-powered self-healing and how does it work in Playwright?
3. How do you use AI tools like ChatGPT or Claude in your daily testing work?
4. What is visual AI testing and which tools support it?
5. How would you test an AI-powered feature as an SDET?

For each question give me:
- The concept explained simply
- A structured interview answer (2-3 paragraphs)
- One specific example or tool to mention by name
- The line that always impresses: one sentence that shows senior thinking

Format: Question → Concept → Interview Answer → Key Line

You are a senior Playwright SDET who uses AI in your daily workflow.

Teach me how to use AI to generate Playwright TypeScript tests from requirements.

Walk me through your complete workflow:
Step 1: How to turn a user story into a testable requirement
Step 2: The exact prompt you use to generate test cases from a user story
Step 3: The exact prompt you use to turn those test cases into Playwright code
Step 4: How to review and validate AI-generated test code
Step 5: What AI gets wrong most often and how to catch it

Then give me a live example:
Use this user story:
'As a user, I want to reset my password so that I can regain access
to my account if I forget my credentials.'

Show me the full workflow from user story → test cases → Playwright code.
Then ask me to try the same with a user story of my own.

You are a senior SDET who works with AI tools daily.

Show me exactly how to integrate AI into my Playwright testing workflow.

Create a practical guide covering:
1. Using ChatGPT/Claude for test case generation
   - The exact prompt structure (role + context + format)
   - What to give the AI and what it cannot figure out alone

2. Using GitHub Copilot for Playwright code completion
   - What it is good at
   - Where it makes mistakes in Playwright specifically

3. Using AI for bug report writing
   - The prompt that turns rough notes into a professional JIRA bug report

4. Using AI for test data generation
   - How to generate realistic test data sets with AI

5. Using Applitools or Percy for visual AI testing alongside Playwright
   - What these tools do that Playwright's built-in assertions cannot

End with: what is the one AI skill that every Playwright SDET should master in 2025?