Sales: contact@spurqlabs.com

HR: hr@spurqlabs.com

Book A Demo
Zero Code, Zero Headache – How to do Manual Testing with Playwright MCP?

Zero Code, Zero Headache – How to do Manual Testing with Playwright MCP?

by | Oct 3, 2025 | Blog

Manual Testing with Playwright MCP – Have you ever felt that a simple manual test should be less manual?

For years, quality assurance relied on pure human effort to explore, click, and record. But what if you could perform structured manual and exploratory testing, generate detailed reports, and even create test cases—all inside your Integrated Development Environment (IDE), using zero code? 

I’ll tell you this: there’s a tool that can help us perform manual testing in a much more structured and easy way inside the IDE: Playwright MCP. 

Section 1: End the Manual Grind – Welcome to AI-Augmented QA 

The core idea is to pair a powerful AI assistant (like GitHub Copilot) with a tool that can control a real browser (Playwright MCP). This simple setup is done in only a few minutes. 

The Essential Setup for Manual Testing with Playwright MCP: Detailed Steps

  • For this setup, you will integrate Playwright MCP as a tool that your AI agent can call directly from VS Code. 

1. Prerequisites (The Basics) 

  • VS Code installed in your system. 
  • Node.js (LTS version recommended) installed on your machine. 

2. Installing GitHub Copilot (The AI Client) 

  • Open Extensions: In VS Code, navigate to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X). 
  • Search and Install: Search for “GitHub Copilot” and “GitHub Copilot Chat” and install both extensions. 
Manual testing Copilot
  • Authentication: Follow the prompts to sign in with your GitHub account and activate your Copilot subscription. 
    • GitHub Copilot is an AI-powered code assistant that acts almost like an AI pair programmer. 

        After successful installation and Authentication, you see something like below  

Github Copilot

3. Installing the Playwright MCP Server (The Browser Tool) 

Playwright MCP (Model Context Protocol): This is the bridge that provides browser automation capabilities, enabling the AI to interact with the web page. 

  • The most direct way to install the server and configure the agent is via the official GitHub page: 
  • Navigate to the Source: Open your browser and search for the Playwright MCP Server official GitHub page (https://github.com/microsoft/playwright-mcp). 
  • The One-Click Install: On the GitHub page, look for the Install Server VSCode button. 
Playwright MCP Setup
  • Launch VS Code: Clicking this button will prompt you to open Visual Studio Code. 
VS Code pop-up
  • Final Step: Inside VS Code, select the “Install server” option from the prompt to automatically add the MCP entry to your settings. 
MCP setup final step
  • To verify successful installation and configuration, follow these steps: 
    • Click on “Configure Tool” icon 
Playwright Configuration
  • After clicking on the “configure tool “ icon, you see the tools of Playwright MCP as shown in the below image. 
Playwright tool
Settings Icon
  • After clicking on the “Settings” icon, you see the “Configuration (JSON)” file of Playwright MCP, where you start, stop, and restart the server as shown in image below 
{
    "servers": { 
        "playwright": { 
            "command": "npx", 
            "args": [ 
                "@playwright/mcp@latest" 
            ], 
            "type": "stdio" 
        } 
    }, 
    "inputs": [] 
}

1. Start Playwright MCP Server: 

Playwright MCP Server

After the Playwright MCP Server is successfully configured and installed, you will see the output as shown below. 

Playwright MCP Server

2. Stop and Restart Server

Playwright MCP Start Stop Restart Server

This complete setup allows the Playwright MCP Server to act as the bridge, providing browser automation capabilities and enabling the GitHub Copilot Agent to interact with the web page using natural language. 

Section 2: Phase 1: Intelligent Exploration and Reporting 

The first, most crucial step is to let the AI agent, powered by the Playwright MCP, perform the exploratory testing and generate the foundational report. This immediately reduces the tester’s documentation effort. 

Instead of manually performing steps, you simply give the AI Agent your test objective in natural language. 

The Exploration Workflow: 

  1. Exploration Execution: The AI uses discrete Playwright MCP tools (like browser_navigate, browser_fill, and browser_click) to perform each action in a real browser session. 
  2. Report Generation: Immediately following execution, the AI generates an Exploratory Testing Report. This report is generated on the basis of the exploration, summarizing the detailed steps taken, observations, and any issues found. 

Our focus is simple: Using Playwright MCP, we reduce the repetitive tasks of a Manual Tester by automating the recording and execution of manual steps. 

Execution Showcase: Exploration to Report 

Input (The Prompt File for Exploration) 

This prompt directs the AI to execute the manual steps and generate the initial report. 

Prompt for Exploratory Testing

Exploratory Testing: (Use Playwright MCP) 

Navigate to https://www.demoblaze.com/. Use Playwright MCP Compulsory for Exploring the Module <Module Name> and generate the Exploratory Testing Report in a .md file in the Manual Testing/Documentation Directory.

Output (The Generated Exploration Report) 
The AI generates a structured report summarizing the execution. 

Exploratory Testing Report

Live Browser Snapshot from Playwright MCP Execution 

Live Browser

Section 3: Phase 2: Design, Plan, Execution, Defect Tracking 

Once the initial Exploration Report is generated, QA teams move to design specific, reusable assets based on these findings. 

1. Test Case Design (on basis of Exploration Report) 

The Exploration Report provides the evidence needed to design formal Test Cases. The report’s observations are used to create the Expected Results column in your CSV or Test Management Tool. 

  • The focus is now on designing reusable test cases, which can be stored in a CSV format. 
  • These manually designed test cases form the core of your execution plan. 
  • We need to provide the Exploratory Report for References at the time of design test Cases.  
  • Drag and drop the Exploratory Report File as context as shown in the image below.
Drag File
Dropped File

Input (Targeted Execution Prompt) 

This prompt instructs the AI to perform a single, critical verification action from your Test Case.

Role: Act as a QA Engineer. 
Based on Exploratory report Generate the Test cases in below of Format of Test Case Design Template 
======================================= 
🧪 TEST CASE DESIGN TEMPLATE For CSV File 
======================================= 
Test Case ID – Unique identifier for the test case (e.g., TC_001) 
Test Case Title / Name – Short descriptive name of what is being tested 
Preconditions / Setup – Any conditions that must be met before test execution 
Test Data – Input values or data required for the test 
Test Steps – Detailed step-by-step instructions on how to perform the test 
Expected Result – What should happen after executing the steps 
Actual Result – What happened (filled after execution) 
Status – Pass / Fail / Blocked (result of the execution) 
Priority – Importance of the test case (High / Medium / Low) 
Severity – Impact level if the test fails (Critical / Major / Minor) 
Test Type – (Optional) e.g., Functional, UI, Negative, Regression, etc. 
Execution Date – (Optional) When the test was executed 
Executed By – (Optional) Name of the tester 
Remarks / Comments – Any additional information, observations, or bugs found 

Output (The Generated Test cases) 

The AI generates structured test cases. 

Test Case Design

2. Test Plan Creation 

  • The created test cases are organized into a formal Test Plan document, detailing the scope, environment, and execution schedule. 

Input (Targeted Execution Prompt) 

This prompt instructs the AI to perform a single, critical verification action from your Test Case. 2

Role: Act as a QA Engineer.
- Use clear, professional language. 
- Include examples where relevant. 
- Keep the structure organized for documentation. 
- Format can be plain text or Markdown. 
- Assume the project is a web application with multiple modules. 
generate Test Cases in Form Of <Module Name >.txt in Manual Testing/Documentation Directory  
Instructions for AI: 
- Generate a complete Test Plan for a software project For Our Test Cases 
- Include the following sections: 
  1. Test Plan ID 
  2. Project Name 
  3. Module/Feature Overview 
  4. Test Plan Description 
  5. Test Strategy (Manual, Automation, Tools) 
  6. Test Objectives 
  7. Test Deliverables 
  8. Testing Schedule / Milestones 
  9. Test Environment 
  10. Roles & Responsibilities 
  11. Risk & Mitigation 
  12. Entry and Exit Criteria 
  13. Test Case Design Approach 
  14. Metrics / Reporting 
  15. Approvals 

Output (The Generated Test plan) 

The AI generates structured test plan of designed test cases. 

Test Plan

3. Test Cases Execution 

This is where the Playwright MCP delivers the most power: executing the formal test cases designed in the previous step. 

  • Instead of manually clicking through the steps defined in the Test Plan, the tester uses the AI agent to execute the written test case (e.g., loaded from the CSV) in the browser. 
  • The Playwright MCP ensures the execution of those test cases is fast, documented, and accurate. 
  • Any failures lead to immediate artifact generation (e.g., defect reports). 

Input (Targeted Execution Prompt) 

This prompt instructs the AI to perform a single, critical verification action from your Test Case. 

Use Playwright MCP to Navigate “https://www.demoblaze.com/” and Execute Test Cases attached in context and Generate Test Execution Report.

First, Drag and drop the test case file for references as shown in the image below.

Test case file

Live Browser Snapshot from Playwright MCP Execution

Nokia Execution

Output (The Generated Test Execution report) 

The AI generates structured test execution report of designed test cases. 

Test Execution Report

4. Defect Reporting and Tracking  

If a Test Case execution fails, the tester immediately leverages the AI Agent and Playwright MCP to generate a detailed defect report, which is a key task in manual testing. 

Execution Showcase: Formal Test Case Run (with Defect Reporting) 

We will now execute a Test Case step, intentionally simulating a failure to demonstrate the automated defect reporting capability. 

Input (Targeted Execution Prompt for Failure) 

This prompt asks the AI to execute a check and explicitly requests a defect report and a screenshot if the assertion fails. 

Refer to the test cases provided in the Context and Use Playwright MCP to execute the test, and if there is any defect, then generate a detailed defect Report. Additionally, I would like a screenshot of the defect for evidence.
Playwright MCP to Execute the test

Output (The Generated Defect report and Screenshots as Evidence) 

The AI generates a structured defect report of designed test cases. 

Playwright Defect Report
Playwright MCP output file evidence

Conclusion: Your Role is Evolving, Not Ending 

Manual Testing with Playwright MCP is not about replacing the manual tester; it’s about augmenting their capabilities. It enables a smooth, documented, and low-code way to perform high-quality exploratory testing with automated execution. 

  • Focus on Logic: Spend less time on repetitive clicks and more time on complex scenario design. 
  • Execute Instantly: Use natural language prompts to execute tests in the browser. 
  • Generate Instant Reports: Create structured exploratory test reports from your execution sessions. 
  • Future-Proof Your Skills: Learn to transition seamlessly to an AI-augmented testing workflow. 

It’s time to move beyond the traditional—set up your Playwright MCP today and start testing with the power of an AI-pair tester! 

Best Practices for Writing Effective Test Cases

Best Practices for Writing Effective Test Cases

by | May 9, 2025 | Blog

Writing effective test cases is crucial for ensuring software quality and reliability. A well-structured test case not only helps identify defects but also ensures that the software behaves as expected under various conditions. Below are best practices and guidelines for writing clear, concise, reusable, and comprehensive test cases. 

What is a Test Case?

A tester uses a specific set of conditions or variables to determine whether a system, software application, or one of its features works as intended.

Example: You are testing the Login pop-up of the leading E-commerce platforms. You’ll need several test cases to check if all features of this page are working smoothly.  

Writing Test Cases

Steps to ask yourself 3 questions Before You Write Effective Test Case: 

  1. Choose your approach to test case design: your approach influences your test case design. Are you doing black box testing (you don’t have access to the code source) or white box testing (you have access to the source code)? Are you doing manual testing or automation testing?  
  2. Choose your tool/framework for test case authoring: are you using frameworks or tools to test? What level of expertise do these tools/frameworks require?  
  3. Choose your execution environment: this ties up closely with your test strategy. Do you want to execute across browsers/OS/environments? How can you incorporate that into your test script? 

Once all those 3 questions have been answered, you can start the test case design and eventually test authoring. It’s safe to say that 80% of writing a test case belongs to the planning and designing part, and only 20% is actually scripting. Writing effective test case design is key to achieving good test coverage. 

How to Design a Effective Test Case? 

Write effective test cases – when we don’t need to understand the details of how the software works, we focus on checking if it meets user expectations. We explore the system to come up with test ideas. However, this approach can result in limited testing, as we might overlook features with unusual behaviour. 

In that case, here are some techniques for you to design your test cases: 

  • Equivalence Class Testing: In Equivalence Class Testing, you divide input data into groups and treat all values in each group the same way.

Example: For an age input field that accepts ages from 18 to 65, you can choose 3 values for 3 equivalence classes and test with one value from each group. That means you have 3 test cases. You can choose: 

17 (below 18-65 range) 
30 (within 18-65 range) 
70 (above 18-65 range) 

  • Boundary Value Analysis: this is a more granular version of equivalence class testing. Here you test values at the edges of input ranges to find errors at the boundaries. 

Example: For an age input that accepts values from 18 to 65, you choose up to 6 values to test (which means you have 6 test cases):  

17 (just below) 
18 (at the boundary) 
19 (just above) 
64 (just below) 
65 (at the boundary) 
66 (just above) 

  • Decision Table Testing: you use a table to test different combinations of input conditions and their corresponding actions or results.

Example: Here’s a decision table for a simple loan approval system. Specifically, the system approves or denies loans based on two conditions: the applicant’s credit score and the applicant’s income. From this table, you can write 6 test cases.

Rules of Test Cases

How to write effective Test Case 

Standard Test Case Format

To write effective test cases, we use a test case to check if a feature or function in an app works properly. It has details like conditions, inputs, steps, and expected results. A good test case makes testing easy to understand, repeat, and complete. 

Components of a Standard Effective Test Case 

Test Case ID: Give a unique ID like “TC001” or “LOGIN_001” to every test case. This helps in tracking. 

Test Case Description: Write a short description of what the test case tests. For example, “Test login with correct username and password.” 

Preconditions: Mention any setup needed before starting.  

Test Data: List the inputs for the test. Like, “Username: test_user, Password: Test@123.” 

Test Steps: Write step-by-step actions for the test. Keep it clear and simple. 

Expected Results: Describe what should happen if everything works. For example, “User logs in and sees the dashboard.” 

Actual Results: Note what happened during the test. This is written after running the test. 

Pass/Fail Status: Mark if the test passed or failed by comparing expected and actual results. 

Remarks/Comments: Add any extra info like problems faced, defect IDs, or special notes. 


Example of a Standard Test Case Format 

Test Case Components

How to write effective test cases: A step-by-step guide

If I explain to you in just a two-line summary of how to write an effective manual test case, it would be:

1. Identify the feature or functionality you wish to test.
2. Next, create a list of test cases that define specific actions to validate the functionality. Now, let’s explore the detailed steps for writing test cases. 

Step 1 – Test Case ID: 

Additionally, assign a unique identifier to the test case to help the tester easily recall and identify it in the future.

Example: TC-01: Verify Login Functionality for a User 

Step 2 – Test Case Description:

We will describe the test case, explaining its purpose and expected behaviour. For example: 

Test Case Description: Logging into the application 
Given: A valid username and password 
When: User enters credentials on the login page 
Then: User logs in successfully and is directed to the home page. 

Step 3 – Pre-Conditions: 

We will document any pre-conditions needed for the test, such as specific configuration settings. 

Step 4 – Test Steps: 

We will document the detailed steps necessary to execute the test case. This includes deciding which actions should be taken to perform the test and also possible data inputs. 

Example steps for our login test: 

  1. Launch the login application under test. 
  2. Enter a valid username and password in the appropriate fields. 
  3. Click the ‘Login’ button. 
  4. Verify that the user has been successfully logged in. 
  5. Log out and check if the user is logged out of the system. 

Step 5 – Test Data: 

We will define any necessary test data. For example, if the test case needs to test that login fails for incorrect credentials, then test data would be a set of incorrect usernames/passwords. 

Step 6 – Expected Result: 

Next, we will provide the expected result of the test, which the tester aims to verify. For example, here are ways to define expected results:

  1. A user should be able to enter a valid username and password and click the login button. 
  2. The application should authenticate the user’s credentials and grant access to the application. 
  3. The invalid user should not be able to enter the valid username and password; click the login button. 
  4. The application should reject the user’s credentials and display an appropriate error message. 

Step 7 – Post Condition:

The tester is responsible for any cleanup after the test, including reverting settings and removing files created during the test. For example: 

  1. Successful login with valid credentials. 
  2. Error message for invalid credentials. 
  3. Secure storage of user credentials. 
  4. Correct redirection after login. 
  5. Restricted access to pages without login. 
  6. Protection against unauthorized data access. 

Step 8 – Actual Result: 

We will document the actual result of the test. This is the result the tester observed when running the test. Example: After entering the correct username and password, the user is successfully logged in and is presented with the welcome page. 

Step 9 – Status: 

The tester will report the status of the test. If the expected and actual results match, the test is said to have passed. The tester marks the test as failed if the results do not match.

Manual and automated test cases share some common elements, but when using automation, include these 6 key elements. Those are: preconditions, test steps, sync and wait, comments, debugging statements, and output statements. 

Best Practice for writing effective Test Case 

Follow key best practices to write effective test cases.

First, identify the purpose of the test case and determine exactly what needs to be tested.

Write the test case clearly and concisely, providing step-by-step instructions. Also, it is important to consider all possible scenarios and edge cases to ensure thorough testing. 

It is always to review and refine your test cases occasionally to maintain their quality over time. 

By following these best practices for writing effective test cases, we can increase the chances of spotting defects early in the software development process, ensuring optimal performance for end use. 

Benefits of writing high-quality and effective Test cases 

Indeed, writing effective test cases is important because it ensures high-quality software. Moreover, well-written test cases provide multiple benefits.

Let me narrow down to some essential facts here: 

  1. Accurate Issue Identification: High-quality test cases ensure thorough testing and accurate identification of bugs. 
  2. Better Test Coverage: Test cases evaluate different aspects of the software, identifying bugs before release. 
  3. Improved Software Quality: Identifying issues early reduces repair costs and improves software reliability. 
  4. Better Collaboration: High-quality test cases help stakeholders work together, improving communication and resources. 
  5. Enhanced User Experience: Test cases improve the software’s usability, enhancing the end user’s experience. 

Conclusion

Writing effective test cases is a systematic process that requires attention to detail and clarity. By following these best practices—understanding requirements, structuring test cases properly, covering various scenarios, ensuring reusability, documenting results, and regularly reviewing your work—you will create a robust testing framework that enhances software quality. Implementing these guidelines will not only streamline your testing process but also contribute significantly to delivering high-quality software products that meet user expectations. 

Click here to read more blogs like this.