Пишем автотесты для UI на базе Selenide. Часть 1
Поздравляем с наступающим Новым 2022 годом всех бесстрашных ручных тестировщиков, которые ищут пути развития своей карьеры и хотят приобрести навыки в автоматизированном тестировании. Эта статья — продолжение серии материалов о переходе мануального тестировщика в автотестеры. Статья будет условно поделена на теоретическую и практическую часть. Разберем особенности UI-тестирования и напишем автотесты с помощью инструмента Selenide. Другие статьи можно найти по тэгу #автоматизация
UI-тестирование. Немного теории
UI-тестирование — это этап в процессе тестирования ПО, проверяющий интерфейс. Тестирование интерфейса помогает нам проверить функции приложения, имитируя действия пользователей, т.е. в процессе тестирования выполняется проверка элементов, проверка на их корректность с помощью ввода данных в приложение через устройства ввода или средств автоматизированного UI-тестирования. Это можно делать руками или с помощью автоматизации. В иерархии UI-тестирование находится на вершине пирамида Майкла Коэна, то есть для него требуется наименьшее количество тест-кейсов.
Что следует знать о UI-тестировании:
- Написание и выполнение UI-тестов занимает больше времени, чем Unit или API тесты, поэтому их количество меньше т.к. отклик от системы получаем позже, чем могли при другом виде тестирования. Во время управления методики разработки Agile скорость релизов растет, что требует от нас покрывать UI-тестами основную бизнес-функциональность, которую мы не можем проверить иначе.
- Проверка usability — проверка интерфейса на удобство использования, чтобы он был несложным и интуитивно понятным для пользователя (легко понимаем), был привлекательным;
- Проверка согласованности данных при взаимодействии с интерфейсом ПО;
- Проверка функциональности логики, заложенной в UI.
Стратегии UI тестирования в данной статье не будут описаны, данную информацию можно найти в других источниках.
Описание локаторов для автоматизированного тестирования
Есть разные типы локаторов, которые помогают найти элемент на странице, самыми популярные это XPath и CSS (локатор=селектор). Посмотреть локаторы мы можете в режиме разработчика во вкладке элементы.
Пример:
Xpath: //*[@id=»rso»]/div[1]/div/div[1]/div/div/div/div[1]/a/div/cite
CSS: #rso > div:nth-child(1) > div > div:nth-child(1) > div > div > div > div.yuRUbf > a > div > cite
Первая мысль, которая могла появиться у вас: «Ага, всё понятно, сейчас посмотрю, как использовать локаторы в Selenide, и буду автоматизировать свои кейсы”. Спешу огорчить, такие локаторы могут легко измениться при изменении верстки. В результате выполнения теста в будущем можем легко получить fail тест, т.к. не будет найден элемент. Если поддерживать локаторы элементов таким образом — будет уходить много времени для поддержки актуальных локаторов элементов в тестах вместо развития тестового модуля.
Вывод 1: требуется составлять локаторы, которые будут стабильны к изменениям верстки. В результате будет затрачиваться меньше времени для поддержки их работоспособности и актуализацию.
Вывод 2: при построении локаторов требуется строить их с учетом уникальности, т.е. в результате поиска на выходе должны иметь единственное совпадение. Таким образом, будет выполнено взаимодействие с ожидаемым элементом, а не с первым совпадением, который будет найден.
Давайте более подробно остановимся на локаторах CSS и Xpath и опишем селекторы на примере старенького новогоднего сайта «Северный полюс».
Xpath
Xpath — это язык запросов к элементам xml документа. C xml вы часто взаимодействуете при обмене данными. В плане UI автоматизации тестировщики, как правило, работают с xml в формате html документа для обращения к разным типам элементов. Например: поле ввода данных, кнопка, ссылка (html – язык разметки страницы). Описание по тегам html можете почитать на сайте. По xpath локаторам мы двигаемся по DOM-модели (набор html тегов). Обязательно познакомьтесь с осями xpath — это база языка XPath.
Попробуем на практике на сайте http://www.northpole.com/. Откройте браузер разработчика (F12), в моем примере это Google Chrome, далее откройте вкладку с элементами (Elements), дополнительно можете открыть окно консоли. Для ввода локатора xpath требуется выбрать любой элемент в поле с атрибутами и нажать Ctrl+F.
Особенностью xpath является начало селектора с / или //, что означает:
- / — переход поочередно по элементам
- // — возврат всех элементов по совпадению
Давайте продублируем локаторы выше, но с помощью XPath-локаторов:
1). После перехода на базовую страницу нам требуется проверить отображение класса – . Для этого попробуем найти атрибут класса и его значение:
- поиск по имени элемента и атрибуту с проверкой с заданным значением: //img[@class=’untilmerry’]
2). Далее попробуем найти кнопку “Naughty or Nice List” разными способами с помощью xpath:
1 способ: поиск по абсолютному совпадению текста названия кнопки:
//a[text()='Naughty or Nice List']
2 способ: поиск по частичному совпадению текста названия кнопки:
//a[contains(text(),'ghty or Nice')]
Примечание: для частичного поиска текста используется конструкция contains(text(),’[тескт_поиска]’) или по значению внутри атрибута contains(@class,'[тескт_поиска]’)
3 способ: поиск кнопки по атрибуту href и класса на одном уровне:
//a[@href='/Den/list.asp'] [@class='home-btn']
Примечание: данный способ поиска элементов необходим в случае неопределенности элемента по какому атрибуту. В данном случае есть 2 элемента с одинаковой ссылкой href, но разным классом.
3). Далее в случае перехода по кнопке у нас будет таблица с radio button. Попробуем найти ее по частичному совпадению значения атрибута id:
Поиск таблицы с radio button по частичному совпадению значения атрибута
“id” - //form[contains(@id,'uest')]
4). Найдем атрибут заголовка страницы по имени элемента, атрибуту и его значению:
Поиск элемента div с атрибутом id со значением:
//div[@id='top']
Примечание: id проставляются на важные узлы и на элементы с которыми часто взаимодействуете, а также они могут быть динамическими.
5). При переходе по кнопке “Naughty or Nice List” в таблице имеется структура с несколькими элементами. Попробуем найти совпадение в таблице элемента с по букве “i”:
//form[@id='questions']/ul[1]//li[contains(text(),'i')]
где //form[@id=’questions’]/ul[1] – переход к элементу ul c индексом 1,
//li[contains(text(),’i’)] – поиск всех элементов li с совпадением по букве “i”. Примечание в коде Selenide будет выполнена немного отличный способ поиска локатора для лаконичности кода.
6). Выполним поиск по @id=’questions’ и выполним переход к его родителю:
//form[@id='questions']/..
CSS
CSS – это язык на котором задаются стили на странице. С помощью css селекторов локатор имеет уникальный набор атрибутов элемента для его поиска. Есть разные виды css селекторов с которыми можно познакомиться тут. CSS локатор можно проверить в консоли браузера в инструменте разработки (f12) в разделе Console.
$ (): Один знак доллара используется для поиска одного веб-элемента;
$$ (): двойной знак доллара, используемый для поиска нескольких веб-элементов.
Давайте продублируем локаторы выше, но уже с помощью CSS-локаторов:
1). Поиск заголовка тестируемого сайта:
Поиск по имени элемента и атрибуту с проверкой с заданным значением: img[class=’untilmerry’]
2). Далее попробуем найти кнопку “Naughty or Nice List” разными способами с помощью xpath:
1 способ: поиск по абсолютному совпадению текста названия кнопки
a[href='/Den/list.asp'][class='home-link']
2 способ: поиск по частичному совпадению текста названия кнопки (*):
a[href='/Den/list.asp'][class*='-l']
Примечание: для частичного поиска значения атрибута можно выполнять поиск по общему совпадению(*) — a[href=’/Den/list.asp’][class*=’me-li’]
по совпадению с начала строки (^)
a[href='/Den/list.asp'][class^='home-']
по совпадению с конца строки ($)
a[href='/Den/list.asp'][class$='link']
3 способ: поиск кнопки по атрибутам href и class на одном уровне:
a[href='/Den/list.asp'][class='home-btn']
Примечание: Данный способ поиска элементов необходим в случае неопределенности элемента по какому либо атрибуту. В данном случае есть 2 элемента с одинаковой ссылкой href, но с разным классом.
3). Далее в случае перехода у нас будет таблица с radio button. Попробуем найти ее по частичному совпадению значения атрибута id:
Поиск таблицы с radio button по частичному совпадению значения атрибута “id” — form[id*=’uest’]
4). Найдем атрибут заголовка страницы по имени элемента, атрибуту и его значению:
Поиск элемента div с атрибутом id со значением:
div[id=’top’] или другой вид записи #top (поиск по всех элементах где есть >
5). При переходе по кнопке “Naughty or Nice List” в таблице имеется структура с несколькими элементами. Выберем первый элемент ul у атрибута далее отфильтруем значение c “i” с помощью Selenide:
#questions > ul:nth-child(1) > li > input
где #questions > ul:nth-child(1) – переход к элементу ul c индексом 1,
> li > input – поиск всех элементов li c элементом input.
Примечание: в коде Selenide будет выполнен немного отличный способ поиска локатора для лаконичности кода, а также будет наложен фильтр для поиска элементов с буквой “i”.
Примечание: символ “>” отображает прямую зависимость поиска между родителем и ребенком, но можно выполнить поиск без него. Таким образом будет выполняться поиск элемента во всей вложенной структуре элементов. Например, в примере выше можно исключить элемент li: #questions > ul:nth-child(1) input
Продолжение с практической частью на Selenide выйдет на январских каникулах в 2022 году 🙂
Была ли статья полезной?
Как сделать проверку по radiobutton в программе тестирования
Я разрабатываю программу тестирования и у меня возник вопрос, как сделать проверку по radiobutton.
Суть такова, пользователь проходит вопросы на которые есть 4 ответа, за них отвечает четыре radiobutton:
radiobutton 1
radiobutton 2
radiobutton 3
radiobutton 4
после ввода правильного ответа например 3, мне нужна проверка которая будет записывать правильные ответы в файл.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Как сделать проверку состояния RadioButton?
Как сделать проверку на Radiobutton(chacked)?
Как грамотно сделать переход между вопросами в программе тестирования
Всем доброе время суток. Делаю программу тестирования на билдере. Вообщем сейчас задача сделать.
Не подскажите как сделать проверку через val в данной программе?
const n=4; type m=array of integer; var a:m; i,j,p:integer; begin writeln(‘Введите элементы.
Как сделать чтобы после нажатия RadioButton в Label2 автоматически вносилось произведение RadioButton на Label1
Как сделать чтобы после нажатия RadioButton в Label2 автоматически вносилось произведение.
Как получить доступ к элементу radioButton, который НЕ выбран?
Здравствуйте! Пишу маленькую программу для тестирования. За основу взял код из книги Зиборов В.В. — Visual С# 2012 на примерах. На форме имеется label1, radioButton1 . radioButton7 и две кнопки button.
using System; using System.Windows.Forms; using System.IO; namespace Test < public partial class Form1 : Form < // Внешние переменные: int CorrectAnswer = 0; // Количество правильных ответов int WrongAnswer = 0; // Количество неправильных ответов String[] MassiveCorrectAnswers = new String[100]; String[] MassiveWrongAnswers = new String[100]; int NumberOfCorrectAnswer; // Номер правильного ответа int ChosenAnswer; // Номер ответа, выбранный студентом System.IO.StreamReader Reader = new System.IO.StreamReader (@"Путь к файлу\. \Название файла.txt", System.Text.Encoding.GetEncoding(1251)); // Тут пропущен код, который считывает файл и выводит на форму // Выясняем, какой ответ - правильный: NumberOfCorrectAnswer = int.Parse(Reader.ReadLine()); void SwitchChanged(Object sender, EventArgs e) < RadioButton Switch = (RadioButton)sender; var tmp = Switch.Name; // Выясняем номер ответа, выбранный студентом: ChosenAnswer = int.Parse(tmp.Substring(11)); >private void button1_Click(object sender, EventArgs e) < if (ChosenAnswer == NumberOfCorrectAnswer) CorrectAnswer++; if (ChosenAnswer != NumberOfCorrectAnswer) < // Счет неправильных ответов: WrongAnswer++; // Запоминаем вопросы с неправильными ответами: MassiveWrongAnswers[WrongAnswer] = label1.Text; // Тут ошибка MassiveCorrectAnswers[WrongAnswer] = radioButton[NumberOfCorrectAnswer].Text; >> > > В общих словах: значение NumberOfCorrectAnswer считывается из файла, значение ChosenAnswer получаем через обработчик событий. Мы сравниваем их, если они не равны, добавляем в массив MassiveWrongAnswers[] вопрос, в котором ошибся пользователь, а в массив MassiveCorrectAnswers[] нужно добавить правильный ответ. Как обратиться к radioButton[i] ( i — случайное число), если свойство Checked = false ? IDE — Microsoft Visual Studio 2013 Ultimate.
Перевод «radio button» на русский
It is very important to remember that you should always choose the radio button for your filter types to get the desired results.
Очень важно помнить, что вы всегда должны выбрать переключатель для ваших типов фильтров, чтобы получить желаемые результаты.
Click the radio button «I am new customer».
Установите переключатель в положение «Я новый покупатель».
A mobile radio button «AURORA» is a pendant with the operation radius of 500-1000m from the base block.
Мобильная радиокнопка «АВРОРА» — это брелок с радиусом действия 500-1000 м от базового блока.
An alarm button (mobile radio button) is a modern wireless security alarm system, a secure way of technical safeguarding.
Тревожная кнопка (мобильная радиокнопка) — современная беспроводная система охранной сигнализации.
Our testing reveals that, in general, opting for an open text field or radio button interface instead of drop-downs with many or few options (respectively) is a better choice.
Наше тестирование показало, что в целом лучше выбрать открытое текстовое поле или радиокнопку вместо выпадающих списков, когда есть много или несколько вариантов (соответственно).
Since we are importing a set of initial values that we want read as a two-dimensional array, we’ve selected the radio button «Matrix (2D).»
Так как мы завозим набор начальных значений, которые мы хотим прочитать, как двумерный массив, мы выбрали радиокнопку «Матрица (2Д).»
To set the correct answer, double-click the radio button that corresponds to the correct answer choice.
Чтобы задать правильный ответ, дважды щелкните переключатель, соответствующий правильному выбору ответа.
To do so, you can click on the third radio button near the number field that, by default, says «9600».
Для этого, Вы можете нажать на третий переключатель возле число полю, по умолчанию, говорит «9600».
It is here that you must set the state of the checkbox, because a checkbox or radio button does not change its state automatically.
Именно здесь необходимо задать состояние флажка, поскольку флажок или переключатель не изменяет свое состояние автоматически.
The singular property of a radio button makes it distinct from a checkbox, which allows more than one (or no) item to be selected and for the unselected state to be restored.
Уникальное свойство переключателя делает его отличным от флажка, который позволяет выбрать более одного (или нет) элемента, а для не выбранного состояния — восстановить.
Select the radio button «Use the ad code only on confirmed sites» in position «On».
Установите переключатель «Использовать рекламный код только на подтверждённых сайтах» в положение «Вкл.».
Select the Head Revision radio button and click on OK. Your working copy is switched to the new branch/tag.
Выберите в переключателе Ведущая ревизия (HEAD) и нажмите ОК. Ваша рабочая копия будет переключена на новое ответвление/метку.
Note: Menu items in the Icon Menu (from the options menu) cannot display a checkbox or radio button.
Примечание. Пункты в меню значков (из меню параметров) не могут отображать флажки или переключатели.
You can do that by selecting one of the options under ‘Comparison’, in the ‘Dates’ radio button.
Вы можете сделать это, выбрав один из параметров в разделе «Сравнение» в переключателе «Даты».
Click the radio button to move the orientation indicators, as shown, so that the top of the c-channel is flush with the ends of the tubes.
Установите переключатель, чтобы переместить индикаторы ориентации, как показано на рисунке: верхняя часть несущего профиля должна быть на одном уровне с концами труб.
Then, make sure «CTR» and «Position» are checked, and select the «Pages» radio button.
Затем убедитесь, что отмечены «CTR» и «Позиция», и установите переключатель «Страницы».
Finally, you want to set your WordPress account to use your domain. Go back to the Store, then Domains page and select the radio button next to the domain you want to use.
И наконец, нужно включить использование вашего домена в личном кабинете WordPress. Вернитесь в магазин, перейдите на страницу «Домены» и выберите переключатель рядом с доменом, который хотите использовать.
Select the Maximum Database Size (MB) or No Size Limit radio button.
Установите переключатели рядом с пунктами Максимальный размер базы данных (МБ) или Без ограничений размера.
To workaround this problem, go to Start -> Default Programs -> Set default programs for this computer, expand custom, select the radio button next to the app you want to set as the system wide default app (e.g.
Для обхода этой проблемы, откройте меню Пуск -> Программы по умолчанию -> Установить для этого компьютера программы по умолчанию, разверните категорию custom, выберите переключателем приложение, которое вы хотите установить в качестве системного приложения по умолчанию (напр.
If you select the Monthly radio button, you choose the months in which you want to start the task and the weeks of the month and the days of the week for each month in which you want to start the task.
При выборе переключателя Ежемесячно необходимо указать месяцы, недели месяца и дни недели для каждого месяца, по которым будет выполняться задание.
Возможно неприемлемое содержание
Примеры предназначены только для помощи в переводе искомых слов и выражений в различных контекстах. Мы не выбираем и не утверждаем примеры, и они могут содержать неприемлемые слова или идеи. Пожалуйста, сообщайте нам о примерах, которые, на Ваш взгляд, необходимо исправить или удалить. Грубые или разговорные переводы обычно отмечены красным или оранжевым цветом.
Зарегистрируйтесь, чтобы увидеть больше примеров. Это просто и бесплатно
Ничего не найдено для этого значения.
Предложить пример
Больше примеров Предложить пример
Новое: Reverso для Windows
Переводите текст из любого приложения одним щелчком мыши .
Скачать бесплатно
Перевод голосом, функции оффлайн, синонимы, спряжение, обучающие игры
Результатов: 83 . Точных совпадений: 83 . Затраченное время: 152 мс
Помогаем миллионам людей и компаний общаться более эффективно на всех языках.