Блог

Я хочу автоматизировать https://demoqa.com / веб-страница, сначала я хочу выбрать карточку виджетов и нажать на эту карточку, как я могу это выбрать, если классы для каждой карточки одинаковые, только текст не совпадает. Итак, я хотел использовать это get getWidgetButton() { return $('//h5[normalize-space(text()) = "Widgets"]'); , но когда я запускаю это When('user press on Widgets button', ()=>{NavigationPage.getWidgetButton.click(); }); , я получаю сообщение об ошибке

1. Средство выбора данных виджета, когда пользователь нажимает на кнопку виджетов [chrome 87.0.4280.88 windows # 0-0] щелчок элемента перехвачен: Элемент… не доступен для просмотра в точке (709, 669). Другой элемент получит щелчок : …

Как я могу выбрать элемент, который я хочу? Спасибо!

существует несколько способов сделать это, один из способов — получить innerText из HTML element или получить nth-child с помощью querySelector

Я предполагаю, что размер окна вашего браузера слишком мал, поэтому, когда вы пытаетесь нажать кнопку «Виджеты», он закрывается нижним колонтитулом страницы. Вам нужно развернуть окно браузера или использовать опцию для запуска браузера в максимальном размере.

Сначала попробуйте подождать: используя element.waitForClickable(), вам не нужно прокручивать, WebdriverIO может щелкнуть по элементу, если он отображается на экране, без выполнения прокрутки.

Селекторы действительно упрощены в WebdriverIO. Вы можете использовать css selector большую часть времени, и этого будет достаточно. Есть 2 способа выбрать свой элемент:

1. если вы хотите выбрать несколько элементов с одинаковым именем класса, используйте $$ WebdriverIO, и он вернет массив элементов. Затем вы можете получить доступ к элементу по номеру индекса. Чтобы выбрать заголовки всех виджетов, используйте следующий код: get widgetHeaders () { return $$('.card h5') } ваша карточка виджета является 4-м элементом, что означает, что его индекс равен 3. Таким образом, вы можете получить к нему доступ, нажав вот так widgetHeaders[3].click(); . Для получения более подробной информации: найдите элементы в WebdriverIO
2. Вот как вы можете найти отдельный элемент, используя внутренний текст: get getWidgetButton() { return $("h5='Widgets']"); Или сначала найдите h5 тот, который содержит ‘widget’: get getWidgetButton() { return $("h5*='Widgets']"); Для получения дополнительной информации: найдите элемент по внутреннему тексту или по частичному тексту

ПРИМЕЧАНИЕ: В качестве QA вашим приоритетом должно быть обнаружение дефекта. На веб-сайте, которым вы поделились, есть проблема с положением нижнего колонтитула. Нижний колонтитул появился над телом и покрыл 60 пикселей тела внизу. QA должен сообщить об этой проблеме, и она должна быть исправлена разработчиком. Я думаю, самый простой способ исправить это будет что-то вроде этого: .body-height { min-height: 100%; padding-bottom: 70px; }