### Launch Chromium Browser and Get Context

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/core-concepts.md

Launches a Chromium browser instance and returns a default BrowserContext. Ensure Playwright is installed and the browser binaries are available.

```php
<?php
use Playwright\Playwright;

// The Playwright static class is the easiest way to get started.
// This launches a Chromium browser and returns a default BrowserContext.
$context = Playwright::chromium(['headless' => false]);

// ... do stuff ...

// Closing the context will also close the associated browser.
$context->close();

```

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

### Local Development Setup for Playwright PHP

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

Commands for setting up the local development environment for Playwright PHP. Installs PHP dependencies and the bundled Playwright server, then downloads browsers and system dependencies.

```bash
composer install                                # installs PHP deps and the bundled Playwright server
vendor/bin/playwright-install --with-deps       # downloads browsers + optional system deps
```

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

### Install Playwright PHP and Browsers

Source: https://context7.com/playwright-php/playwright/llms.txt

Install the Playwright PHP library via Composer and download the necessary browser binaries. Use the `--with-deps` flag for CI environments or fresh machines to include system dependencies.

```bash
composer require playwright-php/playwright
```

```bash
vendor/bin/playwright-install --browsers
```

```bash
vendor/bin/playwright-install --with-deps
```

```bash
PLAYWRIGHT_BROWSERS_PATH=/path/to/.playwright-browsers vendor/bin/playwright-install --browsers
```

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

### GitHub Actions Workflow for Playwright PHP Tests

Source: https://context7.com/playwright-php/playwright/llms.txt

This YAML workflow automates the setup and execution of Playwright PHP tests in a GitHub Actions CI/CD pipeline. It includes steps for checking out code, setting up PHP and Node.js, installing dependencies, installing Playwright browsers with system dependencies, and running PHPUnit tests.

```yaml
jobs:
  tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: shivammathur/setup-php@v2
        with:
          php-version: '8.2'

      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - run: composer install --no-interaction --prefer-dist

      # Install Playwright browsers with system dependencies
      - run: vendor/bin/playwright-install --with-deps

      # Run PHPUnit tests
      - run: vendor/bin/phpunit --colors=always

      # Optional: Cache Playwright browsers
      # Cache location: ~/.cache/ms-playwright

```

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

### Install Playwright Browsers

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

Installs the necessary Playwright browsers (Chromium, Firefox, WebKit) for your project. Use --with-deps to also install OS dependencies.

```bash
vendor/bin/playwright-install --browsers
```

```bash
vendor/bin/playwright-install --with-deps
```

```bash
vendor/bin/playwright-install --dry-run --with-deps
```

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

### GitHub Actions CI Workflow for Playwright PHP

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

Example workflow snippet for setting up a CI environment on GitHub Actions to run Playwright PHP tests. Installs Node.js, Composer dependencies, and Playwright browsers.

```yaml
jobs:
  tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: shivammathur/setup-php@v2
        with:
          php-version: '8.2'

      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - run: composer install --no-interaction --prefer-dist

      # Install browsers for Playwright PHP
      - run: vendor/bin/playwright-install --with-deps

      - run: vendor/bin/phpunit --colors=always
```

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

### Start External Browser Server with Playwright Protocol

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/connect-browser.md

Launches a browser server instance using Playwright. Copy the printed ws://... value to use as the connection endpoint.

```php
<?php

require __DIR__.'/vendor/autoload.php';

use Playwright\PlaywrightFactory;

$playwright = PlaywrightFactory::create();
$server = $playwright->launchServer('chromium', ['headless' => true]);

echo $server->wsEndpoint().PHP_EOL;

while (true) {
    sleep(1);
}

```

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

### Install Playwright Browsers

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/getting-started.md

Download the necessary browser binaries for Playwright to function. This command ensures the Playwright server is updated and fetches the latest browser versions.

```bash
vendor/bin/playwright-install --browsers
```

```bash
vendor/bin/playwright-install --with-deps
```

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

### Quick Start: Open Page and Get Title

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

Launches a Chromium browser, navigates to a URL, and retrieves the page title. Ensure you have autoload.php included and the Playwright namespace imported.

```php
<?php

require __DIR__.'/vendor/autoload.php';

use Playwright\Playwright;

$context = Playwright::chromium(['headless' => true]);
$page = $context->newPage();
$page->goto('https://example.com');

echo $page->title().PHP_EOL; // Example Domain

$context->close();

```

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

### PHPUnit Integration with PlaywrightTestCaseTrait

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

Minimal example demonstrating how to use the PlaywrightTestCaseTrait for E2E tests with PHPUnit. Ensure PHPUnit 10.0+ is installed. Call setUpPlaywright() and tearDownPlaywright() in your test case's setup and teardown methods.

```php
<?php

use PHPUnit\Framework\TestCase;
use Playwright\Testing\PlaywrightTestCaseTrait;

final class HomePageTest extends TestCase
{
    use PlaywrightTestCaseTrait;

    protected function setUp(): void
    {
        parent::setUp();
        $this->setUpPlaywright();
    }

    protected function tearDown(): void
    {
        $this->tearDownPlaywright();
        parent::tearDown();
    }

    public function test_title_is_correct(): void
    {
        $this->page->goto('https://example.com');

        $this->expect($this->page)->toHaveTitle('Example Domain');
    }
}
```

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

### Start Chrome with Remote Debugging Enabled

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/connect-browser.md

Launches Google Chrome with the remote debugging port enabled. This is required for connecting via CDP.

```bash
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-pw

```

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

### Install Playwright PHP Library

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/getting-started.md

Use Composer to add the Playwright PHP library to your project dependencies.

```bash
composer require playwright-php/playwright
```

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

### Install Route Server

Source: https://github.com/playwright-php/playwright/blob/main/docs/contributing/testing.md

Use `RouteServerTestTrait` to fulfill requests directly via Playwright routing, avoiding the need for a PHP built-in web server. The `routeUrl` helper provides stable URLs for routed content.

```php
use Playwright\Tests\Support\RouteServerTestTrait;

// Inside a test case using PlaywrightTestCaseTrait
$this->installRouteServer($this->page, [
    '/index.html' => '<h1>Hello</h1>',
    '/script.js'  => 'window.ok = true;',
]);

$this->page->goto($this->routeUrl('/index.html'));
```

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

### Perform XHR GET Request

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/network.html

Initiates an XMLHttpRequest (XHR) GET request to retrieve user data. Updates the UI with the response or an error.

```javascript
document.getElementById('xhr-get').addEventListener('click', () => { const result = document.getElementById('xhr-result'); const xhr = new XMLHttpRequest(); xhr.open('GET', '/api/users'); xhr.onload = () => { result.textContent = 'XHR GET: ' + xhr.responseText; }; xhr.onerror = () => { result.textContent = 'XHR Error'; }; xhr.send(); });
```

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

### Run First Playwright PHP Script

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/getting-started.md

Execute a basic Playwright script to navigate to a website, capture a screenshot, and generate a PDF. Ensure you have run 'composer install' and 'vendor/bin/playwright-install --browsers' first.

```php
<?php

require __DIR__.'/vendor/autoload.php';

use Playwright\Playwright;

// Start a new Playwright client and launch a browser.
// By default, it launches a headless Chromium instance.
$context = Playwright::chromium();

// Create a new page within the browser context.
$page = $context->newPage();

// Navigate to a website.
$page->goto('https://example.com');

// Get the title of the page and print it to the console.
echo $page->title() . PHP_EOL; // Outputs: "Example Domain"

// Take a screenshot and save it as 'screenshot.png'.
$page->screenshot('screenshot.png');

// Export the page to PDF on disk.
$page->pdf('invoice.pdf', ['format' => 'A4']);

// Or grab the PDF bytes directly without keeping files around.
$pdfBytes = $page->pdfContent();
file_put_contents('inline-invoice.pdf', $pdfBytes);

// Close the browser context and all its pages.
$context->close();

```

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

### Load Authentication State in Playwright PHP Tests

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/handling-authentication.md

Configure your PlaywrightTestCase to use saved authentication state by overriding the setUp method to load the storage state. This allows tests to start in an authenticated state.

```php
<?php
namespace App\Tests;

use Playwright\Testing\PlaywrightTestCase;

abstract class AuthenticatedTestCase extends PlaywrightTestCase
{
    protected function setUp(): void
    {
        parent::setUp();

        // Load the saved authentication state before each test
        $this->context->loadStorageState(__DIR__.'/../auth.json');
    }
}

```

```php
<?php
namespace App\Tests;

use function Playwright\Testing\expect;

class ProfilePageTest extends AuthenticatedTestCase
{
    public function testUserProfileShowsCorrectUsername(): void
    {
        // No need to log in here; we are already authenticated.
        $this->page->goto('https://my-app.com/profile');

        expect($this->page->locator('.username-display'))->toHaveText('test-user');
    }
}

```

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

### Enable Playwright Debugging via Environment Variable (PHP)

Source: https://github.com/playwright-php/playwright/blob/main/docs/inspector.md

Set the PWDEBUG environment variable to 1 to enable Playwright debugging for your PHP script. This is an alternative to programmatic setup.

```bash
PWDEBUG=1 php your_script.php
```

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

### JavaScript Cookie Management and Authentication Check

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/auth.html

Utility functions for getting cookies and checking/updating authentication status. Sets up event listeners for login and logout actions.

```javascript
function getCookie(name) {
    const value = ` ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return null;
}

function checkAuth() {
    const authToken = getCookie('auth_token');
    const username = getCookie('username');

    if (authToken) {
        document.getElementById('auth-status').textContent = 'Authenticated';
        document.getElementById('login-form').style.display = 'none';
        document.getElementById('logout-btn').style.display = 'block';
        document.getElementById('user-info').style.display = 'block';
        document.getElementById('user-info').textContent = 'Logged in as: ' + username;
    } else {
        document.getElementById('auth-status').textContent = 'Not authenticated';
        document.getElementById('login-form').style.display = 'block';
        document.getElementById('logout-btn').style.display = 'none';
        document.getElementById('user-info').style.display = 'none';
    }
}

document.getElementById('login-form').addEventListener('submit', (e) => {
    e.preventDefault();
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // Simple mock authentication
    if (username && password) {
        // Set auth cookies
        document.cookie = `auth_token=token_${Math.random().toString(36).substr(2, 9)}; path=/`;
        document.cookie = `username=${username}; path=/`;
        document.cookie = `session_id=sess_${Date.now()}; path=/`;
        checkAuth();
    }
});

document.getElementById('logout-btn').addEventListener('click', () => {
    // Clear auth cookies
    document.cookie = 'auth_token=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
    document.cookie = 'username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
    document.cookie = 'session_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
    checkAuth();
});

// Check auth on load
checkAuth();
```

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

### Interact with Frames using page.frameLocator()

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/advanced-recipes.md

Use `$page->frameLocator()` to get a `FrameLocator` for interacting with elements inside an `<iframe>`. You can then use the frame locator's `.locator()` method to find elements within that specific frame.

```php
// Create a locator for the iframe
$frame = $this->page->frameLocator('#my-iframe');

// Now find elements within that frame
$frameInput = $frame->locator('#name-input');
$frameInput->fill('This is inside a frame');

$frameButton = $frame->locator('button:has-text("Submit")');
$frameButton->click();
```

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

### Using .withTimeout() Modifier in PHP

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/assertions-reference.md

Shows how to override the default 5-second assertion timeout using the .withTimeout() modifier. This example sets a 10-second timeout for an element to become visible.

```php
// Wait up to 10 seconds for the success message to appear
expect($this->page->locator('.success-message'))
    ->withTimeout(10000)
    ->toBeVisible();
```

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

### Handle Mouse Enter and Leave Events

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/mouse.html

Listens for mouse entering and leaving a specific area, updating a result element to indicate the mouse's status. No special setup is required beyond having the target element.

```javascript
const hoverArea = document.getElementById('hover-area');
const hoverResult = document.getElementById('hover-result');

hoverArea.addEventListener('mouseenter', () => {
  hoverResult.textContent = 'Mouse entered';
});

hoverArea.addEventListener('mouseleave', () => {
  hoverResult.textContent = 'Mouse left';
});
```

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

### Launch Browser with Options

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

Launches a WebKit browser with specific options like headless mode, slow motion, and command-line arguments. Context options can also be provided.

```php
$context = Playwright::webkit([
    'headless' => false,
    'slowMo'   => 200,
    'args'     => ['--no-sandbox'],
    // 'context' => [ ... context options ... ],
]);

```

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

### Create Isolated Browser Contexts and Pages

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/core-concepts.md

Demonstrates creating multiple isolated browser contexts from a single browser instance and opening new pages within each context.

```php
// The Browser object is available on the context.
$browser = $context->browser();

// Create a second, isolated context.
$adminContext = $browser->newContext();

// Create a new page in each context.
$userPage = $context->newPage();
$adminPage = $adminContext->newPage();

```

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

### Basic expect() Usage in PHP

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/assertions-reference.md

Demonstrates how to use the expect() function with locators and page objects for assertions. Ensure the Playwrights Testing expect function is imported.

```php
use function Playwright\Testing\expect;

// Make an assertion about a locator
expect($this->page->locator('h1'))->toHaveText('Welcome!');

// Make an assertion about the page
expect($this->page)->toHaveURL('https://my-app.com/dashboard');
```

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

### Configure Browser with PlaywrightConfigBuilder

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/advanced-recipes.md

Customize browser launch settings like headless mode, slow motion, custom arguments, and proxy servers using `PlaywrightConfigBuilder`. This configuration is applied when creating the `PlaywrightClient` instance.

```php
use Playwright\PlaywrightFactory;
use Playwright\Configuration\PlaywrightConfigBuilder;

// Create a custom configuration
$config = PlaywrightConfigBuilder::create()
    ->withHeadless(false)
    ->withSlowMoMs(50)
    ->addArg('--start-maximized')
    ->withProxy('http://myproxy.com:8080')
    ->build();

// Create a Playwright client with the custom config
$playwright = PlaywrightFactory::create($config);

// Now launch the browser, which will use these settings
$browser = $playwright->chromium()->launch();
```

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

### Enable Tracing on macOS/Linux

Source: https://github.com/playwright-php/playwright/blob/main/docs/contributing/testing.md

Enable tracing for each run by setting the `PW_TRACE` environment variable to `1`. This enables screenshots and snapshots for each test, with artifacts saved to `test-failures/` on failure.

```bash
PW_TRACE=1 composer test:integration
```

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

### Page Navigation and Content Retrieval

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

Creates a new page, navigates to a URL, and retrieves the HTML content and title of the page. Also demonstrates taking a screenshot.

```php
$page = $context->newPage();
$page->goto('https://example.com');

$html  = $page->content();
$title = $page->title();

$path = $page->screenshot(__DIR__.'/screenshot.png');

```

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

### Launch Playwright with Inspector (PHP)

Source: https://github.com/playwright-php/playwright/blob/main/docs/inspector.md

Launch a browser instance with the inspector enabled. This allows for interactive debugging.

```php
$browser = $playwright->chromium()->withHeadless(false)->withInspector()->launch();
```

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

### Locate and Interact with Web Elements in PHP

Source: https://context7.com/playwright-php/playwright/llms.txt

Demonstrates various strategies for locating elements using Playwright's locator API, including CSS selectors, IDs, classes, attributes, and semantic locators. Covers common interactions like clicking, typing, checking, selecting, and focusing elements. Use semantic locators for more robust selectors.

```php
<?php

use Playwright\Playwright;

$context = Playwright::chromium();
$page = $context->newPage();
$page->goto('https://example.com');

// Basic locator by CSS selector
$heading = $page->locator('h1');
echo $heading->textContent(); // "Example Domain"

// Find by various strategies
$byId = $page->locator('#username');
$byClass = $page->locator('.submit-button');
$byAttribute = $page->locator('[data-testid="login-form"]');

// Semantic locators (recommended)
$byRole = $page->getByRole('button', ['name' => 'Submit']);
$byLabel = $page->getByLabel('Email address');
$byPlaceholder = $page->getByPlaceholder('Enter your email');
$byText = $page->getByText('Sign in');
$byTestId = $page->getByTestId('submit-button');
$byTitle = $page->getByTitle('Close dialog');
$byAltText = $page->getByAltText('Company logo');

// Click interactions
$page->locator('button')->click();
$page->locator('a')->dblclick();
$page->locator('div')->hover();

// Form interactions
$page->locator('#username')->fill('alice@example.com');
$page->locator('#password')->fill('s3cret');
$page->locator('#password')->press('Enter');
$page->locator('#search')->type('query', ['delay' => 100]); // Type with delay

// Checkbox and radio
$page->locator('#terms')->check();
$page->locator('#newsletter')->uncheck();

// Select dropdown
$page->locator('select#country')->selectOption('US');
$page->locator('select#tags')->selectOption(['tag1', 'tag2']); // Multiple

// Clear input field
$page->locator('#search')->clear();

// Focus and blur
$page->locator('#input')->focus();
$page->locator('#input')->blur();

// Chaining locators
$form = $page->locator('form#login');
$submitButton = $form->locator('button[type="submit"]');
$submitButton->click();

// Get multiple elements
$links = $page->locator('a');
echo $links->count(); // Number of links

foreach ($links->all() as $link) {
    echo $link->textContent() . "\n";
}

// First, last, nth element
$firstLink = $page->locator('a')->first();
$lastLink = $page->locator('a')->last();
$thirdLink = $page->locator('a')->nth(2);

// Element state checks
if ($page->locator('#submit')->isVisible()) {
    $page->locator('#submit')->click();
}

$isEnabled = $page->locator('button')->isEnabled();
$isChecked = $page->locator('input[type="checkbox"]')->isChecked();
$isHidden = $page->locator('.loading')->isHidden();

// Get attributes and values
$href = $page->locator('a')->getAttribute('href');
$value = $page->locator('input')->inputValue();
$innerHtml = $page->locator('div')->innerHTML();
$innerText = $page->locator('p')->innerText();

// Wait for element states
$page->locator('.loading')->waitFor(['state' => 'hidden']);
$page->waitForSelector('.content', ['state' => 'visible']);

$context->close();

```

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

### Configure Playwright with PlaywrightConfigBuilder

Source: https://context7.com/playwright-php/playwright/llms.txt

Use PlaywrightConfigBuilder to create custom browser configurations, including headless mode, slow motion, arguments, and proxy settings. This allows for fine-grained control over browser launches.

```php
<?php

use Playwright\PlaywrightFactory;
use Playwright\Configuration\PlaywrightConfigBuilder;

// Create custom configuration
$config = PlaywrightConfigBuilder::create()
    ->withHeadless(false)
    ->withSlowMoMs(50)
    ->addArg('--start-maximized')
    ->withProxy('http://myproxy.com:8080')
    ->build();

// Create Playwright client with custom config
$playwright = PlaywrightFactory::create($config);

// Launch browser with these settings
$browser = $playwright->chromium()->launch();
$context = $browser->newContext();
$page = $context->newPage();

$page->goto('https://example.com');

$browser->close();
$playwright->close();

```

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

### Enable Tracing on Windows (PowerShell)

Source: https://github.com/playwright-php/playwright/blob/main/docs/contributing/testing.md

Enable tracing for each run by setting the `PW_TRACE` environment variable to `1`. This enables screenshots and snapshots for each test, with artifacts saved to `test-failures/` on failure.

```powershell
$env:PW_TRACE='1'; composer test:integration
```

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

### Page Navigation and Content Manipulation in Playwright PHP

Source: https://context7.com/playwright-php/playwright/llms.txt

Navigate to URLs, retrieve page information like URL and title, get or set HTML content, and execute JavaScript. Supports navigation history and waiting for specific load states or URLs.

```php
<?php

use Playwright\Playwright;

$context = Playwright::chromium();
$page = $context->newPage();

// Navigate to a URL
$page->goto('https://example.com');

// Get page information
echo $page->url();    // "https://example.com/"
echo $page->title();  // "Example Domain"

// Get full HTML content
$html = $page->content();

// Set custom HTML content
$page->setContent('<html><body><h1>Hello World</h1></body></html>');

// Execute JavaScript and get result
$result = $page->evaluate('() => document.title');
echo $result; // "Example Domain"

// Execute JavaScript with arguments
$sum = $page->evaluate('(a, b) => a + b', [5, 3]);
echo $sum; // 8

// Navigation history
$page->goto('https://example.com');
$page->click('a');
$page->goBack();
$page->goForward();
$page->reload();

// Wait for navigation states
$page->waitForLoadState('networkidle');
$page->waitForURL('**/dashboard');

$context->close();

```

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

### Using expect() with Locators and Pages

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/assertions-reference.md

Demonstrates the basic usage of the `expect()` function with both `Locator` and `Page` objects in Playwright for PHP.

```APIDOC
## Using `expect()`

The `expect()` function can be passed either a `Locator` or a `Page` object. It returns an assertion object that you can use to make claims about the state of your application.

```php
use function Playwright\Testing\expect;

// Make an assertion about a locator
expect($this->page->locator('h1'))->toHaveText('Welcome!');

// Make an assertion about the page
expect($this->page)->toHaveURL('https://my-app.com/dashboard');
```
```

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

### Display and Manage Cookies in JavaScript

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/cookies.html

This JavaScript code manages and displays cookies in the browser. It includes functions to display all cookies, get a specific cookie by name, set simple cookies, set multiple cookies, set cookies with expiration options, and clear all cookies. It also sets up event listeners for buttons to trigger these actions and updates the display periodically.

```javascript
function displayCookies() {
    const cookies = document.cookie;
    document.getElementById('cookies-output').textContent = cookies || '(no cookies)';
    const cookieArray = cookies.split(';').filter(c => c.trim());
    document.getElementById('cookie-count').textContent = `Cookie count: ${cookieArray.length}`;
}

function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
    return null;
}

document.getElementById('set-simple-cookie').addEventListener('click', () => {
    document.cookie = 'simple_cookie=test_value; path=/';
    displayCookies();
});

document.getElementById('set-multiple-cookies').addEventListener('click', () => {
    document.cookie = 'cookie1=value1; path=/';
    document.cookie = 'cookie2=value2; path=/';
    document.cookie = 'cookie3=value3; path=/';
    displayCookies();
});

document.getElementById('set-cookie-with-options').addEventListener('click', () => {
    const expires = new Date();
    expires.setTime(expires.getTime() + (24 * 60 * 60 * 1000)); // 1 day
    document.cookie = `persistent_cookie=persistent_value; expires=${expires.toUTCString()}; path=/`;
    displayCookies();
});

document.getElementById('clear-all-cookies').addEventListener('click', () => {
    document.cookie.split(';').forEach(cookie => {
        const name = cookie.split('=')[0].trim();
        document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
    });
    displayCookies();
});

// Display cookies on load
displayCookies();

// Update display every second to catch changes
setInterval(displayCookies, 1000);
```

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

### PHPUnit Integration for End-to-End Tests

Source: https://context7.com/playwright-php/playwright/llms.txt

Demonstrates how to write end-to-end tests using Playwright with PHPUnit. Includes navigation, form filling, and assertions for successful login and form validation.

```php
<?php

namespace App\Tests;

use Playwright\Testing\PlaywrightTestCase;
use function Playwright\Testing\expect;

class LoginTest extends PlaywrightTestCase
{
    public function testUserCanLogInSuccessfully(): void
    {
        // Navigate to login page
        $this->page->goto('https://my-app.com/login');

        // Fill in the form
        $this->page->locator('#username')->fill('my-user');
        $this->page->locator('#password')->fill('secure-password');
        $this->page->locator('button[type="submit"]').click();

        // Assert successful login
        expect($this->page)->toHaveURL('https://my-app.com/dashboard');
        expect($this->page->locator('h1'))->toHaveText('Welcome, my-user!');
    }

    public function testFormValidation(): void
    {
        $this->page->goto('https://my-app.com/register');

        // Submit empty form
        $this->page->locator('button[type="submit"]').click();

        // Assert error messages are visible
        expect($this->page->locator('.error-message'))->toBeVisible();
        expect($this->page->locator('#email-error'))->toHaveText('Email is required');
    }

    public function testElementStates(): void
    {
        $this->page->goto('https://my-app.com/form');

        // Assert element visibility
        expect($this->page->locator('.loading-spinner'))->not()->toBeVisible();
        expect($this->page->locator('form'))->toBeVisible();

        // Assert element states
        expect($this->page->locator('button[type="submit"]'))->toBeEnabled();
        expect($this->page->locator('#terms'))->not()->toBeChecked();

        // Assert element attributes
        expect($this->page->locator('a.help-link'))->toHaveAttribute('href', '/help');

        // Assert element count
        expect($this->page->locator('input'))->toHaveCount(3);

        // Assert with custom timeout
        expect($this->page->locator('.async-content'))
            ->withTimeout(10000)
            ->toBeVisible();
    }
}

```

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

### Connecting to External Browsers via Chrome DevTools Protocol

Source: https://context7.com/playwright-php/playwright/llms.txt

Shows how to connect to a browser instance via the Chrome DevTools Protocol (CDP), specifically for Chromium.

```php
// Connect via Chrome DevTools Protocol (Chromium only)
// First start Chrome: chrome --remote-debugging-port=9222
$playwright = PlaywrightFactory::create();
$cdpEndpoint = 'http://127.0.0.1:9222';

$browser = $playwright->chromium()->connectOverCDP($cdpEndpoint);
$context = $browser->newContext();
$page = $context->newPage();
$page->goto('https://example.com');

$browser->close();
$playwright->close();

```

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

### Connecting to External Browsers via WebSocket

Source: https://context7.com/playwright-php/playwright/llms.txt

Demonstrates how to connect to a Playwright browser server running in a separate process using its WebSocket endpoint.

```php
<?php

use Playwright\PlaywrightFactory;

// Step 1: Start browser server (in separate process)
$playwright = PlaywrightFactory::create();
$server = $playwright->launchServer('chromium', ['headless' => true]);
echo $server->wsEndpoint(); // ws://127.0.0.1:PORT/ID

// Step 2: Connect from another script
$playwright = PlaywrightFactory::create();
$endpoint = getenv('REMOTE_WS_ENDPOINT'); // ws://127.0.0.1:PORT/ID

$browser = $playwright->chromium()->connect($endpoint);
$context = $browser->newContext();
$page = $context->newPage();
$page->goto('https://example.com');

echo $page->title();

$browser->close();
$playwright->close();

```

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

### Simulate AJAX Data Fetching

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/waiting.html

This code simulates fetching data from a server, displaying a 'Fetching...' message, and then replacing it with actual data. It's ideal for testing asynchronous data retrieval.

```javascript
// AJAX simulation
document.getElementById('fetch-data').addEventListener('click', () => {
  const container = document.getElementById('data-container');
  container.textContent = 'Fetching...';
  setTimeout(() => {
    container.innerHTML = '<div id="fetched-data">Data from server</div>';
  }, 700);
});
```

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

### Storage State Management

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

Saves the current browser context's storage state to a JSON file, which can be reused later to initialize a new context with the same state.

```php
$context->storageState(__DIR__.'/state.json');

// Later in another process
$ctx = Playwright::chromium([
  'context' => ['storageState' => __DIR__.'/state.json'],
]);

```

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

### Simulate Dynamic Element Addition

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/waiting.html

Demonstrates adding elements to the DOM dynamically over time. This is useful for testing interactions with lists or content that populates asynchronously.

```javascript
// Dynamic elements
document.getElementById('add-elements').addEventListener('click', () => {
  const list = document.getElementById('dynamic-list');
  setTimeout(() => {
    const li1 = document.createElement('li');
    li1.textContent = 'Item 1';
    li1.className = 'list-item';
    list.appendChild(li1);
  }, 300);
  setTimeout(() => {
    const li2 = document.createElement('li');
    li2.textContent = 'Item 2';
    li2.className = 'list-item';
    list.appendChild(li2);
  }, 600);
  setTimeout(() => {
    const li3 = document.createElement('li');
    li3.textContent = 'Item 3';
    li3.className = 'list-item';
    list.appendChild(li3);
  }, 900);
});
```

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

### Perform XHR POST Request

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/network.html

Initiates an XMLHttpRequest (XHR) POST request to create a new user with JSON data. Updates the UI with the response or an error.

```javascript
document.getElementById('xhr-post').addEventListener('click', () => { const result = document.getElementById('xhr-result'); const xhr = new XMLHttpRequest(); xhr.open('POST', '/api/create'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onload = () => { result.textContent = 'XHR POST: ' + xhr.responseText; }; xhr.onerror = () => { result.textContent = 'XHR Error'; }; xhr.send(JSON.stringify({ name: 'Test User' })); });
```

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

### Upload Files with setInputFiles

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/advanced-recipes.md

Use the `setInputFiles()` method on a Locator to upload single or multiple files to an `<input type="file">` element.

```php
// Find the file input element
$fileChooser = $this->page->locator('#upload-input');

// Upload a single file
$fileChooser->setInputFiles(__DIR__.'/fixtures/avatar.jpg');

// Upload multiple files
$fileChooser->setInputFiles([
    __DIR__.'/fixtures/document1.pdf',
    __DIR__.'/fixtures/document2.docx',
]);
```

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

### Write a PHPUnit Test with Playwright

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/testing-with-phpunit.md

Write a test case by extending PlaywrightTestCase. Access $this->page, $this->context, and $this->browser to interact with the browser and perform assertions.

```php
<?php

namespace App\Tests;

use Playwright\Testing\PlaywrightTestCase;
use function Playwright\Testing\expect;

class MyWebAppTest extends PlaywrightTestCase
{
    public function testUserCanLogInSuccessfully(): void
    {
        // 1. Navigate to the login page
        $this->page->goto('https://my-app.com/login');

        // 2. Fill in the form
        $this->page->locator('#username')->fill('my-user');
        $this->page->locator('#password')->fill('secure-password');
        $this->page->locator('button[type="submit"])->click();

        // 3. Assert that the login was successful
        expect($this->page)->toHaveURL('https://my-app.com/dashboard');
        expect($this->page->locator('h1'))->toHaveText('Welcome, my-user!');
    }
}
```

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

### Connect to External Browser via Playwright Protocol

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/connect-browser.md

Connects to a running browser server using its wsEndpoint. Ensure the REMOTE_WS_ENDPOINT environment variable is set.

```php
<?php

require __DIR__.'/vendor/autoload.php';

use Playwright\PlaywrightFactory;

$playwright = PlaywrightFactory::create();
$endpoint = getenv('REMOTE_WS_ENDPOINT'); // ws://127.0.0.1:PORT/ID

if (false === $endpoint || '' === $endpoint) {
    throw new \RuntimeException('Set REMOTE_WS_ENDPOINT to the wsEndpoint() value.');
}

$browser = $playwright->chromium()->connect($endpoint);
$context = $browser->newContext();
$page = $context->newPage();
$page->goto('https://example.com');

echo $page->title().PHP_EOL;

$browser->close();
$playwright->close();

```

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

### Handle JavaScript Dialogs with page.events().onDialog()

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/advanced-recipes.md

Listen for and automatically handle JavaScript dialogs (`alert`, `confirm`, `prompt`) using the `onDialog` event handler. Assert dialog messages and accept or dismiss them.

```php
// Listen for the next dialog that appears
$this->page->events()->onDialog(function ($dialog) {
    // Assert the dialog message is correct
    $this->assertSame('Are you sure you want to delete this item?', $dialog->message());

    // Accept the dialog
    $dialog->accept();
});

// Perform the action that triggers the dialog
$this->page->locator('#delete-item-button')->click();
```

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

### Load Image Resource

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/network.html

Dynamically creates and appends an image element to the DOM. Reports success or failure upon image load.

```javascript
document.getElementById('load-image').addEventListener('click', () => { const container = document.getElementById('resource-container'); const result = document.getElementById('resource-result'); const img = document.createElement('img'); img.src = '/images/test.png'; img.width = 100; img.onload = () => { result.textContent = 'Image loaded'; }; img.onerror = () => { result.textContent = 'Image failed'; }; container.appendChild(img); });
```

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

### Set viewport size and emulate devices with Playwright PHP

Source: https://context7.com/playwright-php/playwright/llms.txt

Configure the browser viewport size for custom dimensions or mobile emulation. Captures screenshots to verify viewport settings at runtime.

```php
<?php

use Playwright\Playwright;

$context = Playwright::chromium(['headless' => true]);

// Create page with custom viewport
$page = $context->newPage(['viewport' => ['width' => 1200, 'height' => 800]]);
$page->goto('https://howbigismybrowser.com/');

$viewport = $page->viewportSize();
echo sprintf("Viewport: %dx%d\n", $viewport['width'], $viewport['height']);

$page->screenshot('./viewport_1200x800.png');

// Change viewport at runtime
$page->setViewportSize(1920, 1080);
$page->reload();
$page->screenshot('./viewport_1920x1080.png');

// Mobile viewport
$page->setViewportSize(375, 667);
$page->reload();
$page->screenshot('./mobile.png');

$context->close();

```

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

### Locator Interactions: Click and Fill

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

Finds elements using locators and performs interactions like clicking buttons and filling input fields. Supports pressing 'Enter' after filling.

```php
$button = $page->locator('text=Sign in');
$button->click();

$username = $page->locator('#username');
$username->fill('alice@example.com');

$password = $page->locator('#password');
$password->fill('s3cret');
$password->press('Enter');

```

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

### Launch Browsers with Playwright PHP

Source: https://context7.com/playwright-php/playwright/llms.txt

Launch different browser engines (Chromium, Firefox, WebKit/Safari) using the Playwright facade. Custom options like `headless`, `slowMo`, and `args` can be provided during launch.

```php
<?php

require __DIR__.'/vendor/autoload.php';

use Playwright\Playwright;

// Launch Chromium (default)
$context = Playwright::chromium(['headless' => true]);

// Launch Firefox
$context = Playwright::firefox(['headless' => true]);

// Launch WebKit
$context = Playwright::webkit(['headless' => true]);

// Safari is an alias for WebKit
$context = Playwright::safari(['headless' => true]);

// Launch with custom options
$context = Playwright::chromium([
    'headless' => false,      // Show browser window
    'slowMo' => 200,          // Slow down operations by 200ms
    'args' => ['--no-sandbox'], // Custom browser arguments
]);

$page = $context->newPage();
$page->goto('https://example.com');
echo $page->title(); // "Example Domain"

$context->close();

```

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

### Handle JavaScript Dialogs

Source: https://context7.com/playwright-php/playwright/llms.txt

Handle JavaScript alert, confirm, and prompt dialogs. Listen for dialog events, accept, dismiss, or provide input for prompt dialogs.

```php
<?php

use Playwright\Playwright;

$context = Playwright::chromium();
$page = $context->newPage();

// Listen for dialogs
$page->events()->onDialog(function ($dialog) {
    echo "Dialog type: " . $dialog->type() . "\n";
    echo "Message: " . $dialog->message() . "\n";

    // Accept the dialog
    $dialog->accept();

    // Or dismiss it
    // $dialog->dismiss();

    // For prompt dialogs, provide input
    // $dialog->accept('User input text');
});

// Trigger a dialog
$page->evaluate('() => alert("Hello!")');
$page->evaluate('() => confirm("Are you sure?")');
$page->evaluate('() => prompt("Enter your name:")');

$context->close();

```

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

### Simulate Loading States

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/waiting.html

This snippet simulates a loading process, hiding a loading indicator and showing content after a delay. Useful for testing pages with asynchronous data loading.

```javascript
// Loading states
document.getElementById('trigger-loading').addEventListener('click', () => {
  const indicator = document.getElementById('loading-indicator');
  const content = document.getElementById('loaded-content');
  indicator.classList.remove('hidden');
  setTimeout(() => {
    indicator.classList.add('hidden');
    content.classList.remove('hidden');
  }, 1000);
});
```

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

### Connect to Browser via Chrome DevTools Protocol (CDP)

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/connect-browser.md

Connects to a Chrome/Chromium instance running with remote debugging enabled. Uses the CDP_ENDPOINT environment variable or defaults to http://127.0.0.1:9222.

```php
<?php

require __DIR__.'/vendor/autoload.php';

use Playwright\PlaywrightFactory;

$playwright = PlaywrightFactory::create();
$cdpEndpoint = getenv('CDP_ENDPOINT') ?: 'http://127.0.0.1:9222';

$browser = $playwright->chromium()->connectOverCDP($cdpEndpoint);
$context = $browser->newContext();
$page = $context->newPage();
$page->goto('https://example.com');

echo $page->title().PHP_EOL;

$browser->close();
$playwright->close();

```

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

### Navigate and Interact with a Page

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/core-concepts.md

Basic page interactions including navigating to a URL, clicking elements, and typing into input fields using CSS selectors.

```php
// Navigate the page to a URL.
$page->goto('https://github.com');

// Interact with elements on the page.
$page->click('a.HeaderMenu-link--sign-in');
$page->type('#login_field', 'my-username');

```

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

### Load Script Resource

Source: https://github.com/playwright-php/playwright/blob/main/tests/Fixtures/html/network.html

Dynamically creates and appends a script element to the document body. Reports success or failure upon script load.

```javascript
document.getElementById('load-script').addEventListener('click', () => { const result = document.getElementById('resource-result'); const script = document.createElement('script'); script.src = '/scripts/test.js'; script.onload = () => { result.textContent = 'Script loaded'; }; script.onerror = () => { result.textContent = 'Script failed'; }; document.body.appendChild(script); });
```

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

### Manage Browser Contexts and Session State

Source: https://context7.com/playwright-php/playwright/llms.txt

Create isolated browser contexts with independent storage. Save and reuse authentication states to avoid re-login. Manage cookies at the context level.

```php
<?php

use Playwright\Playwright;

$context = Playwright::chromium();
$page = $context->newPage();

// Login and save session state
$page->goto('https://my-app.com/login');
$page->locator('#username')->fill('test-user');
$page->locator('#password')->fill('password123');
$page->locator('button[type="submit
'])->click();
$page->waitForURL('**/dashboard');

// Save authentication state to file
$context->saveStorageState('./auth.json');

$context->close();

// Later: Reuse saved authentication state
$authenticatedContext = Playwright::chromium([
    'context' => ['storageState' => './auth.json'],
]);
$page = $authenticatedContext->newPage();
$page->goto('https://my-app.com/profile'); // Already logged in

// Cookie management
$cookies = $context->cookies();
$context->addCookies([
    [
        'name' => 'session',
        'value' => 'abc123',
        'domain' => 'example.com',
        'path' => '/',
    ],
]);
$context->clearCookies();
$context->deleteCookie('session');

// Multiple isolated contexts from same browser
$browser = $context->browser();
$adminContext = $browser->newContext();
$userContext = $browser->newContext();

$adminPage = $adminContext->newPage();
$userPage = $userContext->newPage();

// Contexts don't share state
$adminPage->goto('https://app.com/admin');
$userPage->goto('https://app.com/dashboard');

$authenticatedContext->close();

```

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

### Execute PHP Script

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/getting-started.md

Run the Playwright PHP script from your terminal.

```bash
php example.php
```

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

### Save Authentication State in Playwright PHP

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/handling-authentication.md

Create a standalone script to perform login and save the authentication state to a file. This script should be run once or when credentials change. It navigates to the login page, fills credentials, submits, waits for navigation, and saves the state.

```php
<?php
require __DIR__.'/vendor/autoload.php';
use Playwright\Playwright;

$context = Playwright::chromium();
$page = $context->newPage();

$page->goto('https://my-app.com/login');
$page->locator('#username')->fill('test-user');
$page->locator('#password')->fill('password123');
$page->locator('button[type="submit"]')->click();

// Wait for the navigation to the dashboard to complete
$page->waitForURL('**/dashboard');

// Save the storage state to a file
$context->saveStorageState(__DIR__.'/auth.json');

$context->close();

echo "Authentication state saved successfully to auth.json\n";

```

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

### Mock API Responses with page.route()

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/advanced-recipes.md

Intercept network requests using `$page->route()` to mock API responses. This is useful for testing edge cases and simulating different API behaviors.

```php
// Mock an API response
$this->page->route('**/api/v1/users/me', function ($route) {
    $route->fulfill([
        'status' => 200,
        'contentType' => 'application/json',
        'body' => json_encode([
            'id' => 123,
            'name' => 'Mock User',
            'email' => 'mock@example.com',
        ]),
    ]);
});

// Navigate to the page that makes the API call
$this->page->goto('/profile');

// Assert that the mocked data is displayed
expect($this->page->locator('.username'))->toHaveText('Mock User');
```

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

### Perform UI Login in Playwright PHP

Source: https://github.com/playwright-php/playwright/blob/main/docs/guide/handling-authentication.md

Use this strategy to test login and logout functionality by interacting with the login form. Navigate to the login page, fill in credentials, and submit the form.

```php
public function testUserCanLogIn(): void
{
    $this->page->goto('https://my-app.com/login');

    $this->page->locator('#username')->fill('test-user');
    $this->page->locator('#password')->fill('password123');
    $this->page->locator('button[type="submit"]')->click();

    // Assert that the user is redirected to the dashboard
    expect($this->page)->toHaveURL('https://my-app.com/dashboard');
}
```