Example: Using Sibling Controls to Identify an Object

In Chrome, if a custom control is comprised of two or more sibling controls, you must include both of them in the identification of the object.

This example demonstrates this for a custom control comprised of an input and a label:

<input type="checkbox" role="hidden-checkbox-input" class="ui-helper-hidden"/><label for="check" class="ui-toggle-button" role="button">Toggle</label>

In another browser, you could identify your control by specifying only the input tag:

SampleToolkit.xml:

<Control TestObjectClass="SampleToggleButton">
    ...  
    <Identification type="javascript" function="isSampleToggleButton">
        <Browser name="*">
            <HTMLTags>
                <Tag name="input" />
            </HTMLTags>
        </Browser>
    </Identification>
    ...
</Control>

SampleToggleButton.js:

function isSampleToggleButton ()
{
    return _elem.getAttribute("role") === "hidden-checkbox-input";
}

In Chrome, you should identify the control with both the input and label tag.

To do this, you add one more tag to the SampleToolkit.xml:

<Control TestObjectClass="SampleToggleButton ">
    ...  
    <Identification type="javascript" function=" isSampleToggleButton ">
        <Browser name="*">
            <HTMLTags>
                <Tag name="input" />
                <Tag name="label" />
            </HTMLTags>
        </Browser>
    </Identification>
    ...
</Control>

Then update the SampleToggleButton.js function accordingly:

function isSampleToggleButton ()
{
    if (_elem.getAttribute("role") === "hidden-checkbox-input" && _elem.tagName.toUpperCase() === "INPUT")
        return true;

    if (_elem.tagName.toUpperCase() === "LABEL" && _elem.getAttribute("role") == "button")
    {
        var sibling = _elem.previousSibling;
        if (sibling && sibling.tagName.toUpperCase() === "INPUT" && sibling.getAttribute("role") === "hidden-checkbox-input")
        {
            return sibling; // use the sibling input element to replace label to serve as _elem.
        }
    }

    return false;
}