Open UI Automation (OUIA)

Widgetastic provides comprehensive support for OUIA (Open UI Automation) compatible components. OUIA is a specification that standardizes component identification through HTML data attributes, making automation more reliable and maintainable.

In order to start creating an OUIA compatible widget or view, just inherit from the appropriate base class. Children classes should define the OUIA_COMPONENT_TYPE class attribute to match the value of data-ouia-component-type attribute of the root HTML element.

The key advantage is that you don’t need to specify any locator. If a component complies with OUIA spec, the locator can be automatically generated from the OUIA attributes.

OUIA Base Classes

Widgetastic provides three base classes for OUIA support:

• widgetastic.ouia.OUIABase: Core OUIA functionality

• widgetastic.ouia.OUIAGenericWidget: Base for OUIA-compatible widgets

• widgetastic.ouia.OUIAGenericView: Base for OUIA-compatible views

Creating OUIA Widgets

Consider this HTML excerpt:

<button data-ouia-component-type="PF/Button" data-ouia-component-id="This is a button">
    This is a button
</button>

According to OUIA, this is a Button component in the PF namespace with id This is a button. Based on that information, we can create the following widget:

"""Creating OUIA Widgets

This example demonstrates creating and using OUIA-compatible widgets.
"""

from widgetastic.ouia import OUIAGenericWidget
from widgetastic.widget import View


class Button(OUIAGenericWidget):
    """OUIA Button widget following PF (PatternFly) namespace."""

    OUIA_COMPONENT_TYPE = "PF/Button"


class Details(View):
    button = Button(component_id="This is a button")


view = Details(browser)  # noqa: F821

print(f"Button is displayed: {view.button.is_displayed}")
print("Clicking button...")
view.button.click()
print("Button clicked successfully")

Creating OUIA Views

OUIA views are containers that use OUIA attributes for identification. They’re perfect for organizing multiple OUIA widgets together.

"""Creating OUIA Views

This example demonstrates creating OUIA views as containers for OUIA widgets.
"""

from widgetastic.ouia import OUIAGenericView, OUIAGenericWidget


class Button(OUIAGenericWidget):
    OUIA_COMPONENT_TYPE = "PF/Button"


class TestView(OUIAGenericView):
    """OUIA view containing multiple OUIA widgets."""

    OUIA_COMPONENT_TYPE = "TestView"
    OUIA_ID = "ouia"  # Optional: default component_id for the view

    button = Button(component_id="This is a button")


view = TestView(browser)  # noqa: F821

# OUIA_COMPONENT_TYPE is used to generate ROOT for this view
print(f"ROOT locator for this view: {view.ROOT}")

print(f"View is displayed: {view.is_displayed}")

print("Clicking button inside OUIA view...")
view.button.click()
print("Button clicked successfully")

Existing OUIA Widgets

Widgetastic provides some basic pre-built OUIA widgets that you can use directly:

• widgetastic.ouia.input.TextInput - OUIA version of TextInput widget

• widgetastic.ouia.checkbox.Checkbox - OUIA version of Checkbox widget

• widgetastic.ouia.text.Text - OUIA version of Text widget

OUIA Safety Attribute

The data-ouia-safe attribute indicates whether a component is in a static state (no animations). This is useful for waiting until components are ready for interaction.

"""OUIA Safety Attribute

This example demonstrates using the data-ouia-safe attribute.
"""

from widgetastic.ouia import OUIAGenericWidget

# Create OUIA widgets
button = OUIAGenericWidget(
    parent=browser,  # noqa: F821
    component_id="This is a button",
    component_type="PF/Button",
)

select = OUIAGenericWidget(parent=browser, component_id="some_id", component_type="PF/Select")  # noqa: F821

# Check if components are in a static state (no animations)
print(f"Button is safe: {button.is_safe}")
print(f"Select is safe: {select.is_safe}")

# You can wait for a component to be safe before interacting
print("Waiting for button to be safe before clicking...")
if button.is_safe:
    button.click()
    print("Button clicked after verifying it's safe")

Complete Example

Here’s a complete example using OUIA widgets from the testing page:

"""Complete OUIA Example

This example demonstrates a comprehensive OUIA setup with multiple widgets.
"""

from widgetastic.ouia import OUIAGenericView, OUIAGenericWidget
from widgetastic.ouia.checkbox import Checkbox
from widgetastic.ouia.input import TextInput
from widgetastic.ouia.text import Text


# Define custom OUIA widget
class Button(OUIAGenericWidget):
    OUIA_COMPONENT_TYPE = "PF/Button"


# Create comprehensive OUIA view
class TestView(OUIAGenericView):
    OUIA_COMPONENT_TYPE = "TestView"
    OUIA_ID = "ouia"

    button = Button(component_id="This is a button")
    text = Text(component_id="unique_id", component_type="Text")
    text_input = TextInput(component_id="unique_id", component_type="TextInput")
    checkbox = Checkbox(component_id="unique_id", component_type="CheckBox")


# Use the view
view = TestView(browser)  # noqa: F821

print("Testing OUIA widgets:")
view.button.click()
print("✓ Button clicked successfully")

view.text_input.fill("Test")
print(f"✓ Text input value: {view.text_input.read()}")

view.checkbox.fill(True)
print(f"✓ Checkbox checked: {view.checkbox.read()}")

print(f"✓ Text widget value: {view.text.read()}")

Key Points

• Use OUIAGenericWidget for individual components (buttons, inputs, etc.)

• Use OUIAGenericView for container components (forms, sections, selects)

• Define OUIA_COMPONENT_TYPE in widget classes to match data-ouia-component-type

• Use component_id parameter to match data-ouia-component-id attribute

• No manual locators needed - they’re automatically generated

• Component types and IDs are case-sensitive - match exactly