playwright-and-mcp-expandtesting_api_and_web

API and WEB testing in expandtesting note app. This project contains basic examples on how to use playwright-mcp to test API, WEB and how to combine API and WEB tests. Good practices such as AI prompting, Generative AI, AI debugging, hooks, custom commands and tags, among others, are used. All the necessary support documentation to develop this project is placed here. When it comes to the API part, it deals with the x-www-form-urlencoded content type.

Pre-requirements:

Requirement	Version	Note
Cursor	2.1	-
npm	10.9.2	-
Playwright	1.57.0	-
Playwright Test for VSCode	1.1.15	-
Faker	10.1.0	-

Installation:

• See Cursor download page, download and install the latest Cursor stable version. Keep all the prefereced options as they are until you reach the possibility to check the checkboxes below:
  • ✅ Add "Open with Cursor" action to Windows Explorer file context menu.
  • ✅ Add "Open with Cursor" action to Windows Explorer directory context menu. Check then both to add both options in context menu. Open Cursor and hit 👉File, 👉Preferences, 👉Cursor Settings, 👉Add Custom MCP and paste the below configuration:

    {
      "mcpServers": {
        "playwright": {
          "command": "npx",
          "args": [
            "@playwright/mcp@latest"
          ]
        }
      }
    }
    

  On Toggle AI Pane, 👉Auto in the model selection drop-down menu. Look for Playwright Test for VSCode in the extensions marketplace and install the one from Microsoft.
• See Node.js page and install the aforementioned Node.js version. Keep all the preferenced options as they are.
• Execute npm init playwright@latest to start a project.
  • Hit 👉Enter to Install Playwright on its latests version.
  • Hit 👉Enter to select TypeScript.
  • Hit 👉Enter to put your end-to-end tests in \tests.
  • Hit 👉y to add a GitHub Actions workflow.
  • Hit 👉Enter to install Playwright browsers.
• Look for Playwright Test for VSCode in the extensions marketplace and install the one from Microsoft.
• Execute npm install @faker-js/faker --save-dev to install faker library.

Tests:

• When creating automated web test, drag both general_web_test_runner.prompt.md and trainning_web_est.prompt.md to the typing area in Cursor. Wait for the test cases to be designed and codified into spec.ts files. Type "Execute trainning_test_web.prompt.md" and hit ⬆️. After the execution is finished, input different parameters so the other test cases can be generated. Use equivalents files for automated api tests.
• Execute npx playwright test --ui to run your tests with UI Mode.
• Execute npx playwright test to execute playwright in headless mode.
• Hit 👉Testing button on left side bar in VSC and choose the tests you want to execute.
• Execute npx playwright test --grep "@BASIC" to run the tests tagged with BASIC tag in Powershell.
• Execute npx playwright test --grep-invert "@NEGATIVE" to run the tests not tagged with NEGATIVE tag in Powershell.
• Execute npx playwright test --grep-invert "(?=.*@API)(?=.*@FULL)" to run the tests tagged with both API and FULL tags in Powershell.

Support:

• playwright-mcp
• expandtesting API documentation page
• expandtesting API demonstration page
• Faker
• Playwright docs
• Read/Write JSON Files with Node.js
• Assertions
• Use array of keywords and loop through script in Playwright
• How to Delete a File From a Directory with Node.js
• How to resolve Node.js: "Error: ENOENT: no such file or directory"
• trying to click a button on playwright
• How to wait for a specific API response in your Playwright end-to-end tests
• How to remove specific character surrounding a string?
• reload
• How to Check an Element's Value in Playwright
• Tag tests
• [Feature]: Support Ubuntu 24.04 #30368

Tips:

• API and WEB tests to send password reset link to user's email and API tests to verify a password reset token and reset a user's password must be tested manually as they rely on e-mail verification.
• Grep plugin helps filtering the test to be executed. Study the documentation.
• For the first time using Cursor generative AI, is it recommended to:
  • Develop a basic functional playwright test case,
  • Ask the chat GPT to create a trainning_test.prompt.md file for the basic functional playwright test case,
  • Drag and drop both trainning (e.g. trainning_test_web_.prompt.md) and general runner (e.g. general_web_test_runner.prompt.md) files to the typing area and type "Execute trainning_test_web.prompt.md" and hit ⬆️. This way, Cursor will be trainned properly applying the general test parameters into the scope of the current application under test.