Robot Framework - невозможно найти элементы, созданные React

Я пытаюсь ввести текст в созданный элемент React. Пока что я пробовал следующие методы:

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

А также попытка абсолютного и относительного путей, хотя он всегда отвечает - не соответствует ни одному элементу. Подождите, пока не истечет время ожидания элемента.

Любая помощь будет оценена по достоинству.

<!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>

Это собственно сообщение об ошибке? Будьте максимально точны.

user1531971 13.09.2018 18:24
Blibli Automation Journey - Как захватить сетевой трафик с помощью утилиты HAR в Selenium 4
Blibli Automation Journey - Как захватить сетевой трафик с помощью утилиты HAR в Selenium 4
Если вы являетесь веб-разработчиком или тестировщиком, вы можете быть знакомы с Selenium, популярным инструментом для автоматизации работы...
2
1
810
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В общем, значения атрибутов, которые помещает React, являются «полудинамическими» (мой термин, и не цитируйте меня на нем :) - они генерируются фреймворком по своему усмотрению и могут измениться при небольшом изменении исходного кода. Это относится к class и, в вашем случае, к атрибуту id - как вы можете видеть, число 1198 в нем не имеет семантического значения, это просто счетчик. Таким образом, вам лучше не использовать их в локаторах, поскольку они не будут жесткими - значение может легко меняться между сборками без предупреждения.

Я бы подошел к этому с другой стратегией; вот работающий xpath-локатор, разбивка его структуры следующая:

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

Сначала он выбирает ячейку таблицы, у которой есть дочерний элемент span с этим текстом - метка, которую пользователь видит в пользовательском интерфейсе для ввода. Затем он выбирает следующую ячейку (ось following-sibling) и, наконец, элемент input, который является дочерним элементом это - вашей целью.

Фактически, этот локатор гласит - «вернуть ввод, который находится рядом с текстом« Имя CMDB: »»

Привет, @Todor! Итак, с текущим подходом React, все преимущества, которые у нас были благодаря классам, идентификаторам и обходу DOM, исчезли? Мы вернулись к разбору текста? Это довольно плохие новости :(

Pitto 14.09.2018 11:36

Я бы не сказал, что это так плохо; идентификаторы могут быть фиксированы, а разработчики всегда могут установить атрибут настраиваемого элемента с предопределенным значением, которое будет использоваться для локаторов. Классы - они запрещены (но так было всегда, по крайней мере, для == сравнений).

Todor Minakov 14.09.2018 18:57

Полезный совет: установите Selenium IDE и записывайте действия. После открытия файла проекта можно: Ввод текста xpath = // span / div / table / tbody / tr / td [2] / input ... project options = "target": [["id = textfield-1198 -inputEl "," id "], [" name = textfield-1198-inputEl "," name "], [" css = # textfield-1198-inputEl "," css "], [" xpath = // input [ @ id = 'textfield-1198-inputEl'] "," xpath: attributes "], [" xpath = // td [@ id = 'textfield-1198-bodyEl'] / input "," xpath: idRelative "], ["xpath = // span / div / table / tbody / tr / td [2] / input", "xpath: position"]],

S.Crew 18.09.2018 14:03

Другие вопросы по теме