mcpserver.so LogoMCPFly
Submit
Playwright Test Framework Example logo

Playwright Test Framework Example

by jaktestowac.pl

Development/TestingPlaywrightTestingE2E TestingUI TestingAPI TestingTest AutomationJavaScriptTypeScript

This repository provides an empty Playwright test framework designed for testing AI and Playwright MCP (Model Context Protocol). It serves as a practical example for learning and implementing automated testing with Playwright.

View on GitHub

Last updated: N/A

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

Contact

Feel free to reach out to us:

Happy testing and automating tests!πŸš€

jaktestowac.pl Team πŸ’šβ€οΈ

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