Accelerating E2E Testing for SharePoint and Web Apps with Playwright and Cursor

---

Video correction: In “Playwright Test Results & Report,” open playwright-report (HTML report)—not test-results. test-results may still appear in this repo for traces/attachments, but playwright-report is where the reporter output lives. This repo includes a playwright-report folder on GitHub so you can browse it in the file tree and open playwright-report/index.html locally after cloning. Sorry for any confusion—that was my mistake in the video.

---

🚀 This project is a Playwright-based end-to-end testing setup for QA engineers, designed to work with real-world web applications, especially SharePoint-style systems that have slow loading pages, dynamic UI behavior, and Microsoft authentication flows. It uses Playwright to run automated browser tests written in TypeScript, and the goal is to simulate how an actual user interacts with the application rather than just testing isolated components.

🔐 The main idea is to avoid logging in every time tests run. Instead, the system logs in once, saves that authenticated session, and reuses it for future runs. That way, tests start already inside the application instead of repeatedly going through login screens.

🧠 This setup allows us to write and continue Playwright tests entirely in plain prompt-based language using the Cursor internal browser, where selectors are handled automatically in the background. Instead of manually thinking about DOM structure or writing CSS/XPath selectors, we can simply describe what we want to do in natural language, and the browser tooling figures out the correct elements and actions.

🧠 This project also uses Playwright MCP as an optional AI-powered browser layer to assist with test creation. It helps the Cursor IDE explore the live application, understand the UI structure, and suggest actions based on real page behavior. Instead of manually inspecting elements or writing selectors, the agent can navigate the page, observe accessibility snapshots, and help generate or extend Playwright tests using natural language prompts.

🎯 Using the Cursor internal browser with selector-aware automation means we can run, extend, or continue existing tests by giving simple instructions like what to click, what to fill, or what to verify, without needing to remember any technical locator syntax. The system interprets the intent, maps it to the actual UI elements on the page, and translates it into Playwright actions.

⚡ This makes test creation and iteration much faster because the focus stays on what the user is trying to achieve rather than how to locate elements in the DOM. It also allows tests to evolve step by step, where each new instruction can build on the previous state of the running test without rewriting or restructuring selectors manually.

🐞 For debugging, Playwright provides a UI mode and trace system. The UI mode allows tests to be run visually step by step, showing actions, screenshots, network requests, and console logs. The trace system records everything that happens during a test run, including clicks, DOM snapshots, and API calls, which can later be replayed to understand exactly what happened during execution.

📊 You can also run reports and inspect detailed trace zip files to debug test runs, view step-by-step execution, and analyze failures visually.

🧪 Test execution behavior also changes depending on environment. In local development, tests run in a visible browser with multiple workers and full tracing enabled. In CI environments, everything runs headless, with a single worker, stricter rules, and retries enabled to ensure stability. This is all controlled through environment variables like CI.

🌍 Overall, the system is designed to support complex enterprise testing scenarios where authentication, slow UI behavior, and dynamic pages are common. It provides a structured way to manage sessions, run tests reliably in different environments, and debug issues using visual tools rather than only logs.

Use MCP when you need ground-truth about what’s on the page without manually copying HTML or guessing selectors; skip it when you already know exact locators and only want code edits.

👉 Links & Resources

• Playwright
• Gursor IDE

---

🚀 Clone and Run

# Clone the repository (replace URL and folder with yours)
git clone https://github.com/Ashot72/cursor-playwright-e2e-framework
cd cursor-playwright-e2e-framework

# First-time setup
npm install
npx playwright install msedge
# Optional: use Chromium instead → npx playwright install chromium

# Configure environment (URLs, secrets, auth — see project .env)

# Auth / storage refresh before logged-in suites
npm run test:setup

# Run all Playwright tests
npm test

# Playwright UI (served at http://localhost:8123 per your script)
npm run test:ui

# Run tests, then open the HTML report
npm run test:report

# Open the existing report only (after a prior run)
npm run test:report:only

# Open a trace file in the trace viewer (path to trace.zip as needed)
npm run test:trace

🛠 Debugging in VS Code

Install Microsoft’s Python Debugger extension

Open the Run view (View → Run or Ctrl+Shift+D) to access the debug configuration (Debug global-setup (test:setup)).

📺Video Watch on YouTube