Playwright Testing

This directory contains JavaScript versions of the recorder scripts for website automation using Playwright.

Setup

1. Install dependencies:

pnpm install

2. Install Playwright browsers:

pnpm run install-browsers

Available Scripts

Turath Recorders

• Reader: pnpm run turath:reader

  • Demonstrates reading features on Turath app
  • Records video to ./clips/reader/

• Filters: pnpm run turath:filters

  • Demonstrates search filtering features
  • Records video to ./clips/filters/

Faidah Recorders

• Flow: pnpm run faidah:flow
  • Demonstrates the main user flow
  • Records video to ./clips/

Project Structure

js-recorders/
├── package.json              # Project dependencies and scripts
├── utils/
│   ├── video-converter.js    # Video conversion utilities
│   └── page-helpers.js       # Page interaction helpers
├── turath/
│   ├── reader.js             # Turath reader recorder
│   └── filters.js            # Turath filters recorder
├── faidah/
│   └── flow.js               # Faidah flow recorder
└── README.md                 # This file

Features

• Video Recording: Automatically records browser interactions
• Video Conversion: Converts WebM to MP4 using FFmpeg
• Visual Effects: Adds titles and ripple effects to recordings
• Mobile Simulation: Uses iPhone 14 Pro Max device profile
• Arabic Support: Configured for Arabic locale

Dependencies

• @playwright/test: Browser automation
• ffmpeg-static: Video conversion (optional, requires system FFmpeg)

Notes

• All recordings are done in headless mode by default
• Videos are automatically converted from WebM to MP4
• Original WebM files are deleted after conversion
• CSS styling is applied from ./styles/clip.css