Prakash

Posted on May 11

A Visual Tour of ITG Playwright Studio: Managing Tests Through a Web Interface

#testing #automation #playwright #devops

A Visual Tour of ITG Playwright Studio

In Part 1, we discussed why managing Playwright tests at scale is challenging and introduced ITG Playwright Studio as a solution. Now let's take a detailed tour of the interface and see how it actually works.

Getting Started: Authentication

The first thing you'll see is the login page. ITG Playwright Studio supports multiple authentication methods:

You can authenticate via:

OAuth providers (GitLab, GitHub) - useful for Git integration
Local admin account - for self-hosted deployments
Personal Access Tokens - for CLI and API access

The OAuth integration isn't just for login - it also enables direct Git repository access, letting you import projects and sync files without cloning repos locally.

Project Workspace: Your Test Suite Dashboard

Once logged in, you land on the Projects page - your central hub for all Playwright test projects:

Each project card shows:

Project name and description
Number of test files
Recent execution status
Quick actions (run tests, view files, settings)

You can create projects in two ways:

Import from Git - Connect to a GitLab/GitHub repository
Local sync - Point to an existing Playwright project on your filesystem

Test Explorer: Browse and Manage Test Files

Click into a project and you'll see the Test Explorer - a file browser specifically designed for test suites:

Key features:

Tree view of your test directory structure
File preview with syntax highlighting
Quick actions - run individual files or entire folders
Search and filter to find specific tests
Monaco editor for editing tests directly in the browser

The Monaco editor (the same one VS Code uses) gives you:

Full TypeScript/JavaScript IntelliSense
Syntax highlighting
Error detection
Auto-completion

No need to clone the repo, open an IDE, make a change, commit, and push just to fix a typo in a test.

Running Tests: The Prepare Drawer

When you're ready to run tests, click "Prepare Tests" to open the runner drawer:

This is where the Studio really shines. You can:

Select Test Files:

Pick individual files or entire folders
Multi-select with checkboxes
See how many tests will run

Configure Execution:

Choose browsers (Chromium, Firefox, WebKit, Chrome, Edge)
Set worker count for parallelization
Configure timeouts
Enable/disable headless mode
Set viewport dimensions

Choose Environment & Data:

Select which environment to run against (staging, production, etc.)
Pick a dataset for test data
Override specific variables if needed

Advanced Options:

Enable video recording
Configure screenshot capture
Set up HAR file recording
Add custom Playwright flags

All of this without touching a config file or writing npm scripts.

Live Execution: Real-Time Feedback

Hit "Run Tests" and you get live execution logs streamed directly to your browser:

You see:

Real-time stdout/stderr from Playwright
Progress indicators for each test file
Pass/fail status as tests complete
Duration tracking
Ability to stop the run if needed

No more waiting for CI to finish and then downloading logs. You see everything as it happens.

Execution History: Track Every Run

After tests complete, they're automatically added to the execution history:

For each run, you can see:

Status (passed, failed, stopped)
Duration and timestamp
Who triggered it (user or schedule)
Environment and dataset used
Command executed
Direct links to HTML and Monocart reports

The reports are served directly from the Studio - no downloading, no extracting archives. Just click and view.

Filter the history by:

Date range (with a 2-week maximum for performance)
Status (passed, failed, running)
Environment
Triggered by

This makes it easy to spot patterns: "Why do tests keep failing on Fridays?" or "Did the staging environment have issues last week?"

Scheduling: Automate Test Runs

Need tests to run automatically? Open the scheduler:

Set up recurring runs with:

Cron-like scheduling - run tests hourly, daily, weekly, or custom patterns
Test selection - which files to run
Environment configuration - which environment and dataset to use
Browser selection - which browsers to test

Examples:

Run smoke tests every hour during business hours
Full regression suite nightly at 2 AM
Checkout flow tests every 30 minutes
Cross-browser tests weekly

No need to set up Jenkins jobs, GitHub Actions workflows, or cron jobs. It's all managed through the UI.

Data Management: Environments and Datasets

One of the most powerful features is the data management system. Instead of hardcoding values or managing multiple .env files, you define them in the Studio.

Data Templates:

Define the schema for your test data:

Field names (username, password, api_key, etc.)
Field types (text, password, URL, etc.)
Descriptions and defaults

Environments:

Create environment-specific configurations:

Staging: staging URLs, test credentials
Production: production URLs, real credentials
Local: localhost URLs, mock data

Datasets:

Create reusable test data sets:

Happy Path Users: valid credentials, complete profiles
Edge Cases: special characters, boundary values
Error Scenarios: invalid data, expired tokens

In your tests, you just reference the variables:

const username = process.env.app_username;
const password = process.env.app_password;
const siteUrl = process.env.siteurl;

The Studio injects the right values based on which environment and dataset you selected for the run.

Variable Precedence:

Local .env overrides (highest priority)
Dataset variables
Environment variables
Project defaults (lowest priority)

This means developers can override values locally for debugging while CI uses Studio-managed values.

Project Settings: Fine-Tune Configuration

Each project has a settings page where you can configure Playwright defaults:

Set project-wide defaults for:

Default browser
Worker count
Timeout values
Base URL
Video and screenshot settings
Viewport dimensions

These become the defaults for all test runs, but can be overridden per-run in the Prepare drawer.

Git Integration: Sync Without Cloning

If you authenticated via OAuth, you get seamless Git integration:

Import Projects:

Browse your GitLab/GitHub repositories
Import with one click
Studio clones and syncs automatically

Sync Files:

Pull latest changes from Git
See what changed
No local git commands needed

Push Changes:

Edit files in Monaco editor
Write a commit message
Push directly to the repository

This is particularly useful for:

Quick fixes that don't warrant a full dev environment setup
Non-technical team members who need to update test data
Reviewing test code without cloning repos

Real-World Workflow Example

Let's walk through a complete workflow:

1. Morning: Schedule Smoke Tests

Open scheduler
Create "Hourly Smoke Tests" schedule
Select critical path tests (login, checkout, search)
Choose staging environment
Set to run every hour from 9 AM to 6 PM
Save

2. Mid-Day: Debug a Failing Test

Check execution history
See that checkout test failed at 11 AM
Click to view Monocart report
See screenshot of the failure
Open test file in Monaco editor
Fix the selector
Push change to Git
Manually trigger a test run to verify fix

3. Afternoon: Run Full Regression

Open Test Explorer
Select all test files
Choose "Production" environment
Select "Full Dataset"
Enable all browsers (Chromium, Firefox, WebKit)
Set workers to 5 for parallelization
Run tests
Watch live logs
Tests complete in 8 minutes instead of 40 (thanks to parallelization)

4. End of Day: Review Results

Check execution history
Filter by today's date
See 8 scheduled runs (hourly smoke tests)
See 1 manual run (your regression)
All passed
Share report link with product manager

All of this without writing a single line of CI/CD configuration or managing any infrastructure.

Technical Stack

For those curious about what's under the hood:

Frontend:

React 18 with Vite
Tailwind CSS for styling
Radix UI (Shadcn) for components
Monaco Editor for code editing
Lucide Icons

Backend:

Node.js + Express
TypeScript throughout
SQLite with Drizzle ORM
WebSockets for real-time logs

Execution:

Spawns Playwright processes directly
Streams stdout/stderr via WebSockets
Generates HTML and Monocart reports
Stores artifacts on filesystem

Deployment:

Docker image available
Can run on any Node.js host
Minimal resource requirements
SQLite means no separate database server

What's Next?

In Part 3, we'll dive into the itgps-agent - a CLI tool that brings Studio-managed configurations to your local development workflow. It's perfect for developers who prefer the command line but want centralized config management.

You'll learn how to:

Install and configure the agent
Run tests locally with Studio data
Trigger remote runs from your terminal
Sync Git repositories via CLI

Try It Yourself

Ready to try ITG Playwright Studio? It's open source and easy to get started:

Docker (fastest):

docker pull ghcr.io/itechgenie/itg-playwright-studio:latest
docker run -d -p 3000:3000 \
  -v $(pwd)/data:/app/data \
  --name itg-playwright-studio \
  ghcr.io/itechgenie/itg-playwright-studio:latest

From Source:

git clone https://github.com/ITechGenie/itg-playwright-studio.git
cd itg-playwright-studio
npm install
npm run dev

Then open http://localhost:3000 and start exploring.

GitHub: https://github.com/ITechGenie/itg-playwright-studio

Coming up next: Part 3: The itgps-agent CLI Tool - Run tests locally with Studio-managed configurations.

What features would you like to see in a Playwright management tool? Let me know in the comments!

DEV Community