Automating the Narrative: Playwright E2E for Hackathon Demos

The UEMOA FresCoop project, focused on empowering agricultural cooperatives, recently faced a crucial challenge: presenting a complex, multi-stakeholder narrative at a hackathon. Live demos are often high-stakes performances, and for a project like FresCoop, which involves a 10-step user journey from producer to administration, the risk of technical glitches or missed steps can be significant. Our goal was to provide a reproducible, automated demo that ensures a flawless presentation.

The Demo Dilemma

The FresCoop narrative traces a product from a producer (productrice) through a hub, involving QR code generation and scanning, a buyer's (acheteur) purchase, payment processing, attestation issuance, updates to a Savings and Financial Data (SFD) system, and finally, administrative impact reporting. Manually navigating these ten distinct steps in a live setting introduces several points of failure:

• Human Error: A slight misclick or forgotten step can derail the entire demonstration.
• Environmental Instability: Network latency, browser issues, or unexpected UI changes can cause delays or failures.
• Lack of Reproducibility: Each live run might vary, making rehearsals and jury fallback inconsistent.

We needed a robust solution to guarantee a consistent, repeatable, and resilient demo.

Embracing Automation

Our answer was Playwright, a powerful open-source end-to-end testing framework. Playwright's ability to automate browser interactions, capture screenshots, record videos, and generate traces made it an ideal choice for creating a "bulletproof" demo. It allowed us to script the entire 10-step narrative, ensuring every action was executed precisely as intended.

Setting up Playwright involved adding a playwright.config.js file, configured for:

• HTML reporting for easy review of test runs.
• Video recording of the entire demo flow.
• Trace collection for detailed debugging if issues arose.
• A configurable baseURL to adapt to different environments.

Building the Narrative Flow

The core of the solution was an E2E test script (src/module/component.file in our case) that meticulously followed the FresCoop narrative. Each step of the user journey was translated into a Playwright action, ensuring that every user interaction, data entry, and page navigation was automated. Short pauses were introduced between steps to mimic realistic user behavior and allow for clear visualization during the demo.

Here’s a simplified example of how a step in the Playwright script might look:

import { test, expect } from '@playwright/test';

test('FresCoop Hackathon Demo', async ({ page }) => {
  await page.goto('/login');
  await page.fill('input[name="email"]', '[email protected]');
  await page.fill('input[name="password"]', 'securepassword');
  await page.click('button[type="submit"]');
  await page.waitForTimeout(1000); // Simulate pause

  // Navigate to product creation and fill details
  await page.click('text="New Product"');
  await page.fill('input[name="productName"]', 'Organic Mangoes');
  await page.click('button[type="submit"]');
  await page.waitForScreenshot({ path: 'screenshots/product_created.png' });
  await page.waitForTimeout(2000);

  // ... continue with the 8 subsequent steps

  await expect(page.locator('text="Impact Report"')).toBeVisible();
  await page.waitForScreenshot({ path: 'screenshots/admin_report.png' });
});

Each significant action, like a form submission or a critical page load, was followed by a screenshot capture, providing visual evidence of the demo's progress.

The Companion Runbook

Beyond the automated script, a comprehensive runbook (docs/DEMO_HACKATHON.md) was created. This document was vital for ensuring the reproducibility and smooth execution of the demo. It included:

• Repository Analysis: Key insights into the project structure.
• Role Mapping: How business roles (e.g., productrice, acheteur) corresponded to technical user accounts.
• Seed/Account Recommendations: Guidance on setting up necessary test data.
• Commands: Clear instructions for running the E2E tests (npm run test:e2e).
• Pre-Hackathon Recommendations: Checklist for environment setup and preparations.

This runbook served as a single source of truth, empowering the team to prepare and execute the demo confidently.

The Win

By integrating Playwright and a detailed runbook, the UEMOA FresCoop project transformed a potentially stressful hackathon presentation into a reliable, consistent, and visually rich experience. The ability to generate screenshots, video, and traces provided invaluable fallback options for the jury and greatly improved rehearsal quality. This approach not only secured a successful hackathon demo but also laid the groundwork for future E2E testing within the project.

Generated with Gitvlg.com