### Environment Variables Configuration Example (.env.example)

Source: https://context7.com/julienloizelet/ddev-playwright/llms.txt

An example `.env.example` file used for configuring test environment variables, such as the base URL for the DDEV site and the specific page path. This file is automatically copied to `.env` during Playwright setup.

```bash
# .env.example (auto-copied to .env during playwright-install or playwright-init)
BASEURL="https://my-project.ddev.site"
PAGE_URL="/home.php"
```

--------------------------------

### Install ddev-playwright Add-on

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Installs the ddev-playwright add-on using the ddev CLI. Requires restarting the DDEV environment after installation.

```bash
ddev add-on get julienloizelet/ddev-playwright
ddev restart
```

--------------------------------

### Example package.json for Playwright

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

A sample `package.json` file demonstrating the necessary dependencies for Playwright, including `@playwright/test` and `dotenv`.

```json
{
  "license": "MIT",
  "dependencies": {
    "@playwright/test": "^1.34.2",
    "dotenv": "^16.0.3"
  }
}
```

--------------------------------

### Update documentation table of contents with doctoc

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/docs/DEVELOPER.md

Instructions for installing and running the doctoc tool to automatically generate and update the table of contents in Markdown files.

```bash
npm install -g doctoc
doctoc README.md --maxlevel 4 && doctoc docs/* --maxlevel 4
```

--------------------------------

### Executing Commands in Playwright Container (Bash)

Source: https://context7.com/julienloizelet/ddev-playwright/llms.txt

Demonstrates how to execute various npm and yarn commands, check Playwright versions, and list installed browsers directly within the Playwright container using DDEV's `exec` command. This allows for managing dependencies and inspecting the Playwright environment.

```bash
# Run npm commands in the Playwright container
ddev exec -s playwright npm install --save-dev some-package

# Run yarn commands in a specific directory
ddev exec -s playwright yarn --cwd /var/www/html/tests/Playwright test

# Check Playwright version
ddev exec -s playwright npx playwright --version

# List installed browsers
ddev exec -s playwright npx playwright install --dry-run
```

--------------------------------

### Install Playwright with npm or yarn

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Installs Playwright and its dependencies using either npm or yarn. Requires a `package.json` file in the `PLAYWRIGHT_TEST_DIR`. Defaults to yarn if `--pm` is not specified.

```bash
ddev playwright-install --pm [npm|yarn]
```

--------------------------------

### Example playwright.config.js Configuration

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

A comprehensive example of a Playwright configuration file (`playwright.config.js`), including settings for test directory, parallel execution, retries, reporters, browser projects, and environment variables.

```javascript
// @ts-check
const { defineConfig, devices } = require("@playwright/test");

require("dotenv").config({ path: ".env" });

/**
 * @see https://playwright.dev/docs/test-configuration
 */
module.exports = defineConfig({
  testDir: "./tests",
  /* Run tests in files in parallel */
  fullyParallel: true,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: process.env.CI ? 2 : 0,
  /* Opt out of parallel tests on CI. */
  workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: [[process.env.CI ? "github" : "list"], ["html", { open: "never" }]],
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: process.env.BASEURL,
    ignoreHTTPSErrors: true,
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: "on-first-retry",
  },

  /* Configure projects for major browsers */
  projects: [
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },

    {
      name: "firefox",
      use: { ...devices["Desktop Firefox"] },
    },

    {
      name: "webkit",
      use: { ...devices["Desktop Safari"] },
    },
  ],
});

```

--------------------------------

### Configuring Private NPM Registry Support (.npmrc)

Source: https://context7.com/julienloizelet/ddev-playwright/llms.txt

Guides on setting up access to private NPM registries by creating an `.npmrc` file within the DDEV home additions folder. This configuration allows the Playwright container to authenticate with private registries, such as GitHub Packages. The file is automatically copied to the container upon `ddev restart`.

```bash
# Create .npmrc in DDEV homeadditions
mkdir -p .ddev/homeadditions
cat > .ddev/homeadditions/.npmrc << 'EOF'
@myorg:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}
EOF

# The file is automatically copied to /home/<user>/ in the Playwright container
ddev restart
```

--------------------------------

### Trigger release workflow via GitHub CLI

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/docs/DEVELOPER.md

Command to manually trigger the release GitHub Action workflow using the GitHub CLI, requiring a specific tag name.

```bash
gh workflow run release.yml -f tag_name=vx.y.z
```

--------------------------------

### Running Playwright Tests with VNC Server Access (Bash)

Source: https://context7.com/julienloizelet/ddev-playwright/llms.txt

Instructions for running Playwright tests in headed mode or using the Playwright UI for visual debugging. It includes commands to launch tests and details on accessing the KasmVNC server via a browser for visual interaction with the running tests.

```bash
# Run tests in headed mode
ddev playwright test --headed

# Or use the Playwright UI
ddev playwright test --ui

# Then access VNC in your browser:
# https://<PROJECT>.ddev.site:8444
```

--------------------------------

### Initialize Playwright Project

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Initializes a Playwright project within the DDEV environment. This command sets up the necessary Playwright configuration and can be used with different package managers like npm.

```bash
ddev playwright-init --pm npm
```

--------------------------------

### Initialize Playwright Project

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Initializes a new Playwright project in the `PLAYWRIGHT_TEST_DIR`. This command is interactive and not suitable for CI environments. It supports both npm and yarn package managers, defaulting to yarn.

```bash
ddev playwright-init --pm [npm|yarn]
```

--------------------------------

### Basic Playwright Test File for Page Validation (JavaScript)

Source: https://context7.com/julienloizelet/ddev-playwright/llms.txt

A fundamental Playwright test file (`example.spec.js`) demonstrating how to visit a page, interact with elements, and assert content. It utilizes environment variables for the base URL and page path. Dependencies include `@playwright/test`.

```javascript
// tests/example.spec.js
const { test, expect } = require('@playwright/test');

const { PAGE_URL } = process.env;

test('Visit home page', async ({ page }) => {
  await page.goto(PAGE_URL);

  console.log('Opened ' + page.url());
  const content = await page.locator('main');

  await expect(content).toContainText('Welcome');
});

test('Check navigation links', async ({ page }) => {
  await page.goto('/');

  // Click a navigation link
  await page.click('nav a[href="/about"]');

  // Verify URL changed
  await expect(page).toHaveURL(/.*about/);
});
```

--------------------------------

### Run Playwright Commands

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Executes various Playwright commands within the DDEV environment. This includes running tests, launching the UI tool, running in headed mode, and generating HTML reports.

```bash
ddev playwright test
ddev playwright test --ui
ddev playwright test --headed
ddev playwright show-report --host 0.0.0.0
```

--------------------------------

### Playwright Configuration for Multi-Browser Testing (JavaScript)

Source: https://context7.com/julienloizelet/ddev-playwright/llms.txt

A comprehensive Playwright configuration file (`playwright.config.js`) for setting up multi-browser testing. It includes parallel execution, retry logic, reporting, and browser-specific configurations for Chromium, Firefox, and WebKit. Dependencies include `@playwright/test` and `dotenv`.

```javascript
// playwright.config.js
const { defineConfig, devices } = require('@playwright/test');
require('dotenv').config({ path: '.env' });

module.exports = defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [
    [process.env.CI ? 'github' : 'list'],
    ['html', { open: 'never' }],
  ],
  use: {
    baseURL: process.env.BASEURL,
    ignoreHTTPSErrors: true,
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});
```

--------------------------------

### Run Playwright Tests

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Executes Playwright tests within the DDEV environment. Assumes Playwright has been initialized and tests are configured.

```bash
ddev playwright test
```

--------------------------------

### Execute Playwright Commands in Container

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Allows running arbitrary Playwright commands directly within the Playwright container using `ddev exec`. This is useful for specific package management tasks or running individual tests.

```bash
ddev exec -s playwright yarn install --cwd ./var/www/html/yarn --force
ddev exec -s playwright yarn --cwd /var/www/html/yarn test "__tests__/1-simple-test.js"
```

--------------------------------

### Set Custom Docker Image and KasmVNC Version

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Customizes the Docker image and KasmVNC version used by the Playwright service. This is done by setting variables in the `.ddev/.env.playwright` file and then reapplying the add-on and restarting DDEV.

```bash
ddev dotenv set .ddev/.env.playwright --playwright-docker-image=mcr.microsoft.com/playwright:v1.46.0-focal-amd64
ddev add-on get julienloizelet/ddev-playwright
ddev restart
```

--------------------------------

### Generate Playwright Code with Codegen

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Launches the Playwright Codegen tool, which allows you to generate Playwright code by interacting with your application in a browser. This is typically done via the VNC server.

```bash
ddev playwright codegen
```

--------------------------------

### Customize Playwright Testing Directory

Source: https://github.com/julienloizelet/ddev-playwright/blob/main/README.md

Overrides the default Playwright testing directory within the DDEV container. This is achieved by creating a docker-compose override file to set the PLAYWRIGHT_TEST_DIR environment variable.

```yaml
services:
  playwright:
    environment:
      - PLAYWRIGHT_TEST_DIR=your/playwright/directory/path
```

```yaml
services:
  playwright:
    environment:
      - PLAYWRIGHT_TEST_DIR=./
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.