A Visual Tour of ITG Playwright Studio

In

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:

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:

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:

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:

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:

1. Local .env overrides (highest priority)


2. Dataset variables


3. Environment variables


4. 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:

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!