beforeLoad

The beforeLoad array sets the criteria to be satisfied before the load method completes. If you don't specify a beforeLoad array, the load method finds a root element for a regular page object, or waits for the root element to be present for a root page object, by default.

Note: Statements inside the beforeLoad array can reference only root or document elements because other elements are not loaded yet.

This ApplicationHome page object waits for the DOM to finish rendering before loading is complete and then waits for the root and indicator elements:

{
    "selector": {
        "css": "application-home"
    },
    "root": true,
    "beforeLoad": [
        {
            "element": "document",
            "apply": "waitForDocumentReady"
        },
        {
            "apply": "waitFor",
            "args": [
                {
                    "type": "function",
                    "predicate": [
                        {
                            "element": "root",
                            "apply": "isPresent"
                        },
                        {
                            "element": "root",
                            "apply": "containsElement",
                            "args": [
                                {
                                    "type": "locator",
                                    "value": {
                                        "css": ".indicator"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Load an element

When load is set to true for an element.A waitFor method for the element is generated and it is automatically invoked in the beforeLoad method.

Invoke beforeLoad from compose

Sometimes page can be partially reloaded, then to avoid stale elements we might need to invoke beforeLoad from compose method. Note that invocation should be of the method load which is part of public API, here is an example:

{
    "name": "reloadAndClick",
    "compose": [
        {
            "element": "increment",
            "apply": "click"
        },
        {
            "apply": "load"
        }
    ]
}