Playwriter Examples

Copy Markdown View Source

Runnable examples demonstrating Playwriter's browser automation capabilities.

Prerequisites

Before running examples, you need either:

Option A: Local Mode

mix playwriter.setup

Option B: Remote Mode (WSL to Windows)

# From WSL (bypass execution policy)
powershell.exe -ExecutionPolicy Bypass -File priv/scripts/start_server.ps1

Or manually on Windows PowerShell:

cd $env:TEMP; mkdir playwriter-server -ErrorAction SilentlyContinue; cd playwriter-server
npm init -y; npm install playwright; npx playwright install chromium
node -e "const{chromium}=require('playwright');chromium.launchServer({headless:false,port:3337}).then(s=>console.log(s.wsEndpoint()))"

Running Examples

All examples support both local and remote modes:

# Auto-detect available mode
mix run examples/fetch_html.exs

# Force local mode (headless browser on this machine)
mix run examples/fetch_html.exs --local

# Force remote mode (visible browser on Windows)
mix run examples/fetch_html.exs --remote

# Remote with explicit endpoint
mix run examples/fetch_html.exs --remote --endpoint ws://localhost:3337/

Available Examples

fetch_html.exs

Fetches HTML content from a webpage.

mix run examples/fetch_html.exs

What it does:

  1. Opens a browser (headless or visible depending on mode)
  2. Navigates to example.com
  3. Extracts the HTML content
  4. Prints the first 500 characters

Code highlights:

{:ok, html} = Playwriter.fetch_html("https://example.com")

screenshot.exs

Takes a screenshot of a webpage.

mix run examples/screenshot.exs

What it does:

  1. Opens a browser
  2. Navigates to example.com
  3. Captures a PNG screenshot
  4. Saves to screenshot.png

Output: screenshot.png in current directory

Code highlights:

{:ok, png_data} = Playwriter.screenshot("https://example.com")
File.write!("screenshot.png", png_data)

interaction.exs

Demonstrates form filling and button clicking.

mix run examples/interaction.exs

What it does:

  1. Opens a browser
  2. Navigates to httpbin.org/forms/post
  3. Fills in form fields (name, email, phone)
  4. Clicks the submit button
  5. Shows the result page

Code highlights:

Playwriter.with_browser(opts, fn ctx ->
  :ok = Playwriter.goto(ctx, "https://httpbin.org/forms/post")
  :ok = Playwriter.fill(ctx, "input[name=custname]", "Test User")
  :ok = Playwriter.fill(ctx, "input[name=custemail]", "test@example.com")
  :ok = Playwriter.click(ctx, "button")
  {:ok, html} = Playwriter.content(ctx)
  html
end)

windows_browser.exs

Specifically demonstrates WSL-to-Windows browser control.

# Requires Windows server running
mix run examples/windows_browser.exs

What it does:

  1. Discovers the Windows Playwright server
  2. Opens a visible browser on your Windows desktop
  3. Navigates to example.com (you can watch it!)
  4. Waits 2 seconds so you can see the browser
  5. Takes a screenshot
  6. Closes the browser

Output: windows_screenshot.png

This example is remote-only - it's specifically for demonstrating the WSL-to-Windows feature.


CLI Options

All examples support these flags:

FlagShortDescription
--local-lForce local mode (headless)
--remote-rForce remote mode (Windows)
--endpoint URL-eSpecify WebSocket endpoint
--headless-hRun headless (even in remote mode)

Mode Auto-Detection

When you don't specify --local or --remote, examples auto-detect:

  1. Try remote first - Check if a Windows server is running
  2. Fall back to local - If no server, try local Playwright
  3. Show error - If neither works, show setup instructions

This means in WSL with a Windows server running, examples automatically use remote mode and show you the browser.

Error Messages

Examples provide helpful error messages:

No local Playwright:

============================================================
ERROR: Local Playwright not installed
============================================================

To use local mode, run:

    mix playwriter.setup

No Windows server:

============================================================
ERROR: No Playwright server found
============================================================

To use remote mode, start the Windows server:

    powershell.exe -ExecutionPolicy Bypass -File priv/scripts/start_server.ps1

Writing Your Own Scripts

Use the examples as templates:

# my_script.exs

# Simple one-liner
{:ok, html} = Playwriter.fetch_html("https://mysite.com")

# With options
{:ok, html} = Playwriter.fetch_html("https://mysite.com",
  mode: :remote,        # or :local
  headless: false,      # show browser
  timeout: 60_000       # 60 second timeout
)

# Complex interaction
{:ok, result} = Playwriter.with_browser([mode: :remote], fn ctx ->
  :ok = Playwriter.goto(ctx, "https://mysite.com/login")
  :ok = Playwriter.fill(ctx, "#email", "me@example.com")
  :ok = Playwriter.fill(ctx, "#password", "secret")
  :ok = Playwriter.click(ctx, "button[type=submit]")

  # Wait for navigation
  Process.sleep(2000)

  {:ok, html} = Playwriter.content(ctx)
  html
end)

Run your script:

mix run my_script.exs

Troubleshooting

Examples fail immediately

Check that you have either local Playwright or Windows server:

# Check local
ls deps/playwright/priv/static/node_modules/playwright/cli.js

# Check remote (should show endpoint)
mix run -e "IO.inspect Playwriter.Server.Discovery.discover()"

Browser doesn't appear in remote mode

Make sure you're not passing --headless:

mix run examples/windows_browser.exs  # Not --headless

Timeout errors

Increase the timeout or check network connectivity:

Playwriter.fetch_html(url, timeout: 120_000)

"Target closed" errors

The browser closed unexpectedly. Don't manually close browser windows during automation.