Quick Start

This guide will have you monitoring your first Playwright automation in under 5 minutes.

Prerequisites

• Clio SDK installed
• Your API key ready
• Playwright installed with browsers

Step 1: Basic Setup

Create a new Python file and import the required modules:

my_first_monitoring.py

import asyncio
import os
from clio import ClioMonitor
from playwright.async_api import async_playwright

# Load your API key from environment
api_key = os.getenv("CLIO_API_KEY")
if not api_key:
    print("❌ Please set CLIO_API_KEY environment variable")
    exit(1)

Step 2: Create a ClioMonitor

# Initialize the monitor
monitor = ClioMonitor(
    api_key=api_key,
    base_url="https://api.cliomonitoring.com",  # Use your Clio server URL
    raise_on_error=True  # Get detailed errors during development
)

Step 3: Set Up Playwright with Video Recording

async def main():
    async with async_playwright() as p:
        # Launch browser
        browser = await p.chromium.launch(headless=True)

        # Create context with video recording enabled
        context = await browser.new_context(
            record_video_dir="./videos",  # Videos will be saved here
            record_video_size={"width": 1280, "height": 720}
        )

Video Recording is Required

The Clio SDK automatically detects and uploads videos from Playwright’s record_video_dir. Make sure video recording is enabled on your context.

Step 4: Start Monitoring

        # Start monitoring this automation run
        await monitor.start_run(
            context=context,
            automation_name="My First Test",
            success_criteria="Navigate to example.com and verify title",
            playwright_instructions="Open example.com, check page title, take screenshot"
        )

Step 5: Write Your Test

        # Create a page and run your automation
        page = await context.new_page()

        print("🌐 Navigating to example.com...")
        await page.goto("https://example.com")

        # Wait for page to load
        await page.wait_for_load_state("networkidle")

        # Verify the page title
        title = await page.title()
        print(f"📄 Page title: {title}")
        assert "Example Domain" in title

        # Take a screenshot
        await page.screenshot(path="example.png")
        print("📸 Screenshot saved")

        print("✅ Test completed successfully!")

Step 6: Clean Up (Upload Happens Automatically)

        # Close context - this triggers automatic upload
        await context.close()
        await browser.close()

# Run the automation
if __name__ == "__main__":
    asyncio.run(main())

Complete Example

Here’s the complete working example:

complete_example.py

import asyncio
import os
from clio import ClioMonitor
from playwright.async_api import async_playwright

async def main():
    # Load API key
    api_key = os.getenv("CLIO_API_KEY")
    if not api_key:
        print("❌ Please set CLIO_API_KEY environment variable")
        return

    # Initialize monitor
    monitor = ClioMonitor(
        api_key=api_key,
        raise_on_error=True
    )

    async with async_playwright() as p:
        browser = await p.chromium.launch(headless=True)
        context = await browser.new_context(
            record_video_dir="./videos",
            record_video_size={"width": 1280, "height": 720}
        )

        try:
            # Start monitoring
            await monitor.start_run(
                context=context,
                automation_name="Example.com Navigation Test",
                success_criteria="Successfully navigate and verify page title"
            )

            # Run your test
            page = await context.new_page()
            await page.goto("https://example.com")
            await page.wait_for_load_state("networkidle")

            title = await page.title()
            print(f"Page title: {title}")

            await page.screenshot(path="example.png")
            print("✅ Test completed!")

        finally:
            # This triggers the upload
            await context.close()
            await browser.close()

if __name__ == "__main__":
    asyncio.run(main())

Run Your First Monitored Test

1. Set your API key:

   export CLIO_API_KEY="your_actual_api_key"

2. Create the videos directory:

   mkdir videos

3. Run the script:

   python complete_example.py

You should see output like:

Page title: Example Domain
✅ Test completed!

And in your logs, you’ll see the upload process:

INFO - Started monitoring run abc123 for Example.com Navigation Test
INFO - 🎥 Video path: ./videos/video123.webm
INFO - 📊 Trace path: /tmp/trace_abc123.zip
INFO - ✅ Successfully uploaded video123.webm
INFO - ✅ Successfully uploaded trace_abc123.zip
INFO - Successfully uploaded files for run abc123

View Your Results

1. Log into Clio Dashboard: Visit your Clio dashboard
2. Find Your Run: Look for “Example.com Navigation Test” in your runs list
3. Watch the Video: Click on the run to see the recorded video
4. Explore the Trace: Use the trace viewer to see detailed execution steps

What Happened?

Behind the scenes, the Clio SDK:

1. Monkey-patched your Playwright context to automatically capture uploads
2. Enabled tracing with screenshots, snapshots, and source code
3. Created a run record in your Clio organization
4. Generated secure upload URLs for your files
5. Detected the video file from Playwright’s recording
6. Captured a trace file with detailed execution data
7. Uploaded both files concurrently to secure cloud storage
8. Notified the server that uploads were complete
9. Cleaned up temporary files

All of this happened automatically when you called context.close()!

Next Steps

Now that you have your first monitoring working:

• Learn about configuration options to customize behavior
• Explore error handling for production use
• Set up multiple contexts for parallel testing
• Review security features for production deployments

Troubleshooting

No video files uploaded

• Ensure record_video_dir is set on your Playwright context
• Check that the videos directory exists and is writable
• Verify your context actually creates pages and navigates

Upload failures

• Check your internet connection
• Verify your API key is correct and active
• Look for error messages in the logs
• Try with raise_on_error=True for detailed error information

Authentication errors

• Confirm your API key starts with clio_
• Check that your API key is still active in the dashboard
• Ensure you’re using the correct server URL