Playwright Test Framework Example for AI & Playwright MCP Course by jaktestowac.pl

by jaktestowac

400 downloads

Not rated

GitHub

Developer Tools

About

This repository provides an empty Playwright test framework that was designed to test AI and Playwright MCP (Model Context Protocol) in course

Details

Author: jaktestowac
Downloads: 400
Categories: Developer Tools

Setting up with Highlight

This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:

Download and install Highlight from highlightai.com/download
Navigate to the plugins tab and select "Add Custom Plugin"
Configure the plugin with the settings below

Plugin Name Playwright Test Framework Example for AI & Playwright MCP Course by jaktestowac.pl

Command (node, npx, python, etc.)

Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
Enable "Start Automatically" if you want the plugin to start when Highlight launches

Setting up with Cursor

Open Cursor's settings
Navigate to the MCP section
Click "Add new Global MCP server"
Copy and paste the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

Setting up with Claude Desktop

Open Claude Desktop's settings
Go to the Integrations tab
Click "Add MCP Server"
Use the configuration below based on your operating system

Note: Make sure Claude Desktop is running before attempting to connect.

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

Setting up with Windsurf

Open Windsurf's preferences
Go to the Integrations section
Click "Add MCP Integration"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

Setting up with Cline

Open Cline's settings
Navigate to the Integrations section
Click "Add MCP Server"
Copy and paste the configuration below based on your operating system

Note: Make sure to restart Cline after adding the configuration.

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

Setting up with Goose

Open Goose's preferences
Go to the Integrations tab
Select "MCP Servers"
Click "Add New Server"
Use the configuration below based on your operating system

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

JSON

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

From the repository

Clone the repository, install dependencies with npm install, optionally install Playwright browsers, and run tests with npm run test or npx playwright test. Ensure the 🦎 GAD demo application is running locally.

Claude Desktop / Cursor

Paste into your MCP client config file to install this server.

{
    "mcpServers": {
        "playwright test framework example for ai & playwright mcp course by jaktestowac.pl": {
            "playwright-test-framework-mcp-example": {
                "command": "npx",
                "args": [
                    "playwright",
                    "install"
                ]
            }
        }
    }
}

McpServers

{
    "playwright-test-framework-mcp-example": {
        "command": "npx",
        "args": [
            "playwright",
            "install"
        ]
    }
}

Playwright Test Framework Example for AI & Playwright MCP Course by jaktestowac.pl

This repository provides an empty Playwright test framework that was designed to test AI and Playwright MCP (Model Context Protocol) in course

(Polish: _"Playwright z AI – czyli jak usprawnić swoją pracę"_ - _"Playwright with AI - how to improve your work"_)

by jaktestowac.pl team.

Overview

Repository contains tests for the following topics:

- UI Tests with Page Object Model:
Automated browser tests for user registration, login, and viewing articles, using Playwright and the Page Object Model pattern for maintainability.

- API Testing:
End-to-end API tests for health, about, users, including user registration, login and viewing articles.

- Fixtures and Helpers:
Custom Playwright fixtures for page objects to promote code reuse and clarity.

- Test Reporting and Configuration:
Example Playwright configuration for multiple reporters (HTML, JUnit, JSON), test directory structure, and device emulation.

Tests and Covered Areas

The repository includes the following test files and their coverage:

- tests/register.spec.ts: UI test for user registration and login with unique credentials.
- tests/login.spec.ts: UI test for logging in with valid credentials.
- tests/articles.spec.ts: UI test for viewing articles as a guest user.
- tests/logged-articles.spec.ts: UI test for viewing articles as a logged-in user.

These tests cover:

- User registration and authentication flows
- Viewing articles (both as guest and logged-in user)

Who we are?

We are Test Architects and Senior Lead Tech Quality Engineers, who are passionate about testing.
We are constantly looking for new ways to improve our skills and share our knowledge with others.

We are actively involved in the Playwright community, contributing to the project and sharing our knowledge with others. We have been using Playwright in different companies and projects since 2021.

We believe in the power of open source and the importance of giving back to the community.

Read more about our Contribution to Playwright and Community

Prerequisites

Before you start, make sure you have the following installed:

- Node.js (v20 or later LTS version)
- our free application to practice automation - 🦎 GAD
- [VSCode] (https://code.visualstudio.com) IDE for coding

Project Structure

Test files are located in the tests directory. Each test file contains a set of tests that cover a specific functionality or feature of the application.

Configuration in file playwright.config.ts contain all global settings for project.

Setup

1. Clone the repository:

   git clone https://github.com/jaktestowac/playwright-test-framework-mcp-example.git
   cd playwright-test-framework-mcp-example

2. Install dependencies:

   npm install

3. Optionally install Playwright browsers:

   npx playwright install

4. Optionally install extensions for VSCode:

Navigate to "Extensions" tab in VSCode, filter extensions using "@recommended" filter

Running Tests

Run all tests:

npm run test

Run specific test file:

npx playwright test tests/login.spec.ts

Run tests with UI mode:

npx playwright test --ui

Generate test report:

npx playwright show-report

Troubleshooting

Common issues and solutions:

1. Tests fail on first run

- Ensure 🦎 GAD application is running (by default on http://localhost:3000)
- Check if correct Node.js version is installed

2. Browser launch fails

   npx playwright install

Resources

- Our free application to practice automation - 🦎 GAD
- [PL 🇵🇱] Free Playwright Resources - our free resources to learn Playwright
- [PL 🇵🇱] Praktyczne wprowadzenie do testów automatycznych z Playwright - YouTube
- [PL 🇵🇱] Playwright Elements - Kluczowe koncepcje automatyzacji testów - YouTube
- [PL 🇵🇱] Playwright MCP - YouTube
- [PL 🇵🇱] Discord Community Join our Discord Community - first Polish Community about automation with Playwright!
- [ENG 🇬🇧] VisualStudio Marketplace Our free plugins for VS Code and Playwright
- [ENG 🇬🇧] Playwright Documentation
- [ENG 🇬🇧] Playwright GitHub Repository

Contact

Feel free to reach out to us:

- Website: jaktestowac.pl
- LinkedIn: jaktestowac.pl

Happy testing and automating tests!🚀

jaktestowac.pl Team 💚❤️

PS. For more resources and updates, follow us on our website and GitHub.

No reviews yet — be the first

Use Google, GitHub, or an email account so ratings stay tied to real people.

Email sign in

No reviews posted yet.

About

Details

Jump to

Setting up with Highlight

From the repository

Claude Desktop / Cursor

McpServers

Playwright Test Framework Example for AI & Playwright MCP Course by jaktestowac.pl

Overview

Tests and Covered Areas

Who we are?

Prerequisites

Project Structure

Setup

Running Tests

Troubleshooting

Resources

Contact

Install

More like this

Sentry

Github

Git

GitLab

Context 7

Playwright