Robot Framework - unable to locate React created elements

2
votes

I am trying to Input Text into a React created element. So far I have tried the following methods:

Input Text     css:input#textfield-1198-inputEl    TEXT
Input Text     css:input.x-form-field x-form-required-field x-form-#textfield-1198-inputEl   TEXT
Input Text      xpath=//input[contains(@name,'textfield-1198-inputEl')]   TEXT
Input Text     xpath=//*[@id="textfield-1198-inputEl"]   TEXT

As well as trying the absolute & relative paths, though it always responds with - did not match any elements. Wait Until Element Is Visible times out.

Any help would be appreciated.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="x-window x-layer x-window-default x-closable x-window-closable x-window-default-closable x-border-box x-resizable x-window-resizable x-window-default-resizable" id="window-1196" style="width: 316px; height: 195px; right: auto; left: 630px; top: 315px; z-index: 19001;" tabindex="-1">
        <div class="x-window-header x-header x-header-horizontal x-header-draggable x-docked x-unselectable x-window-header-default x-horizontal x-window-header-horizontal x-window-header-default-horizontal x-top x-window-header-top x-window-header-default-top x-docked-top x-window-header-docked-top x-window-header-default-docked-top" id="window-1196_header" style="right: auto; left: 0px; top: 0px; width: 316px;">
            <div class="x-header-body x-window-header-body x-window-header-body-default x-window-header-body-horizontal x-window-header-body-default-horizontal x-window-header-body-top x-window-header-body-default-top x-window-header-body-docked-top x-window-header-body-default-docked-top x-box-layout-ct x-window-header-body-default-horizontal x-window-header-body-default-top x-window-header-body-default-docked-top" id="window-1196_header-body" style="width: 309px;">
                <div class="x-box-inner" id="window-1196_header-innerCt" role="presentation" style="width: 309px; height: 15px;">
                    <div class="x-box-target" id="window-1196_header-targetEl" style="width: 309px;">
                        <div class="x-component x-header-text-container x-window-header-text-container x-window-header-text-container-default x-box-item x-component-default" id="window-1196_header_hd" style="right: auto; left: 0px; top: 0px; margin: 0px; width: 288px;">
                            <span class="x-header-text x-window-header-text x-window-header-text-default" id="window-1196_header_hd-textEl">&nbsp;</span>
                        </div>
                        <div class="x-tool x-box-item x-tool-default x-tool-after-title" id="tool-1203" style="width: 15px; height: 15px; right: auto; left: 294px; top: 0px; margin: 0px;"><img class="x-tool-img x-tool-close" id="tool-1203-toolEl" role="presentation" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="x-window-body x-window-body-default x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable x-resizable x-window-body-resizable x-window-body-default-resizable" id="window-1196-body" style="overflow: auto; left: 0px; width: 316px; height: 165px; top: 30px;">
            <span id="window-1196-outerCt" style="display:table;"></span>
            <div class="" id="window-1196-innerCt" style="height: 100%; vertical-align: top; display: table-cell;">
                <span id="window-1196-outerCt" style="display:table;"></span>
                <div class="x-panel x-window-item x-panel-default" id="createCMDBPanel-1197" style="width: 316px; height: 165px;">
                    <span id="window-1196-outerCt" style="display:table;"></span>
                    <div class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" id="createCMDBPanel-1197-body" style="padding: 0px; left: 0px; top: 0px; width: 316px; height: 125px;">
                        <span id="window-1196-outerCt" style="display:table;"><span id="createCMDBPanel-1197-outerCt" style="display:table;"></span></span>
                        <div class="" id="createCMDBPanel-1197-innerCt" style="height: 100%; vertical-align: top; padding: 10px; display: table-cell;">
                            <span id="window-1196-outerCt" style="display:table;"></span>
                            <table cellpadding="0" class="x-field x-table-plain x-form-item x-form-type-text x-field-default x-anchor-form-item" id="textfield-1198" style="table-layout: auto;">
                                <tbody>
                                    <tr class="x-form-item-input-row" id="textfield-1198-inputRow" role="presentation">
                                        <td class="x-field-label-cell" id="textfield-1198-labelCell" role="presentation" style="" valign="top" width="105"><label class="x-form-item-label x-unselectable x-form-item-label-left" for="textfield-1198-inputEl" id="textfield-1198-labelEl" style="width:100px;margin-right:5px;">CMDB Name:</label></td>
                                        <td class="x-form-item-body" colspan="2" id="textfield-1198-bodyEl" role="presentation"><input aria-invalid="false" autocomplete="off" class="x-form-field x-form-required-field x-form-text" data-errorqtip="" id="textfield-1198-inputEl" name="textfield-1198-inputEl" type="text" value="new CMDB"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
1
seleniumxpathrobotframework
Is that the actual error message? Be as precise as you can. – user1531971

1 Answers

1
votes

In general the attribute values React puts are "semi-dynamic" (my term, and don't quote me on it :) - they are generated by the framework as it sees fit, and can change on slight source code change. This applies for the class and in your case for the id attribute - as you can see the number 1198 in it has no semantic meaning, it's just a counter.
Thus you'd better not use them in locators, as they won't be rigid - the value can easily change between builds without warning.

I would approach it with a different strategy; here is an xpath locator that works, breakdown of its structure follows:

//td[label[text()="CMDB Name:"]]/following-sibling::td/input[@type="text"]

It first selects a table cell that has as its child span with that text - the label the user sees in the UI for the input. Then it selects the very next cell (the following-sibling axis), and finally - the input element that is its child - your target.

In effect, this locator reads - "return the input that is next to the text 'CMDB Name:'"