Автоматизированное тестирование пользовательского интерфейса с использованием Selenium и NUnit3

В этой статье я дам вам пошаговое руководство по автоматическому тестированию с использованием Selenium и NUnit3 в Microsoft Visual Studio.

Содержание статьи;

• Настройка Selenium и NUnit в Microsoft Visual Studio 2017 или 2019.
• Написание теста с использованием NUnit.
• Написание теста пользовательского интерфейса с использованием методов NUnit и Selenium .
• Разработка решения в соответствии с объектной моделью страницы.
• Создание базовой страницы.

Настройка

Установите и настройте Microsoft Visual Studio.
В Microsoft Visual Studio нажмите Создать новый проект.
Выберите C # в качестве языка. и выберите Библиотека классов (.Net Framework) и создайте проект.

Следующим шагом является загрузка пакетов. В Обозревателе решений щелкните правой кнопкой мыши Библиотеку классов.

В моем случае я щелкаю правой кнопкой мыши SeleniumAutomationTutorial.

Затем нажмите Управление пакетами Nuget.

Следует открыть новую вкладку под названием NuGet: «имя вашей библиотеки классов», на которой нужно сосредоточиться.

Этот менеджер пакетов позволит вам загружать, просматривать и обновлять пакеты, нажимать вкладку Обзор, искать и загружать эти пакеты;

NUnit,
NUnit3TestAdapter,
Selenium.Support,
Selenium.WebDriver,
Selenium.WebDriver.ChromeDriver,
DotNetSeleniumExtras.WaitHelpers

Для драйвера Chrome выберите версию пакета, совпадающую с версией вашего браузера.

Вы можете загрузить IEDriver для Internet Explorer и GeckoDriver для Firefox, но в этом руководстве я буду использовать ChromeDriver для Google Chrome.

Вкладка «Установлено NuGet» должна выглядеть следующим образом:

И, наконец, откройте обозреватель тестов, чтобы просматривать, контролировать, отлаживать и запускать тесты после их создания.

[VS 2017 ToolStrip]: Тест ›Windows› Обозреватель тестов
[VS 2019 ToolStrip]: Тест ›Обозреватель тестов

Написание тестов с использованием NUnit

Чтобы написать тест, вам сначала нужно создать класс.
Щелкните правой кнопкой мыши на библиотеке классов ›Добавить› Класс
Затем вкладка должна сосредоточиться на добавленный вами класс.

Теперь в добавленном вами классе, если вы создадите метод void с атрибутом Test NUnit «[Test]» поверх метода тогда он будет отмечен как тест, и вы сможете увидеть его в Обозревателе тестов.

Поскольку вы используете атрибут NUnit, если не включаете его в проект, VS выдаст ошибку «[Test]», поэтому вам нужно добавить директиву using для доступа к нему.

с использованием NUnit.Framework;

Теперь у вас есть пустой тест. Вы можете запустить созданный тест через Обозреватель тестов, и он будет успешно пройден.

В этом тесте мы не проверяем какие-либо условия с помощью NUnit Assertions, чтобы пройти / не сдать тест, или использовать Selenium для тестирования пользовательского интерфейса веб-страницы.

В связи с этим рассмотрим пример утверждений, предоставленный NUnit.

Assert. AreEqual (ожидаемый, фактический)

Я добавил метод AreEqual для Assert, чтобы проверить, является ли сложение между данными двумя числами правильным или нет.

AreEqual проверяет, что два заданных вами параметра равны.
Ожидаемый результат написан слева, поэтому в Test Explorer, он поможет вам легко определить вашу проблему.

Например, я изменил ожидаемую сумму на 13 и снова проверил ее, тест не прошел.

Как видите, он отображает сообщение, в котором говорится, что ожидалось 13, но получено 12, теперь вы знаете, что проблема в написанном вами тесте, а не в сложении, поскольку 5 + 7 вернули 12. на фактическое.

Итак, как я уже говорил ранее, правильное использование ожидаемого и фактического может помочь вам определить проблему при использовании метода AreEqual.

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

Утверждение. AreNotEqual (Ожидается, Фактически)
Утверждение. IsTrue (boolCondition)
Assert. GreaterOrEqual (value1, значение2)
Утверждение. LessOrEqual (значение1, значение2)

С помощью Утверждения вы можете установить, когда ваши тесты должны пройти или не удастся.

Написание тестов NUnit с использованием Selenium

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

В Selenium есть несколько способов получить элемент, некоторые из распространенных способов - XPath, Css Selector. , Id и ClassName, теперь давайте получим с ними элемент.

В этом примере я собираюсь протестировать поисковую систему Bing.

Давайте возьмем элемент окно поиска.
Щелкните правой кнопкой мыши поле поиска и выберите Проверить.
Будет откройте инспектор с выделенным окном поиска.

Использование Css Selector и Inspector

Начнем с Css Selector, чтобы получить этот input элемент, вы можете использовать предоставленные атрибуты в этом input элементе, I будут использовать эти атрибуты; Идентификатор, Класс, Тип и Имя. Таким образом, вы можете получить этот элемент окна поиска с помощью этих селекторов;

Использование атрибута Id:
#sb_form_q

Использование атрибута класса:
input.b_searchbox

Использование атрибута типа:
div input [type = search]
или
div ›input [type = search]

Использование атрибута имени:
введите [name = ’q’]

Вы можете проверить их, используя Ctrl + F в инспекторе. Если он находит только элемент окна поиска, это означает, что вы получили селектор элемента поля поиска .

Или вы можете использовать вкладку Консоль, например, для типа Id Attribute вы можете использовать: $ (' #sb_form_q ').

Краткое объяснение того, что я использовал в селекторах;

Используется '.' для получения классов.
.className
element.className
Используется '#' для получения идентификаторов.
#id
element # id
Используется ' [] ' для получения атрибутов.
[attribute = 'value']
element [attribute = 'value']
Используется ' ›' для получения потомка.
element› directChild OfElement
Используется пустое пространство для получения любого потомка.
element anyChild OfElement

Важный момент; когда вы получаете элемент с двумя классами, вам придется использовать разные способы, чтобы получить его.

Пример из логотипа страницы Bing;

Чтобы получить этот элемент, вам нужно будет использовать;

.hp_sw_logo.hpcLogoWhite
[class = ‘.hp_sw_logo hpcLogoWhite’]

Причина в том, что когда у вас есть пробел в классе, что означает наличие нескольких классов, вы не можете напрямую называть его как:
«.hp_sw_logo hpcLogoWhite», потому что пространство используется для получение любого дочернего элемента в селекторе CSS.

В первом примере вы заполняете это пространство символом '.' Для вызова обоих классов.
Во втором примере вы можете получить атрибут класса с помощью '[]'.
Или вы можете просто использовать один из классов , но в этом примере оба класса используются в нескольких элементах, поэтому для его фактического получения требуется больше работы, поэтому использование двух приведенных выше примеров более целесообразно.

Наконец, вы можете использовать любой селектор, который вы найдете в методе FindElement IWebElement, используя метод By в Selenium в качестве параметра.

Выше показан рабочий тест, который находит элемент с помощью предоставленного нами селектора css. Если CssSelector был неправильным, FindElement вызовет NoSuchElementException, что приведет к сбою теста.

ChromeDriver - это то, что мы используем для автоматизации тестов в Google Chrome.

Используется для перехода на веб-страницу:
driver.Navigate (). GoToUrl (urlString)
Для IWebDriver:
с помощью OpenQA. Selenium;
Для ChromeDriver:
с использованием OpenQA.Selenium.Chrome;

Использование XPath

Давайте сделаем то же самое с XPath.

Использование атрибута Id:
// * [@ id = ’sb_form_q’]

Использование атрибута класса:
// * [@ class = ’b_searchbox’]

Использование атрибута типа:
// div / * [@ type = ’search’]

Использование атрибута имени:
// * [@ name = ’q’]

Краткое объяснение;

Используется '//' для поиска где угодно.
// элемент
Используется '*' для получения любого элемента.
// *
/ *
Используется ' [@… ]' для получения атрибутов.
// * [@ attribute = 'value']
Используется ' // ' для получения любого потомка.
// element / / anyChild
Используется ' / ', чтобы получить потомка.
// element / directChild OfElement

Вы можете проверить правильность своего XPath в инспекторе с помощью Ctrl + F в Google Chrome.
Или вы можете проверить это на вкладке Консоль, используя;
$ x (« // * [@ id = 'sb_form_q'] »)

Как и CssSelector, вы получаете XPath с помощью FindElement и By.

Использование идентификатора и имени класса

Получить элемент с использованием Id и имени класса довольно просто: вы просто указываете идентификатор элемента или имя класса. Имя класса все равно не будет работают, если в имени класса есть пробелы.

SetUp и TearDown

Теперь давайте используем атрибуты [SetUp] и [TearDown] из NUnit, прежде чем приступить к созданию автоматизированного теста пользовательского интерфейса.

Метод, определенный атрибутом SetUp, вызывается перед каждым тестом, а атрибут TearDown вызывается после каждого теста.

Это полезно знать при написании любого теста, поскольку он организует ваш код.

Теперь в этом примере перед тестированием TestCase01 SetUp создает новый экземпляр ChromeDriver и переходит на указанный URL-адрес и после тестирования TestCase01, TearDown закрывает ChromeDriver.

Пример теста пользовательского интерфейса

Теперь вы готовы писать тесты пользовательского интерфейса с использованием методов Selenium.

Шаги теста, которые я хочу сделать:

• Перейдите в Bing.
• Введите текстовое значение в поле поиска.
• Нажмите на кнопку поиска.
• Подтвердите, что поиск завершен.

Во-первых, вы уже знаете, как перейти на веб-сайт;

driver.Navigate (). GoToUrl (https://www.bing.com/);

Второй требует, чтобы вы вводили текстовое значение в элемент окна поиска.
Вы уже использовали элемент окна поиска ранее, вы можно использовать это.

driver.FindElement (By.CssSelector («#sb_form_q»));

Теперь, чтобы ввести текстовое значение в элемент, вы можете использовать метод SendKeys IWebElement, который, как сказано в его описании, имитирует ввод текста в элемент. .

driver.FindElement (By.CssSelector («#sb_form_q»)). SendKeys («тест»);

Для третьего вам нужно нажать на элемент кнопки поиска, который вы можете найти с помощью инспектора.

driver.FindElement (By.CssSelector («#sb_form_go»));

Чтобы щелкнуть элемент, вы используете метод Click IWebElement.

driver.FindElement (By.CssSelector («#sb_form_go»)). Щелкните ();

И, наконец, вам нужно Подтвердить, что поиск завершен. Для этого выполните поиск в Bing и проверьте, что изменилось в элементе окна поиска после поиска.

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

driver.FindElement (By.CssSelector («# sb_form_q»)). GetAttribute («значение»);

Ожидающий элемент

В этом разделе я расскажу о различных ожиданиях, которые вы можете использовать, когда Selenium пытается получить доступ к элементу до его загрузки. .

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

Неявное ожидание
Неявное ожидание: ожидает определенное время, прежде чем генерировать исключение.

Явное ожидание
Явное ожидание, ожидает определенных условий и определенного количества времени перед генерацией исключения, для этого ожидания мы используем Метод До WebDriverWait.

В явном ожидании вы также можете игнорировать некоторые типы исключений во время ожидания.

Объектная модель страницы

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

Этот шаблон разработки называется объектной моделью страницы, что делает ваш код более читаемым и удобным для сопровождения.

Читабельность: ваши тестовые примеры будут вызывать элементы или методы из класса страницы, у которого будет больше значимые имена, такие как элемент searchButton или метод Search (поиск по строке), и поскольку у вас будет меньше кода в ваших тестовых примерах, вы сможете читать и понять ваши контрольные примеры проще.

Поддерживаемый: поскольку у вас будет класс страницы для каждой операции, которую выполняет страница, или каждого элемента, который страница имеет, при изменении любого из их значения вы можете изменить их из класса Page, где каждый тестовый пример будет вызывать, вместо внесения изменений в КАЖДЫЙ тестовый пример, в котором используется этот элемент.

Класс страницы

Используя предыдущий пример Bing, я добавлю для него два класса Page.

Первый - HomePage, который будет охватывать элементы и методы для домашней страницы Bing.

Второй - SearchPage, который будет охватывать элементы и методы страницы, на которую мы направляемся после выполнения поиска на домашней странице.

Создайте две папки Pages и Test, добавьте класс с именем HomePage в папку Pages и переместите свой test class в папку Test.

Щелкните правой кнопкой мыши библиотеку классов ›Добавить› Новая папка
Щелкните правой кнопкой мыши Новая папка ›Добавить ›Класс

Добавьте WebDriver в свой класс HomePage.

Вы должны получить драйвер в качестве параметра при инициализации класса, так как вам нужно будет использовать тот же драйвер, который используют ваши тесты.

Теперь вернемся к тесту и получим код, который мы использовали для поиска;

И добавьте их в новый метод на домашней странице под названием MakeSearch, который получает строковый параметр;

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

Краткое объяснение

• Поскольку класс домашней страницы создан в другой папке, он может иметь пространство имен, отличное от ваших тестовых классов, в этом случае укажите это пространство имен с помощью директивы using в тестовый класс.
• Инициализируйте класс Домашняя страница в «[SetUp]» после инициализации веб-драйвера, поскольку он должен использовать веб-драйвер.
• В этом тесте мы вызываем метод из класса домашней страницы, который предназначен для выполнения поиска, вместо того, чтобы вызывать каждый шаг метода поиска в тестовом классе, что делает наши тесты более читаемыми и удобными для сопровождения.

Следующим шагом для лучшей читаемости является присвоение имени каждому селектору в классе Page.

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

Чтобы предотвратить это, объявите осмысленно названные статические значения By поверх класса и используйте их в своем методе.

Наконец, мы можем добавить класс с именем SearchPage в папку Pages.
В классе Search Page добавьте метод GetSearchValue, который возвращает значение строки.

Затем из тестового класса удалите эту строку кода;

Добавьте правую часть этой удаленной строки кода в GetSearchValue в качестве ее возвращаемого значения.

В итоге ваш класс SearchPage должен выглядеть так:

И ваш тестовый класс должен выглядеть так:

Видите ли, тест стал читабельнее, чем раньше.

Создание базовой страницы

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

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

Например, я добавил базовую страницу к предыдущему примеру, она сокращает методы Selenium.

• Метод FindElement BasePage получает в качестве параметра указатель By, использует веб-драйвер для find элемент с параметром by и возвращает элемент вызывающей стороне.
• Метод ClickElement получает локатор By в качестве параметра, получает элемент с помощью метода FindElement и вызывает метод Click для элемент найден.
• Метод FillText получает локатор By и строку в качестве параметров, получает элемент с помощью метода FindElement и вызывает SendKeys для элемента, найденного с помощью параметра string.

Теперь HomePage и SearchPage наследует и использует методы BasePage вместо прямого вызова драйвера.

Другие шаблоны классов, которые вы можете использовать

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

Несколько примеров шаблонов классов, чтобы дать вам представление;

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

Это все, спасибо за чтение.