Как решить типичные проблемы автоматизации веб-тестирования пользовательского интерфейса с помощью бесплатного набора инструментов Katalon Studio

«Если конечный пользователь считает, что ваш веб-сайт неэффективен, его следующий клик, скорее всего, будет на your-competition.com». - Ян Молино

Достижения в технологиях веб-разработки делают веб-приложения более многофункциональными, поэтому становится все сложнее автоматизировать веб-тестирование.

Технологии веб-сайтов, такие как поддержка нескольких платформ, кроссбраузерность, адаптивный дизайн, могут добавить больше сложностей и усилий к вашим стратегиям автоматизации тестирования веб-интерфейса.

Итак, если вы новичок и начинаете с автоматизации тестирования веб-интерфейса, вот несколько примеров того, как решать распространенные проблемы и повышать эффективность автоматизированного тестирования.

Подробнее: Пять основных проблем автоматизации тестирования

Общие проблемы автоматизации (веб) тестирования пользовательского интерфейса

Проблемы с временем ожидания
Проблемы с iframe
Проблемы с всплывающими окнами при автоматизации
Проблемы с обнаружением глубоко вложенных элементов

Давайте узнаем, как решить эти проблемы автоматизации пользовательского интерфейса с помощью инструмента Katalon Studio.

Katalon Studio - это бесплатный, но мощный набор инструментов для автоматизации для веб-тестирования и тестирования мобильных приложений. Его легко установить, и тестировщики могут быстро создавать, запускать, составлять отчеты и поддерживать свои автоматизированные тесты.

Это демонстрационный проект, созданный с помощью Katalon Studio. Цель состоит в том, чтобы помочь вам справиться с проблемами автоматизации тестирования веб-интерфейса, упомянутыми выше. Вы также можете загрузить Katalon Studio и демонстрационный проект по ссылкам, приведенным ниже в этой статье.

# 1) Время ожидания и подход к решению

Что такое ждать?

Ожидание - это тактика, используемая в ваших сценариях автоматизации тестирования для создания паузы между шагами сценария, когда вы ждете загрузки элементов или ответа приложения.

Проблемы, которые интеллектуальное ожидание (явное ожидание - это интеллектуальное ожидание, ограниченное конкретным веб-элементом), помогает решить, - это ложные тревоги для проблем, которые анализируются инженерами для оценки.

Как сбои сценария, а не сбои приложения. Когда тест не проходит из-за самого скрипта, а не из-за ошибки в приложении / веб-странице, это называется ложным сбоем.

Вот несколько распространенных примеров того, что может вызвать ложный сбой:

Ложный сбой. Одна из самых серьезных ошибок, с которыми мы сталкиваемся, - это когда сценарий дает сбой «ложный сбой» из-за ожидания приложения. Часто вызывается задержкой в сети, запросами к базе данных или любыми другими причинами, связанными с функциональностью приложения или веб-страницы.
Целевой элемент отсутствует на странице. Этот тип сбоя возникает при ожидании отображения элементов ИЛИ визуализации в браузере. Приложение может быть запущено и работать, но некоторые элементы могут не быть загружены, но ваш тестовый скрипт не работает.

Как подойти к этим сбоям тестового скрипта, возникшим из-за проблем с ожиданием, описанных выше?

Вместо добавления случайных 5–10 секунд ожидания для каждого шага вы можете попробовать один из следующих вариантов:

Глобальная переменная. Глобальная переменная - это переменная с глобальной областью действия, что означает, что она видна во всей программе. Вы можете рассмотреть возможность определения трех видов глобальных переменных в вашем тестовом сценарии: короткое ожидание, среднее ожидание и долгое ожидание. Используйте эти переменные в своем тестовом сценарии в соответствии со временем отклика вашего веб-приложения.
Ожидание загрузки страницы - эта логика будет ожидать полной загрузки страницы перед выполнением какого-либо шага в вашем скрипте.
Дождитесь появления элемента. Иногда веб-элементам требуется больше времени, чтобы появиться на странице, когда вы перемещаетесь по страницам, нажимаете кнопки или делаете что-то еще. Команда «WaitForElementPresent» приостановит селен до тех пор, пока целевой элемент не появится на странице. Как только элемент появится на странице, селен отправится на выполнение следующей команды.

Скрипт тестирования Katalon Studio:

import internal.GlobalVariable;
importcom.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testcase.TestCaseFactory as TestCaseFactory
import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
import com.kms.katalon.core.testdata.TestDataFactory as TestDataFactory
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testobject.TestObject as TestObject
importcom.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
importcom.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
importcom.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import staticcom.kms.katalon.core.testobject.ObjectRepository.findTestObject
import staticcom.kms.katalon.core.testdata.TestDataFactory.findTestData
import staticcom.kms.katalon.core.testcase.TestCaseFactory.findTestCase
'Open browser and navigate to Katalon site'
WebUI.openBrowser('https://katalon.com/') 
'Wait for Katalon Studio page to load with wait used as Global Variable'
WebUI.waitForPageLoad(GlobalVariable.G_Timeout_Small)
'Click on \'Login\' button to navigate to Login page'
WebUI.click(findTestObject('Page_KatalonHomepage/btn_Login'))
'Input username'
WebUI.setText(findTestObject('Page_KatalonLogin/txt_Username'), username)
'Input password'
WebUI.setText(findTestObject('Page_KatalonLogin/txt_Password'), password)
'Click on \'Login\' button to login'
WebUI.click(findTestObject('Page_KatalonLogin/btn_Submit'))
'Wait for failed login message to be present'
WebUI.waitForElementPresent(findTestObject('Page_KatalonLogin/div_LoginMessage'), GlobalVariable.G_Timeout_Small)

Сгенерированный выше тестовый сценарий показывает использование глобальной переменной и встроенных ключевых слов Katalon Studio.

# 2) Проблемы с iframe и подход к их решению

Что такое iframe?

Это встроенный фрейм HTML документа, встроенного в другой HTML-документ веб-сайта. Элемент iframe используется для вставки содержимого из других источников на веб-страницу.

Почему важно знать, как тестировать фреймы iframe?

Проверка текста и объектов в iframe может быть проблемой. Даже если вы (как человек-тестировщик) можете видеть текст, инструменты автоматизации не будут извлекать текст, просто идентифицируя объект. Вы должны указать своему сценарию, как перемещаться по iframe и выбирать правильный iframe, в котором присутствуют текст и объект.

Примеры iframe:

# 1) iframe на форуме Katalon Studio

Вы можете видеть, что Katalon Studio Object Spy выбирает iframe в выделенной красным области.

Шпион за объектами Katalon Studio обнаружил и зафиксировал iframe комментария (рис. 1), необходимый для проверки объектов в этом iframe.

# 2) Пример JQueryUI-Drag and Drop:

Вы можете перетащить объект «Перетащите меня» в другие области окна iframe.

Katalon Studio Object Spy обнаружил и захватил iframe, как показано на рисунке 3 выше.

Типичное решение поможет вам идентифицировать исходный и целевой элементы и в контексте правильного сеанса браузера. Такие инструменты, как Selenium, предлагают перетаскивание, чтобы до некоторой степени решить эту проблему.

Решение для тестирования iframe с помощью Katalon Studio:

Ниже приведены несколько советов по взаимодействию с перетаскиванием объекта в iframe с помощью Katalon Studio.

import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testobject.TestObject as TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import internal.GlobalVariable as GlobalVariable
'Open browser and navigate to jQuery UI page'
WebUI.openBrowser('http://jqueryui.com/')
'Maximize current browser window'
WebUI.maximizeWindow()
'Click on \'Draggle\' link'
WebUI.click(findTestObject('Page_jQuery_Homepage/lnk_Draggable'))
'Switch to iframe of Demo panel'
WebUI.switchToFrame(findTestObject('Page_jQuery_Drag and Drop Example/ifr_Demo Frame'), GlobalVariable.G_Timeout_Small)
'Drag and drop iframe into other position'
WebUI.dragAndDropByOffset(findTestObject('Page_jQuery_Drag and Drop Example/div_Frame_Draggable'), 200, 38)
WebUI.closeBrowser()

Сгенерированный выше тестовый сценарий предназначен для функции перетаскивания. Katalon Studio позволяет вам редактировать шаги проверки между сценарием, чтобы проверить конкретный объект в iframe.

# 3) Всплывающие проблемы и подход к их решению

Что такое всплывающее окно?

Всплывающее окно - это область отображения графического интерфейса пользователя (GUI), обычно небольшое окно, которое появляется («всплывающее окно») на переднем плане визуального интерфейса.

Проблемы со всплывающим окном?

Как человек, вы можете реагировать на действия, которые происходят во время тестирования, например, на неожиданное появление всплывающего окна. Но как код, написанный кодером, вы можете делать только то, что вам сказал кодер, и это ограничивает вашу способность реагировать на неожиданное поведение, такое как всплывающее окно.

Ниже приведены несколько часто используемых примеров всплывающих окон, которые могут стать препятствием для вашей автоматизации в Интернете:

1) Новое окно браузера

2) Предупреждение: окно предупреждения часто используется, чтобы убедиться, что информация доходит до пользователя.

3) Пользовательское модальное диалоговое окно. Модальное диалоговое окно - это диалоговое или всплывающее окно, которое отображается поверх текущей страницы.

4) Родное всплывающее окно

Решение для обработки всплывающих окон с помощью Katalon Studio:

Ниже приведены несколько советов по устранению проблем со всплывающими окнами с помощью Katalon Studio.

import com.kms.katalon.core.annotation.SetUp as SetUp
import com.kms.katalon.core.annotation.TearDown as TearDown
import com.kms.katalon.core.model.FailureHandling as FailureHandling
import com.kms.katalon.core.testobject.ObjectRepository as ObjectRepository
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUiBuiltInKeywords
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import com.kms.katalon.core.mobile.keyword.MobileBuiltInKeywords as Mobile
import com.kms.katalon.core.webservice.keyword.WSBuiltInKeywords as WS
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
import static com.kms.katalon.core.testdata.TestDataFactory.findTestData
import static com.kms.katalon.core.testcase.TestCaseFactory.findTestCase
import com.kms.katalon.core.testcase.TestCase as TestCase
import com.kms.katalon.core.testdata.TestData as TestData
import com.kms.katalon.core.testobject.TestObject as TestObject
import java.util.Formatter.DateTime as DateTime
import internal.GlobalVariable as GlobalVariable
'Open browser and navigate to elated site'
WebUI.openBrowser('http://www.elated.com/articles/javascript-tabs/')
'Maximize current browser window'
WebUI.maximizeWindow()
'Click on \'Tweet\' button in iframe'
WebUI.click(findTestObject('Page_Elated/lnk_Tweet'))
'Switch to window that has title \'Share a link on Twitter\''
WebUI.switchToWindowTitle('Share a link on Twitter')
'Enter username'
WebUI.setText(findTestObject ('Page_Share a link on Twitter/txt_Twitter_Login_Username'), email)
'Enter password'
WebUI.setText(findTestObject('Page_Share a link on Twitter/txt_Twitter_Login_Password'), password)

Сгенерированный выше тестовый сценарий показывает использование встроенных ключевых слов Katalon Studio.

Например: встроенное ключевое слово switchToWindowTitle помогает справиться с проблемой всплывающих окон.

Проблемы с вложением XPath и подход к их решению

Что такое XPATH?

Выражение XPath - это механизм для навигации и выбора узлов в XML-документе, или его можно использовать для поиска HTML-элементов.

Вот пример вложенного элемента:

1<div class="container">
2 <div class="navbar-collapse navbar-right" aria-expanded="true">
3 <div class = "nav-bar-decorated"
4    <ul class="nav navbar-nav">
5      <Li>
6        <a class="pbtn-download" href="#katalon-download">Download</a> <!-- Deeply nested element -->
7        </li>
8 </div>
9  </div>
10</div>

# 4) Проблемы с идентификацией глубоко вложенных элементов

Трудно идентифицировать элемент, к которому вы хотите получить доступ, особенно если они глубоко вложены, как показано элементом «a» в приведенном выше скрипте.

Возможно, вам будет сложно написать XPath вручную, если у вас нет основательных знаний XPath, чтобы получить доступ к этому конкретному элементу «a» с помощью инструмента тестирования автоматизации.

Как легко определить вложенные элементы?

Используйте XPath: XPath - это эффективный способ поиска элементов, если они не могут быть идентифицированы по идентификатору, имени или другому атрибуту И когда они глубоко вложены. Однако вручную определить путь сложно без правильного инструмента ИЛИ без участия инженеров, создавших функции.
Используйте Katalon Studio: Katalon Studio может генерировать интеллектуальный и оптимизированный XPath. Он идентифицирует элемент по ближайшему однозначно идентифицированному родительскому узлу, поэтому вам не нужно искать в дереве DOM.

Katalon Studio автоматически генерирует оптимизированный XPath для вас, когда вы следите за объектом «Зарегистрироваться сейчас».

Это демонстрационный проект, созданный с использованием Katalon Studio. Его цель - помочь вам справиться с проблемами автоматизации тестирования веб-интерфейса, упомянутыми выше. Вы можете скачать Katalon Studio и демонстрационный проект по ссылке ниже.

Ссылка для бесплатной загрузки - Katalon Studio
Также скачать - Демо-проект

Вывод:

Хотя автоматизация веб-тестирования может быть сложной задачей, мы надеемся, что решения, предлагаемые в этой статье, могут помочь вам справиться с типичными проблемами автоматизации веб-тестирования и повысить эффективность автоматизации тестирования.

Посмотрите это практическое видео о том, как избежать распространенных рисков автоматизации веб-интерфейса.

= ›› Нажмите здесь, чтобы посмотреть видео

Об авторе: Это гостевая статья Абхишека Кумара. Он является менеджером по продукту в KMS Technology. Он сочетает в себе опыт стратегического и тактического управления с высокой квалификацией в области разработки программного обеспечения, тестирования программного обеспечения, автоматизации тестирования, управления продуктами, создания новых предприятий, развития бизнеса, управления проектами и общих операций.

Вы можете попробовать этот бесплатный инструмент для автоматизации тестирования веб-приложений или мобильных приложений и сообщить нам, если у вас возникнут какие-либо проблемы / вопросы при его использовании.

Подробнее: 10 лучших инструментов тестирования API в 2020 году