Tutorials

Welcome to the Widgetastic.Core tutorials! These step-by-step guides will take you from basic concepts to advanced automation patterns. Each tutorial builds on the previous ones, so we recommend following them in order.

Note

Prerequisites: Basic Python knowledge and familiarity with HTML/web concepts.

Complete Learning Path

Follow these tutorials in order to learn widgetastic from foundation to advanced patterns. Each topic builds essential knowledge needed for the next level.

These comprehensive tutorials cover everything from basic widget usage to advanced automation patterns. Each tutorial includes working examples using the widgetastic test page.

Ready to begin? Start with Basic Widgets and follow the sequence.

Support: Most examples use elements from testing/html/testing_page.html, with some tutorials using specialized pages (iframe_page.html, popup_test_page.html) for specific features - you can test everything yourself!

Setting Up Your Environment

Browser Setup Using Testing Page

All examples in these tutorials use a common browser setup defined as:

 1import inspect
 2import os
 3from pathlib import Path
 4from playwright.sync_api import sync_playwright
 5from widgetastic.browser import Browser
 6
 7
 8def setup_browser():
 9    """Setup browser with widgetastic testing page."""
10
11    # Initialize Playwright
12    p = sync_playwright().start()
13    headless = os.getenv("PLAYWRIGHT_HEADLESS", "false").lower() == "true"
14    browser_instance = p.chromium.launch(headless=headless)
15    context = browser_instance.new_context(viewport={"width": 1920, "height": 1080})
16    page = context.new_page()
17    wt_browser = Browser(page)
18
19    # Navigate to testing page
20    base_path = Path(inspect.getfile(Browser)).parent.parent.parent
21    test_page_path = base_path / "testing" / "html" / "testing_page.html"
22    test_page_url = test_page_path.as_uri()
23    wt_browser.goto(test_page_url, wait_until="load")
24
25    return wt_browser
26
27
28# Usage
29browser = setup_browser()

This setup:

  • Initializes Playwright with Chrome browser

  • Navigates to the widgetastic testing page (testing/html/testing_page.html)

  • Returns a Browser instance ready for use

Understanding the Testing Page Structure

The testing_page.html contains comprehensive examples:

  • Element Visibility & State Testing: Hidden/visible elements, interactive buttons with click tracking

  • Input Widgets & Controls: Text inputs, file uploads, color pickers, editable content, textareas

  • Form Elements & Input States: Mixed input types, radio button groups, enabled/disabled states

  • Table Widget Examples: Standard tables with headers, tables without proper headers, embedded widgets

  • Image Widget Testing: Images with src, alt, and title attributes

  • Locator & Element Finding: Ambiguous vs specific locators, batch operations, element dimensions

  • Drag and Drop Testing: Interactive drag/drop elements, sortable lists, position tracking

  • Advanced Table Operations: Tables with embedded widgets, switchable content, dynamic content

  • Multiple TBody Table Structure: Complex table structures with multiple tbody sections

  • View Testing: Normal views, parametrized views, conditional switchable views

  • IFrame & Nested Content: Embedded iframe testing

  • OUIA Integration: Open UI Automation components with standardized attributes