[1. Невозможно найти элемент]
[1.1. Возможные причины и решения]
[1.1.2. Неверный или устаревший селектор]
[1.1.2.1. Проверьте селектор в DOM браузера]
[1.1.2.2. Избегайте динамических идентификаторов и длинных абсолютных XPath]
[1.1.2.3. Предпочтительно использовать стабильные селекторы на основе атрибутов]
[1.1.3. Элемент внутри iframe]
[1.1.4. Элементы появляются только после выполнения действия]
[1.1.5. Перенаправление страницы или неожиданное модальное окно]
[1.1.6. Медленная работа приложения или сети]
[Заключение]
[Полезные ссылки] Невозможно найти элемент: отладка селекторов и динамических пользовательских интерфейсов После устранения таймаутов одной из наиболее частых проблем в тестах транзакций является ошибка «Не удается найти элемент». Эта статья является второй частью серии статей о распространенных ошибках тестов транзакций ThousandEyes и посвящена тому, почему Selenium иногда не может найти элементы, которые, как вы ожидаете, должны быть присутствовать. Эта статья предназначена для пользователей, которые поддерживают или создают скрипты тестов транзакций, таких как инженеры по контролю качества, инженеры по автоматизации тестирования, а также владельцы сетей или приложений, которые умеют читать HTML и использовать инструменты разработчика браузера. Мы рассмотрим задержки загрузки, iframe, перенаправления и изменения селекторов, а также воспользуемся инструментами разработчика для создания более стабильных селекторов XPath и CSS. Давайте
рассмотрим основные причины ошибки «Невозможно найти элемент» и способы их устранения в ваших транзакционных тестах
. 1. Невозможно найти элемент 1.1. Возможные причины и решения Эта ошибка возникает, когда скрипт пытается взаимодействовать с элементом, но Selenium не может найти его в DOM страницы.
Проще говоря, элемент, который ищет тест, отсутствует, когда скрипт ищет его.
1.1.1. Элемент еще не загружен Динамические страницы или тяжелый JavaScript могут задерживать загрузку, поэтому элемент
недоступен, когда скрипт ищет его. Решение
:
добавьте явные ожидания и подтвердите видимость перед взаимодействием await driver.wait(until.elementIsVisible(driver.findElement(By.css("selector")))); 1.1.2. Неверный или устаревший селектор Селектор CSS/XPath может больше не соответствовать элементу из-за обновлений пользовательского интерфейса, динамических идентификаторов или измененных классов. Решение: A. Проверьте селектор в DOM браузера.
B. Избегайте динамических идентификаторов или длинных абсолютных XPath.
C. Предпочитайте стабильные селекторы, основанные на атрибутах. 1.1.2.1. Проверьте селектор в DOM браузера Всегда проверяйте селектор по отношению к текущей версии приложения с помощью инструментов разработчика браузера. Обновления пользовательского интерфейса, перенаправления или динамически загружаемый контент могут изменить DOM, что приведет к сбою ранее действительных селекторов. Проверьте элемент непосредственно в DOM, чтобы убедиться, что селектор CSS или XPath по-прежнему однозначно идентифицирует ожидаемый элемент. 1.1.2.2. Избегайте динамических идентификаторов и длинных абсолютных XPath Динамические идентификаторы и длинные абсолютные XPath неустойчивы и могут легко перестать работать при незначительных изменениях пользовательского интерфейса. Избегайте селекторов, которые зависят от: Динамически сгенерированных идентификаторах Полных путях DOM, которые зависят от точной иерархии элементов Эти селекторы с большей вероятностью перестанут работать по мере развития приложения. 1.1.2.3. Предпочтительно используйте стабильные селекторы, основанные на атрибутах Используйте короткие, значимые селекторы, основанные на стабильных атрибутах, таких как фиксированные идентификаторы, имена или относительные Xpath. Эти селекторы более устойчивы к изменениям пользовательского интерфейса и повышают надежность тестирования. Примеры: CSS selectors #login-btn, [data-test="submit"] XPath selectors: //button[@id='login-btn'] , //input[@name='username'] , //div[contains(@class,'menu-item')] Вы можете выполнить следующие действия, чтобы найти элементы на странице с помощью консоли Chrome и инструментов разработчика. Большинство команд тестирования транзакций, которые мы используем, принимают
XPath
в качестве аргумента
. Самый простой способ найти XPath — использовать инструменты разработчика Chrome. Просто щелкните правой кнопкой мыши элемент, для которого нужен XPath, и нажмите «Проверить»: ![Harshita Article 2 Pic 1.png] ![Harshita Article 2 Pic 2.png] Вы можете навести курсор на элемент, чтобы убедиться, что это тот самый элемент; браузер должен выделить объект, для которого вы пытаетесь получить XPath.
Затем щелкните правой кнопкой мыши по элементу в DOM, выберите «Копировать», а затем «Копировать XPath».
![Harshita Article 2 Pic 3.png] Скопированный Xpath //[@id="submit-button"] Вы можете
найти элементы на веб-странице с
помощью
селекторов
XPath или CSS
,
которые
можно
сгенерировать из элементов
, скопированных из инструментов разработчика браузера. Рассмотрим, например, следующую кнопку HTML: <button class="btn btn-inverse submit" data-v-8d654cd2="" id="submit-button" tabindex="2" type="button"> Вход </button> Примеры XPath: //[@id="submit-button"] //button[text='Log In'] Пример CSS-селектора: A. #submit-button Пример использования в скрипте транзакции: B. Использование CSS-селектора await driver.findElement(By.css("#submit-button")).click; C. Использование XPath await driver.findElement(By.xpath("//button[@id='submit-button']")).click; Этот же подход работает для большинства кнопок и полей ввода, которые вы автоматизируете. 1.1.3. Элемент внутри iframe Если элемент находится внутри <
iframe
>, скрипт не может его увидеть, пока не переключится на этот фрейм.
Решение:
переключитесь на правильный iframe A. Если элемент находится внутри iframe: await driver.switchTo.frame("frameName"); B. Переключитесь обратно после: await driver.switchTo.defaultContent; 1.1.4. Элементы появляются только после выполнения действия Некоторые элементы появляются только после нажатия кнопки, раскрытия выпадающих списков или перехода в другой раздел. Решение:
убедитесь, что скрипт сначала выполняет необходимое действие, а затем ищет элемент. 1.1.5. Перенаправление страницы или неожиданное модальное окно Запросы на вход, всплывающие окна с файлами cookie, страницы технического обслуживания или перенаправления могут заменить или скрыть нужный элемент. Решение:
Проверьте, появилось ли модальное окно/перенаправление, и обработайте или
за
кро
йте его, прежде чем
продолжить. 1.1.6. Медленная работа приложения или сети Задержки бэкэнда или сетевая задержка могут помешать своевременной загрузке элемента. Решение:
используйте Waterfall в
ThousandEye
s
для
выявления медленных ресурсов или тяжелых активов (CSS, JS, изображения).
Увеличивайте время ожидания только в том случае, если замедление ожидаемо; в противном случае устраните проблему с приложением или сетью. Вывод Ошибки «Невозможно найти элемент» часто являются признаком того, что пользовательский интерфейс более динамичен, чем предполагает скрипт, или что селекторы слишком уязвимы, чтобы выдержать незначительные изменения. Добавив явные ожидания, проверив селекторы в DOM, обработав iframe и модальные окна и полагаясь на стабильные атрибуты, а не на динамические ID, вы можете значительно сократить количество таких сбоев. Для команд, ответственных за поддержание автоматизации в течение длительного времени, особенно когда интерфейс пользователя часто меняется, это упрощает обслуживание тестов транзакций и снижает вероятность их сбоев при каждом выпуске. Если ваши тесты сообщают, что элементы найдены, но на них нельзя нажать или ввести текст, перейдите к части 3 этой серии, где мы рассмотрим ошибку WebDriver: элемент не взаимодействует и способы решения проблем с состоянием интерфейса пользователя и синхронизацией. Полезные ссылки Справочник по скриптам ThousandEyes Транзакционное тестирование и водопад
[image: 566d511fab06fd390d6dba335d202ab3cf538607.png]
[image: 574ef2211dfd760fd91b4ddc9e0c4fd801a32066.png]
[image: 092bd3a007357f10aed34385c6a739e1d2462bdb.png]