Setup Beginner

Get your development environment ready with Playwright and GitHub Copilot in VS Code. This lesson covers installation, workspace configuration, providing context to Copilot, and generating your first AI-assisted test.

1. Installing Playwright

Open a terminal in VS Code and initialize Playwright in your project:

# Initialize Playwright
$ npm init playwright@latest

# Install the Playwright VS Code extension (optional but recommended)
$ code --install-extension ms-playwright.playwright

2. Installing GitHub Copilot

1. Install the Copilot extensions

   In VS Code, go to Extensions (Ctrl+Shift+X) and install:

   • GitHub Copilot — for inline completions
   • GitHub Copilot Chat — for the chat panel
2. Sign in with GitHub

   Click the Copilot icon in the status bar and sign in with your GitHub account. You need an active Copilot subscription.

3. Verify Copilot is active

   Open a TypeScript file and start typing. You should see gray ghost text suggestions appear. The Copilot icon in the status bar should show as active.

3. Configuring Workspace for Copilot

Give Copilot better context so its suggestions are more accurate for your Playwright tests:

Open Relevant Files

Copilot uses your open editor tabs as context. When writing tests, keep these files open:

• The component or page you are testing
• An existing test file that follows your patterns
• Your page object files (if using POM)
• The playwright.config.ts file

Use @workspace in Copilot Chat

The @workspace participant gives Copilot Chat access to your entire workspace, not just open files:

# Ask about your project structure
@workspace How are Playwright tests organized in this project?

# Generate tests based on workspace context
@workspace Write a Playwright test for the login page.
Look at the LoginForm component to understand the UI.

4. Your First AI-Generated Test

Let's generate a test using both Copilot modes:

Method 1: Inline Completions

Create a new file tests/homepage.spec.ts and start typing:

import { test, expect } from '@playwright/test';

// Test that the homepage loads correctly
test('homepage', // Press Tab to accept Copilot's suggestion

Method 2: Copilot Chat

Open Copilot Chat (Ctrl+Shift+I) and type:

@workspace /tests Write a Playwright test suite for the homepage.
Test that the page loads, the navigation links work, and
the hero section displays correctly.

Copilot Chat will generate a complete test file that you can insert directly into your editor.

5. Running Your Test

# Run all tests
$ npx playwright test

# Run a specific file
$ npx playwright test tests/homepage.spec.ts

# Or use the VS Code Playwright extension's Run button