Skip to main content

One post tagged with "playwright"

View All Tags

· 4 min read
Richard

captionless image

Have you ever spent hours tracking down a frontend bug that only happens in production? When working with web applications, debugging frontend issues can be challenging. Console errors and unexpected UI behaviors often require careful inspection and reproducible test cases. Wouldn’t it be great if you could automate this process, capture errors, and even record a video of the session for later analysis?

With Playwright and Laravel Workflow, you can achieve just that! In this post, I’ll walk you through an automated workflow that:

  • Loads a webpage and captures console errors.
  • Records a video of the session.
  • Converts the video to an MP4 format for easy sharing.
  • Runs seamlessly in a GitHub Codespace.

The Stack

  • Playwright: A powerful browser automation tool for testing web applications.
  • Laravel Workflow: A durable workflow engine for handling long-running, distributed processes.
  • FFmpeg: Used to convert Playwright’s WebM recordings to MP4 format.

captionless image

1. Capturing Errors and Video with Playwright

The Playwright script automates a browser session, navigates to a given URL, and logs any console errors. It also records a video of the entire session.

import { chromium } from 'playwright';
import path from 'path';
import fs from 'fs';

(async () => {
    const url = process.argv[2];
    const videoDir = path.resolve('./videos');

    if (!fs.existsSync(videoDir)) {
        fs.mkdirSync(videoDir, { recursive: true });
    }

    const browser = await chromium.launch({ args: ['--no-sandbox'] });
    const context = await browser.newContext({
        recordVideo: { dir: videoDir }
    });

    const page = await context.newPage();

    let errors = [];

    page.on('console', msg => {
        if (msg.type() === 'error') {
            errors.push(msg.text());
        }
    });

    try {
        await page.goto(url, { waitUntil: 'networkidle', timeout: 10000 });
    } catch (error) {
        errors.push(`Page load error: ${error.message}`);
    }
    const video = await page.video().path();

    await browser.close();

    console.log(JSON.stringify({ errors, video }));
})();

2. Running the Workflow

A Laravel console command (php artisan app:playwright) starts the workflow which:

  • Runs the Playwright script and collects errors.
  • Converts the video from .webm to .mp4 using FFmpeg.
  • Returns the errors and the final video file path.
namespace App\Console\Commands;

use App\Workflows\Playwright\CheckConsoleErrorsWorkflow;
use Illuminate\Console\Command;
use Workflow\WorkflowStub;

class Playwright extends Command
{
    protected $signature = 'app:playwright';

    protected $description = 'Runs a playwright workflow';

    public function handle()
    {
        $workflow = WorkflowStub::make(CheckConsoleErrorsWorkflow::class);
        $workflow->start('https://example.com');
        while ($workflow->running());
        $this->info($workflow->output()['mp4']);
    }
}

3. The Workflow

namespace App\Workflows\Playwright;

use Workflow\ActivityStub;
use Workflow\Workflow;

class CheckConsoleErrorsWorkflow extends Workflow
{
    public function execute(string $url)
    {
        $result = yield ActivityStub::make(CheckConsoleErrorsActivity::class, $url);

        $mp4 = yield ActivityStub::make(ConvertVideoActivity::class, $result['video']);

        return [
            'errors' => $result['errors'],
            'mp4' => $mp4,
        ];
    }
}

4. Running Playwright

namespace App\Workflows\Playwright;

use Illuminate\Support\Facades\Process;
use Workflow\Activity;

class CheckConsoleErrorsActivity extends Activity
{
    public function execute(string $url)
    {
        $result = Process::run([
            'node', base_path('playwright-script.js'), $url
        ])->throw();

        return json_decode($result->output(), true);
    }
}

5. Video Conversion with FFmpeg

The Playwright recording is stored in WebM format, but we need an MP4 for wider compatibility. Laravel Workflow runs this process asynchronously.

namespace App\Workflows\Playwright;

use Illuminate\Support\Facades\Process;
use Workflow\Activity;

class ConvertVideoActivity extends Activity
{
    public function execute(string $webm)
    {
        $mp4 = str_replace('.webm', '.mp4', $webm);

        Process::run([
            'ffmpeg', '-i', $webm, '-c:v', 'libx264', '-preset', 'fast', '-crf', '23', '-c:a', 'aac', '-b:a', '128k', $mp4
        ])->throw();

        unlink($webm);

        return $mp4;
    }
}

🚀 Try It Out in a GitHub Codespace​

You don’t need to set up anything on your local machine. Everything is already configured in the Laravel Workflow Sample App.

Steps to Run the Playwright Workflow

  • Open the Laravel Workflow Sample App on GitHub: laravel-workflow/sample-app
  • Click “Create codespace on main” to start a pre-configured development environment.

captionless image

  • Once the Codespace is ready, run the following commands in the terminal:
php artisan migrate
php artisan queue:work
  • Then open a second terminal and run this command:
php artisan app:playwright

That’s it! The workflow will execute, capture console errors, record a video, and convert it to MP4. You can find the video in the videos folder. Take a look at the sample app’s README.md for more information on other workflows and how to view the Waterline UI.

Conclusion

By integrating Playwright with Laravel Workflow, we’ve automated frontend error detection and debugging. This setup allows teams to quickly identify and resolve issues, all while leveraging Laravel’s queue system to run tasks asynchronously.

🔗 Next Steps​

Happy automating! 🚀