Playwright Live Project: Setup & Execution Guide

Welcome to the Playwright Live Project! The best way to learn automation is by doing. In this guide, we will walk through exactly how to clone the live project repository to your local machine, install all necessary dependencies, and execute the test suite.

Step 0: Prerequisites (VS Code & Node.js)

Before you clone the repository, you need the right tools installed on your machine.

• 1. Visual Studio Code (VS Code)Download and install the free VS Code editor from code.visualstudio.com. This is the industry standard IDE for Playwright.
• 2. Node.jsPlaywright is built on Node.js. Download the LTS (Long Term Support) version from nodejs.org. Once installed, verify it by opening your terminal and typing node -v.

Step 1: Clone the Repository

First, you need to download the source code to your local machine. Open your terminal (or VS Code integrated terminal) and navigate to the folder where you want to store your projects. Run the following Git command:

git clone https://github.com/vishvasmca-cmd/playwright-live-project.git
cd playwright-live-project

Step 2: Install Dependencies

Playwright relies on Node.js packages to function. We need to install the project dependencies defined in the package.json file, and then download the necessary Playwright browser binaries (Chromium, Firefox, WebKit).

# 1. Install Node modules
npm install

# 2. Install Playwright browsers
npx playwright install

Step 3: Run the Tests

With everything set up, you are ready to execute the automation suite. You can run the tests in headless mode (background) or headed mode (watch the browser visibly open).

# Run all tests in the background (Fastest)
npx playwright test

# Watch the tests run in an actual browser window
npx playwright test --headed

# Debug tests using the visual UI mode
npx playwright test --ui

Next Steps

Once you've successfully run the tests, take some time to explore the framework architecture. Look at the Page Object Model (POM) structure under the /pages directory and see how the tests under /tests are utilizing them.