Playwright MCP + GitHub Copilot: setup and login tests

Set up Playwright MCP in VS Code, use GitHub Copilot agent mode to automate an OrangeHRM login, and generate JavaScript tests with page objects.

Player not loading? Watch on YouTube

This tutorial connects Playwright MCP with GitHub Copilot in Visual Studio Code for browser automation and JavaScript test generation. The setup covers Node.js installation, checking it with node -v, and initializing a Playwright project. The presenter chooses JavaScript, a test folder, and browser installation options. A Windows environment-variable step appears in the walkthrough, while the VS Code download instructions refer to choosing the appropriate operating system.

The presenter installs the MCP server through VS Code, starts it from the command palette, and enables its tools in Copilot agent mode. A prompt asks the coding assistant to open the OrangeHRM demo website and log in with valid credentials. The demonstration encounters a "page is not defined" error before reporting a successful login.

Further prompts generate a Playwright login test and convert it to the Page Object Model pattern. The presenter requests a test based on the page object files and points out assertions that Copilot added without an explicit request. Follow-up prompts may be needed to get the intended result; the generated folder layout also differs from the presenter's preference. The walkthrough uses a locally configured browser tool, but does not demonstrate offline model inference or a self-hosted model.