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. 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. 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 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. 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. 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. 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?" 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. 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. 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. 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 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. 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 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 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!