Syncfusion AI Assistant

How can I help you?

From Complex Web Automation to Streamlined Workflows Code Studio Skills for Playwright MCP

15 Jun 202611 minutes to read

Overview

Ready to transform your web testing workflow? In this tutorial, you’ll learn how to use Playwright Model Context Protocol (MCP) with Code Studio’s Agent mode to generate, execute, and manage web automation tests with AI assistance. Playwright MCP acts as a bridge that enables Code Studio’s AI to perform real-world browser automation tasks based on your natural language instructions.

Key concept — Playwright MCP Server: A specific MCP implementation that brings Playwright’s browser automation capabilities to AI agents. It acts as a translator between natural language commands and browser actions. When you tell the AI to “verify the login button exists,” the Playwright MCP Server converts this into executable Playwright code that navigates pages, clicks elements, fills forms, and captures results.

Prerequisites

Before beginning this tutorial, ensure the following:

  • Node.js (v18 or higher) is installed on your system. Playwright requires Node.js to run automation tests. Download from nodejs.org and verify installation with node --version.

What You Will Learn

By the end of this tutorial, you’ll be able to:

  • Install and configure Playwright MCP server in Code Studio
  • Enable Agent mode for AI-powered test generation
  • Create test scenarios in natural language and watch AI generate executable test scripts
  • Review and execute generated Playwright tests

Steps to Generate Playwright Tests

Step 1: Install Playwright packages and Playwright MCP Server

Playwright is an open-source browser automation framework that lets you write tests for web applications across multiple browsers. The Playwright MCP Server acts as a bridge between Code Studio’s AI and Playwright’s automation capabilities — translating natural language test instructions into executable browser commands.

Before the AI can generate tests, you need to install both Playwright and the MCP server integration.

Steps:

  1. Create a new project folder and open it in Code Studio.
  2. Open the integrated terminal by clicking Terminal → New Terminal from the menu bar, or press Ctrl+` (Windows/Linux) or Cmd+` (Mac).

  3. Install Playwright by running the following command:

    npm init playwright@latest
  4. Follow the installation prompts:
    • Press Enter to confirm installation
    • Select TypeScript as the language (default) and press Enter

    Playwright setup prompt showing TypeScript language selection

    • Accept the default tests folder for end-to-end tests by pressing Enter

    Playwright setup showing default tests folder configuration

    • When prompted “Add a GitHub Actions workflow?”, type n and press Enter to skip it. This workflow would automatically run your tests on GitHub when you push code, but for this tutorial, you’ll focus on local development.

    Terminal output confirming tests folder location

    • Confirm installation of Playwright browsers by pressing Enter

    Playwright downloading browser binaries (Chromium, Firefox, WebKit)

    The installation will download browser binaries. Once complete, you’ll see the Playwright folder structure in your project.

    Installed Playwright project structure with tests folder

    Note: The browser binaries download is approximately 500MB. The installation may take a few minutes depending on your internet connection speed.

  5. Install the Playwright MCP Server:

    • Open the Chat Panel. If it’s not already visible, press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette, then type “Chat: Focus on Chat View” and press Enter.

    • Once the Chat Panel is open, locate and click the Configure Chat icon (typically displayed as a settings or gear icon in the Chat Panel toolbar).

    • From the configuration menu that appears, select the MCP Server option. This will open the MCP marketplace view where you can browse and install available MCP servers.

    MCP panel in Code Studio

    • In the MCP marketplace panel, select the Playwright MCP tools

    MCP marketplace showing available Playwright MCP server for installation

    • Click the Install button and choose your installation option (global or local)

    Installation scope selection dialog showing global and local installation options

    • Select your preferred option to add the Playwright MCP server to the installed list
  6. Verify the MCP installation:
    • After installation completes, the Playwright MCP server connection status will show as active

    MCP panel showing Playwright MCP server connection status as active

    • To verify the Playwright MCP server installation, click the Select Tools icon in Chat. You should see “MCP server: playwright” listed with available Playwright commands.

    Chat tools showing available Playwright MCP commands

Step 2: Create the Required Skills

Skills are specialized instruction sets that direct the AI agent to perform specific tasks autonomously. Think of them as focused “playbooks” that define exactly how the agent should approach a particular type of work. In this case, you’ll create a skill that instructs the agent to explore a website using Playwright MCP, identify key user flows, and automatically generate test cases based on what it discovers.

Steps:

  1. Open the Chat Panel. If it’s not already visible, press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette, then type “Chat: Focus on Chat View” and press Enter.

    • Once the Chat Panel is open, locate and click the Configure Chat icon (typically displayed as a settings or gear icon in the Chat Panel toolbar).

    • From the configuration menu that appears, select the Agent Customizations option.

    Agent Customization in Code Studio

    • From the Agent Customization menu that appears, select the Skills option.

    Skills view in Code Studio

  2. In the Skills panel, locate and click the + New skill… button to create a new skill definition.

    Skills panel showing the + New skill button

  3. Select path:
    • A dialog will appear prompting you to select the path for your workspace. Select the path.

    Skill path selection field showing path for the skill

  4. Name your skill:
    • A dialog will appear prompting you to enter a skill name. Type playwright-explore-website as the skill name. Skill names must use lowercase letters, numbers, and hyphens only — no spaces or special characters are allowed.
    • Press Enter to confirm and create the skill.

    Skill name input field showing playwright-explore-website

  5. Define the skill instructions:
    • Code Studio will automatically open a new SKILL.md file where you can define the instructions that guide the AI agent’s behavior.
    • Replace the default content with the following skill definition:
    ---
name: playwright-explore-website
description: Website exploration for testing using Playwright MCP
---

# Website Exploration for Testing

Your goal is to explore the website and identify key functionalities.

## Specific Instructions

1. Navigate to the provided URL using the Playwright MCP Server. If no URL is provided, ask the user to provide one.
2. Identify and interact with 3-5 core features or user flows.
3. Document the user interactions, relevant UI elements (and their locators), and the expected outcomes.
4. Close the browser context upon completion.
5. Provide a concise summary of your findings.
6. Propose and generate test cases based on the exploration.

    SKILL.md file showing the defined instructions for website exploration

Step 3: Enter Your Test Scenario and Run the Agent

Now that the skill is configured, you can describe your test scenario in plain English and let the AI agent do the rest. The agent will autonomously explore the website, identify the elements you described, and generate executable test code — no manual scripting required.

Steps:

  1. Enable Agent Mode:
    • Open Chat (if it’s not already visible, press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette, then type “Chat: Focus on Chat View” and press Enter)
    • Select Agent from the dropdown menu
  2. Select your skill:
    • In the chat input box at the bottom of the Chat Panel, type a forward slash / to open the skills menu. This displays the list of all available skills in your workspace.
    • From the skills menu, select playwright-explore-website. This tells the agent to use the specific instructions you defined earlier for website exploration and test generation.

  3. Enter your test scenario in natural language:

    1. Navigate to "https://ej2.syncfusion.com/showcase/angular/appointmentplanner/#/dashboard".
2. Verify that the page title contains "Appointment Planner" or "Example Clinic".
3. Check that the header displays the logged-in user's name (e.g., "Jane Doe") and role (e.g., "Admin").
4. Confirm the presence of the main navigation menu / sidebar with items like: Dashboard, Schedule, Doctors, Patients, Preference, About.
5. Verify that the "Logout" button/link is visible in the header or sidebar.
6. Check that clicking the "Dashboard" menu item (if visible) keeps/reloads the current view without errors.

    Chat panel showing test scenario input with navigation and verification steps

  4. Press Enter to submit your request.

  5. The Agent autonomously performs the following actions:
    • Analyzes your test scenario and breaks it down into executable steps
    • Uses Playwright MCP tools to interact with the browser and explore the website
    • Generates the test code based on the exploration results
    • Executes the generated test to verify it works correctly
    • Prepares a summary of results and the generated test file

    Agent mode actively executing test generation steps with Playwright MCP

Step 4: Review the Generated Test

Once the agent finishes its work, you’ll have a complete, executable Playwright test. In this step, you’ll examine the generated code, verify it matches your requirements, and review the test execution results to confirm everything works as expected.

Steps:

  1. Open the generated test file in the tests/ folder (e.g., appointment-planner-verification.spec.ts) to review the generated test code:

    Code Studio editor showing the generated Playwright test file with test assertions

  2. To run the test, use the following command in the terminal:

    npx playwright test appointment-planner-verifications.spec.ts

    Terminal output showing Playwright test execution across multiple browsers

    Note: Replace appointment-planner-verifications.spec.ts with your actual test filename if different.

  3. Check the terminal output for test execution results.

    The terminal shows live execution details as Playwright runs your test. By default, Playwright runs tests headless (without opening visible browser windows) and executes them in parallel across 3 workers (Chromium, Firefox, and WebKit).

    Terminal output showing test results summary with passed/failed counts

  4. View the HTML report by running the following command in the terminal:

    npx playwright show-report

    Terminal showing the playwright show-report command being executed

    Browser showing Playwright HTML report with detailed test results and screenshots

What’s Next