UI Test Automation Model

Wait for an Element Before Loading

Sometimes, it can take a long time for the page content for a UI element to be rendered. A page object containing such a UI element is ready for UI interactions only when the UI element is present inside the root element. However, by default, a page object is done loading as soon as its root element is present. This tutorial shows you how to intercept the "load" method and override it by adding an explicit wait for an element to be rendered.

The loading.utam.json page object contains a beforeLoad array that sets the criteria to be satisfied before the load method completes.

{
    "beforeLoad": [
        {
            "element": "root",
            "apply": "waitFor",
            "args": [
                {
                    "type": "function",
                    "predicate": [
                        {
                            "element": "root",
                            "apply": "containsElement",
                            "args": [
                                {
                                    "value": { "css": "#postLoad" },
                                    "type": "locator"
                                },
                                {
                                    "value": true
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

• The syntax of the beforeLoad array is covered in the beforeLoad grammar section
• The element referenced in a beforeLoad statement can be "root" or "document" only
• The containsElement statement has one mandatory argument (the selector to look for) and one optional argument (a boolean that's set to true to search inside shadowRoot)

{
    "apply": "containsElement",
    "args": [
        {
            // selector value to search for
            "value": { "css": "#postLoad" },
            "type": "locator"
        },
        {
            // true to search inside shadow root
            "value": true
        }
    ]
}

The page object has a getContentText method that returns the text in the #postLoad selector. The test asserts that the returned value matches the expected content.