Basic Widgets

This comprehensive tutorial demonstrates all the fundamental widgets in Widgetastic.core using the framework’s real testing pages. You’ll learn to interact with web elements through practical examples using testing/html/testing_page.html - the same file used to test the framework itself.

In widgetastic, a widget represents any interactive or non-interactive element on a web page. Unlike traditional automation approaches that work directly with raw elements, widgets provide a higher-level, object-oriented abstraction.

Learning Objectives

By completing this tutorial, you will:

• ✅ Basic understanding of core widget

• ✅ Understand the widget read/fill interface

• ✅ Handle widget state and validation

Text Widget

The Text widget extracts text content from a web element.

Basic Text Widget Examples

"""Basic Text Widget Example

This example demonstrates how to use the Text widget to extract text content.
"""

from widgetastic.widget import Text
from widgetastic.exceptions import NoSuchElementException

# In-line Initialization of Text widget
main_title = Text(parent=browser, locator=".//h1[@id='wt-core-title']")  # noqa: F821

# Widget operations
print(f"Title is displayed: {main_title.is_displayed}")
print(f"Title is enabled: {main_title.is_enabled}")
print(f"Using .text property: '{main_title.text}'")
print(f"Using .read() method: '{main_title.read()}'")

# Handling Non-Existing Elements
non_existing_element = Text(browser, locator='.//div[@id="non-existing-element"]')  # noqa: F821
print(f"Non-existing element is displayed: {non_existing_element.is_displayed}")
try:
    non_existing_element.read()
except NoSuchElementException:
    print("NoSuchElementException raised as expected")

Note

While inline widget initialization (as shown above) works for learning and debugging, production code should use View classes to organize widgets. Views provide better structure, reusability, and maintainability for real automation projects.

Input Widgets

Widgetastic provides specialized widgets for some types of HTML input elements. Each input widget is optimized for its specific use case while maintaining a consistent interface.

TextInput Widget

The TextInput widget handles standard text input elements like text, email, number, textarea, etc.

Basic TextInput Operations:

"""Basic TextInput Widget Example

This example demonstrates basic TextInput operations.
"""

from widgetastic.widget import TextInput

# Inline initialization for learning
text_input = TextInput(parent=browser, id="input")  # noqa: F821

# Widget operations
print(f"Text input is displayed: {text_input.is_displayed}")
print(f"Text input is enabled: {text_input.is_enabled}")

text_input.fill("Hello World")
print(f"After fill, .value returns: '{text_input.value}'")
print(f"After fill, .read() returns: '{text_input.read()}'")

TextInput with Different Element Types

"""TextInput with Different Element Types

This example shows how TextInput works with different HTML input types.
"""

from widgetastic.widget import TextInput

# Number input
number_input = TextInput(parent=browser, locator='.//input[@id="input_number"]')  # noqa: F821
number_input.fill("42")
print(f"Number input read value: {number_input.read()}")

# Textarea (multi-line)
textarea = TextInput(parent=browser, id="textarea_input")  # noqa: F821
multiline_text = "Line 1\nLine 2\nLine 3"
textarea.fill(multiline_text)
print(f"Textarea read value: {textarea.read()}")

TextInput State Management

"""TextInput State Management Example

This example demonstrates checking widget state and fill behavior.
"""

from widgetastic.widget import TextInput

# Check if element exists and is accessible
enabled_input = TextInput(parent=browser, id="input1")  # noqa: F821
disabled_input = TextInput(parent=browser, name="input1_disabled")  # noqa: F821

print(f"Enabled input is displayed: {enabled_input.is_displayed}")
print(f"Enabled input is enabled: {enabled_input.is_enabled}")
print(f"Disabled input is enabled: {disabled_input.is_enabled}")

# Fill success checking
result1 = enabled_input.fill("new value")
print(f"First fill('new value') returned: {result1}")

# Try to fill same value - no change detected and returns False
result2 = enabled_input.fill("new value")
print(f"Second fill('new value') returned: {result2}")

Note

Read/Fill Interface Guidelines:

• The fill() method MUST return True if it changed anything, False if no change occurred

• Whatever is returned from read() must be compatible with fill()

• Round-trip requirement: widget.fill(widget.read()) must work at any time

• This ensures widgets can be read and restored to their previous state reliably

FileInput Widget

The FileInput widget handles file upload inputs.

"""FileInput Widget Example

This example demonstrates file upload operations.
"""

from widgetastic.widget import FileInput

file_input = FileInput(browser, id="fileinput")  # noqa: F821

print(f"File input is displayed: {file_input.is_displayed}")
print(f"File input is enabled: {file_input.is_enabled}")

# File upload operations
result = file_input.fill("/etc/resolv.conf")
print(f"File upload result: {result}")

ColourInput Widget

The ColourInput widget handles HTML5 color picker inputs.

"""ColourInput Widget Example

This example demonstrates HTML5 color picker operations.
"""

from widgetastic.widget import ColourInput

colour_input = ColourInput(browser, id="colourinput")  # noqa: F821

# Color operations
colour_input.fill("#ff0000")
print(f"After fill('#ff0000'), read returns: {colour_input.read()}")

# Set different colors with colour setter property
colour_input.colour = "#00ff00"
print(f"After setting colour to '#00ff00': {colour_input.colour}")

Checkbox Widget

The Checkbox widget handles checkbox elements.

"""Checkbox Widget Example

This example demonstrates checkbox operations.
"""

from widgetastic.widget import Checkbox

enabled_checkbox = Checkbox(browser, id="input2")  # noqa: F821
disabled_checkbox = Checkbox(browser, id="input2_disabled")  # noqa: F821

# Check is_displayed and is_enabled
print(f"Enabled checkbox is displayed: {enabled_checkbox.is_displayed}")
print(f"Disabled checkbox is displayed: {disabled_checkbox.is_displayed}")

print(f"Enabled checkbox is enabled: {enabled_checkbox.is_enabled}")
print(f"Disabled checkbox is enabled: {disabled_checkbox.is_enabled}")

# Filling and reading checkboxes
enabled_checkbox.fill(True)
print(f"After fill(True), read returns: {enabled_checkbox.read()}")

enabled_checkbox.fill(False)
print(f"After fill(False), read returns: {enabled_checkbox.read()}")

Select Widget

The Select widget handles HTML select elements.

"""Select Widget Example

This example demonstrates select dropdown operations.
"""

from widgetastic.widget import Select

single_select = Select(browser, name="testselect1")  # noqa: F821
multi_select = Select(browser, name="testselect2")  # noqa: F821

# Reading selected values
print(f"Single select current value: {single_select.read()}")

# Get all available options
print(f"All available options: {single_select.all_options}")

# Select by visible text
single_select.fill("Bar")
print(f"After fill('Bar'): {single_select.read()}")

# Select by value
single_select.fill(("by_value", "foo"))
print(f"After fill by value 'foo': {single_select.read()}")

# Multiple selection
multi_select.fill(["Foo", "Baz"])
print(f"Multiple select values: {multi_select.read()}")

Image Widget

The Image widget provides access to HTML image elements.

Image Examples from Testing Page

"""Image Widget Example

This example demonstrates accessing HTML image elements.
"""

from widgetastic.widget import Image

full_image = Image(browser, locator="#test-image-full")  # noqa: F821

# Check image visibility
print(f"Image is displayed: {full_image.is_displayed}")

# Accessing image attributes
print(f"Image src: {full_image.src}")
print(f"Image alt: {full_image.alt}")
print(f"Image title: {full_image.title}")