webapp-testing

name	webapp-testing
description	Set up browser testing — dual path with built-in browser tools (interactive) or Playwright (CI); detect framework, scaffold, verify
compatibility	>=2.0

Web Application Testing

Skill metadata: version "2.0"; license MIT; tags [testing, e2e, playwright, browser, ci, browser-tools]; compatibility ">=2.0"; recommended tools [codebase, editFiles, runCommands].

Set up browser testing for a web application. This skill offers two paths:

• Path A — Built-in browser tools (VS Code 1.110+): lightweight, interactive verification using VS Code's agentic browser tools. No dependencies to install. Ideal for development-time checks and exploratory testing.
• Path B — Playwright: full end-to-end testing framework with CI integration. Ideal for automated regression testing in CI/CD pipelines.

Decision criteria

Factor	Path A (Browser tools)	Path B (Playwright)
Setup effort	Zero — built-in, no install	Moderate — install + configure
CI integration	No — interactive only	Yes — runs headless in CI
Test persistence	No — conversational	Yes — test files committed to repo
Browser coverage	Chromium only	Chromium + Firefox + WebKit
Best for	Quick verification, dev-time checks, debugging	Regression testing, PR gates, cross-browser
Requires	workbench.browser.enableChatTools: true (Preview)	Node.js + Playwright package

Recommendation: Use Path A for interactive verification during development, Path B for CI. They complement each other — Path A validates quickly, Path B prevents regressions.

When to activate

• User says "Set up e2e tests", "Add browser tests", "Add Playwright", "Test my web app", or "Check my web app"
• A web application exists but has no browser-level tests
• The test-coverage-review skill identifies missing e2e coverage

---

Path A — Built-in Browser Tools

VS Code 1.110+ provides 10 agentic browser tools that allow Copilot to interact with web pages directly. These tools are experimental and require opt-in.

A1. Enable browser tools

The user must enable the setting:

{
  "workbench.browser.enableChatTools": true
}

Note: This is a Preview feature. It may change or be removed in future VS Code releases.

A2. Available browser tools

Tool	Purpose
openBrowserPage	Open a URL in a managed browser
navigatePage	Navigate to a new URL
readPage	Read page content (text, links, forms, structure)
screenshotPage	Capture a screenshot for visual verification
clickElement	Click a button, link, or interactive element
hoverElement	Hover over an element
dragElement	Drag and drop an element
typeInPage	Type text into input fields
handleDialog	Accept or dismiss browser dialogs
runPlaywrightCode	Run custom Playwright code snippets in the browser context

A3. Interactive verification workflow

1. Start the dev server (manually or via terminal)
2. Use openBrowserPage to open the app URL
3. Use readPage to verify page content loads correctly
4. Use screenshotPage for visual verification
5. Use clickElement / typeInPage to interact with forms, navigation
6. Use readPage after interactions to verify state changes

A4. Example verification session

User: "Check if my login page works"
Agent:
  1. openBrowserPage("http://localhost:3000/login")
  2. readPage() → verify login form elements exist
  3. typeInPage(selector: "#email", text: "[e-mail]")
  4. typeInPage(selector: "#password", text: "testpass")
  5. clickElement(selector: "button[type=submit]")
  6. readPage() → verify redirect or error message
  7. screenshotPage() → capture visual state

A5. Limitations

• Chromium only (no Firefox or WebKit)
• Interactive — results are conversational, not persisted as test files
• Cannot run in CI/CD pipelines
• Preview feature — may have stability issues
• Some dynamic content may not be fully accessible

---

Path B — Playwright (CI-ready)

B1. Detect the web framework

Scan the project for framework signals:

Signal	Framework	Dev server command
next.config.*, "next" in deps	Next.js	npx next dev
vite.config.*, "vite" in deps	Vite (React/Vue/Svelte)	npx vite
nuxt.config.*, "nuxt" in deps	Nuxt	npx nuxt dev
angular.json, "@angular/core" in deps	Angular	npx ng serve
svelte.config.*, "@sveltejs/kit" in deps	SvelteKit	npx vite dev
remix.config.*, "@remix-run/dev" in deps	Remix	npx remix dev
astro.config.*, "astro" in deps	Astro	npx astro dev

Also check package.json scripts for "dev", "start", or "serve" commands.

If no framework is detected, ask the user how to start the development server.

B2. Install Playwright

npm init playwright@latest -- --quiet

B3. Configure Playwright

Update playwright.config.ts for the detected framework:

import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  testDir: "./tests/e2e",
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: process.env.CI ? "github" : "html",
  use: {
    baseURL: "http://localhost:<PORT>",
    trace: "on-first-retry",
    screenshot: "only-on-failure",
  },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
    { name: "firefox", use: { ...devices["Desktop Firefox"] } },
    { name: "webkit", use: { ...devices["Desktop Safari"] } },
  ],
  webServer: {
    command: "<DEV_SERVER_COMMAND>",
    url: "http://localhost:<PORT>",
    reuseExistingServer: !process.env.CI,
    timeout: 120_000,
  },
});

Replace <PORT> and <DEV_SERVER_COMMAND> with the detected values.

B4. Write the first test

Create tests/e2e/smoke.spec.ts — a smoke test that verifies the app loads:

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

test("home page loads successfully", async ({ page }) => {
  await page.goto("/");
  await expect(page).toHaveTitle(/.+/);
  await expect(page.locator("body")).not.toContainText("500");
  await expect(page.locator("body")).not.toContainText("Internal Server Error");
});

test("navigation is functional", async ({ page }) => {
  await page.goto("/");
  const links = page.locator("a[href]");
  await expect(links.first()).toBeVisible();
});

B5. Verify tests pass

npx playwright test

B6. Add CI workflow

Create .github/workflows/playwright.yml:

name: Playwright Tests
on:
  push:
    branches: [main]
  pull_request:
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

B7. Update project files

• Add to .gitignore:

  # Playwright
  /test-results/
  /playwright-report/
  /blob-report/
  /playwright/.cache/
  

• Add convenience scripts to package.json:

  {
    "scripts": {
      "test:e2e": "playwright test",
      "test:e2e:ui": "playwright test --ui",
      "test:e2e:report": "playwright show-report"
    }
  }
  

Verify

• Path A (browser tools): workbench.browser.enableChatTools is enabled when using built-in tools
• Path A (browser tools): page opens, key action works, and a screenshot is captured
• Path B (Playwright): npx playwright test passes on at least Chromium
• Path B (Playwright): CI workflow file is valid YAML
• Path B (Playwright): .gitignore excludes Playwright artifacts
• Path B (Playwright): package.json has test:e2e script