QA Sandbox UI Gym Documentation

Overview
Practice Modules
Test Strategies
Quick Links

Overview

The QA Sandbox UI Gym is a frontend-only practice environment designed specifically for QA engineers learning UI automation. It provides real-world UI challenges without requiring API knowledge or backend setup.

What You Can Practice

Element Locators: Find and interact with elements using various locator strategies (ID, CSS, XPath, data-testid)
Form Automation: Fill forms, handle validation, and submit data
Dynamic Content: Work with elements that appear/disappear or change IDs
Complex Interactions: Handle nested structures, iframes, and shadow DOM
Wait Strategies: Practice explicit and implicit waits for delayed elements
Data Tables: Sort, filter, paginate, and validate table data

Authentication

Access the Sandbox using:

Username: tester (fixed)
Password: Your personal API key from qaCloud profile

Practice Modules

1. Basic Forms

Practice fundamental form automation skills:

Text inputs with validation (email, phone, required fields)
Password fields with visibility toggle
Checkboxes and radio buttons
Textarea with character counter
Form submission and reset
Inline error messages and success states

2. Advanced Inputs

Master complex input types:

Masked inputs (phone, currency, credit card)
Range sliders with dynamic values
Date and time pickers
File upload buttons
Toggle switches
Color pickers

3. Dropdowns & Select Lists

Handle various dropdown patterns:

Native HTML select elements
Custom styled dropdowns
Searchable dropdowns with filtering
Multi-select dropdowns
Autocomplete with API-like delays (700ms debounce)
Dropdown inside dropdown (nested)

4. Data Tables

Test table manipulation and data validation:

Sortable columns (ascending/descending)
Search filter across all columns
Pagination (10 entries per page)
Row selection with bulk actions
Expandable rows with nested data
Dynamic table data (50 sample records)

5. Modals & Dialogs

Practice overlay interactions:

Basic modal windows
Confirmation dialogs with Yes/No actions
Form modals with validation
Tooltips on hover
Popovers with click triggers
Toast notifications (auto-dismiss after 3s)

6. Locator Practice

Advanced locator challenges:

Elements inside iframes
Delayed elements (appear after 2s)
Dynamic IDs that change on page load
Nested structures (5 levels deep)
Shadow DOM elements
Elements with similar attributes (siblings)

Test Strategies & Tips

Best Practice: Use data-testid Attributes

Why: All elements include data-testid attributes for reliable, maintainable locators

Example:

Selenium: driver.findElement(By.cssSelector('[data-testid="submit-btn"]'))
Cypress: cy.get('[data-testid="submit-btn"]')
Playwright: page.locator('[data-testid="submit-btn"]')

Strategy: Wait for Dynamic Content

Challenge: Some elements appear after delays (2 seconds)

Solution:

Use explicit waits: WebDriverWait(driver, 10).until(EC.presence_of_element_located())
Avoid hard-coded sleep() - use smart waits
Check element visibility: wait.until(EC.visibility_of_element_located())

Strategy: Handle Iframes

Challenge: Elements inside iframes require context switching

Solution:

Switch to iframe: driver.switch_to.frame('iframe-id')
Interact with elements inside iframe
Switch back: driver.switch_to.default_content()

Strategy: Verify Form Validation

Objective: Test both positive and negative scenarios

Test Cases:

Submit empty form → verify error messages appear
Enter invalid email → verify format validation
Fill valid data → verify success message
Check character counter updates in real-time

Strategy: Table Data Validation

Objective: Verify table sorting and filtering work correctly