МДК 01.02 «Поддержка и тестирование программных модулей»

1. МДК 01.02 «Поддержка и тестирование программных модулей»

1

2. ОСНОВЫ тестирования веб-приложений.

2

3. Что такое Selenium?

Selenium — это один из самых популярных и широко
используемых инструментов для автоматизации тестирования
веб-приложений.
Он позволяет имитировать действия пользователя в
браузере, такие как клики по элементам, ввод текста, переход
по ссылкам, и многое другое.
Selenium поддерживает все основные браузеры.
Парсеры на Selenium могут быть написаны на нескольких
языках программирования: Java, C#, Python, JavaScript, Ruby
и Kotlin.
3

4. Что такое Selenium?

Selenium WebDriver — библиотека для управления
браузерами.
4

5.

Webdriver
Webdriver является основным компонентом
Selenium для автоматизации действий в веб-браузере.
в
Это интерфейс, который позволяет отправлять
команды напрямую в браузер и контролировать
его.
Создание экземпляра WebDriver инициирует
сессию
браузера,
которая
используется
для
выполнения операций, таких как открытие веб-страниц,
клик по элементам, ввод текста и многое другое.
5

6.

Webdriver
Пример создания экземпляра WebDriver для Google
Chrome:
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("http://example.com")
6

7.

WebElement
WebElement представляет собой элемент на вебстранице, с которым Selenium может взаимодействовать.
Это может быть кнопка, ссылка, текстовое поле и
любой другой элемент на странице.
Каждый WebElement обладает методами для
взаимодействия, такими как клик click(), ввод текста
send_keys() и др.
7

8.

WebElement
Пример взаимодействия с WebElement:
elem = driver.find_element(By.ID, 'q')
# Находим элемент по его ID
elem.send_keys('Selenium')
# Вводим текст в текстовое поле
elem.submit()
# Отправляем форму
8

9.

Класс By
By - это класс в Selenium, который предоставляет
набор методов для нахождения элементов на странице.
Существуют различные стратегии поиска, такие как
поиск по идентификатору (ID), имени (NAME),
классу
(CLASS_NAME),
CSS-селектору
(CSS_SELECTOR) и другие.
9

10.

Класс By
Пример использования класса By:
from selenium.webdriver.common.by import By
# Найдем кнопку
submit_button =
driver.find_element(By.CSS_SELECTOR,
".submit-submission")
# Находим элемент по CSS-селектору
10

11. ОСНОВЫ тестирования веб-приложений.

11

12.

CSS-селекторы
Язык CSS используется для описания внешнего
вида страницы, которая написана с помощью языка
разметки HTML.
Например, с помощью CSS-селектора выделим кнопку
среди других элементов html-страницы, а стиль color задаст
кнопке цвет green.
12

13.

CSS-селекторы
Синтаксис такого выражения в CSS-файле выглядит
так:
СЕЛЕКТОР
button {
color: green;
}
выражение задающее цвет
элементу button
!
Знание правил написания CSS-селекторов
нужно, чтобы искать элементы на HTMLстранице и взаимодействовать с ними.
13

14.

Особенности языка HTML
1. Страница на языке HTML состоит из элементов,
начало и конец элемента задаются с помощью
специальных пометок – тегов (tag);
2. У тегов есть атрибуты,
свойства элементов;
которые
определяют
3. Страница на языке HTML имеет иерархическую
структуру.
14

15.

Tag – элемент или тег
Начало и конец элементов обрамляются специальными
словами – тегами (tag). Задача тегов – обозначить, какой
именно тип информации на странице они представляют
(картинка, текст, блок, ссылка и так далее). Например:
<p>Здесь написан текст.</p>
Некоторым тегам закрывающий тег не нужен,
достаточно только открывающего. Например, тег для
переноса строки:
<br>
15

16.

Attribute – атрибуты или свойства элемента
Элементам можно задавать различные стандартные
свойства, а также создавать собственные свойства или
атрибуты. Атрибуты обычно имеют вид:
имя="значение"
Например:
атрибут
<a href="/about">Подробнее</a>
ссылка для тега <a>, на которую
будет вести текст внутри тега
16

17.

Атрибут class
Классы (class) чаще всего используют для задания
правил вёрстки с помощью CSS. Например, элементу
задано два класса: simple-text и main :
<div class="simple-text main">текст</div>
Атрибут name
Свойство name используется для задания якоря
(закладки) в html-странице.
<a name="top"></a>
17

18.

Атрибут id
Атрибут id – уникальный указатель на элемент.
Значение id в общем случае не должно повторяться в
пределах страницы:
<button id="save_button">Save</button>
!
В современных JavaScript-фреймворках idатрибуты чаще всего генерируются динамически
самим фреймворком, поэтому они изменяются
каждый раз при перезагрузке страницы и
совершенно нечитабельны, например: вы увидите
что-то вроде id="u_ps_0_0_n" или id="avadspffd".
Не используйте его!
18

19.

Иерархия в HTML-документах
HTML-документ часто сравнивают с моделью
семейного древа, в котором есть родители, дети,
братья, предки и потомки.
Такое сравнение допустимо благодаря возможности
вкладывать одни элементы в другие. Вложенные
(дочерние) элементы могут, в свою очередь,
содержать свои дочерние элементы, следовательно,
глубина вложения элементов может быть любой.
19

20.

Иерархия в HTML-документах
Потомок элемента X – элемент любой степени вложенности
внутри элемента X;
Ребёнок или дочерний элемент — прямой потомок (т.е.
элемент на первом уровне вложенности);
Предок элемента Y – любой элемент X, который включает в
себя элемент Y;
Родитель — это прямой предок (т.е. элемент, который
расположен выше строго на 1 уровень);
Братский или соседний элемент – элемент X, который
расположен на одном уровне иерархии с элементом Y.
Элементы X и Y имеют одного родителя.
20

21.

Иерархия в HTML-документах
Рассмотрим пример HTML кода.
Нарисуем блок-схему этого HTML кода, где каждый
блок будет соответствовать одному HTML элементу:
?
21

22.

Иерархия в HTML-документах
Рассмотрим пример HTML кода.
Нарисуем блок-схему этого HTML кода, где каждый
блок будет соответствовать одному HTML элементу:
div class="news"
?
?
22

23.

Иерархия в HTML-документах
Рассмотрим пример HTML кода.
Нарисуем блок-схему этого HTML кода, где каждый
блок будет соответствовать одному HTML элементу:
div class="news"
div class="title"
div class="text_block"
23

24.

Иерархия в HTML-документах
Рассмотрим пример HTML кода.
Нарисуем блок-схему этого HTML кода, где каждый
блок будет соответствовать одному HTML элементу:
div class="news"
div class="title"
?
div class="text_block"
24

25.

Иерархия в HTML-документах
Рассмотрим пример HTML кода.
Нарисуем блок-схему этого HTML кода, где каждый блок
будет соответствовать одному HTML элементу:
div class="news"
div class="title"
p class="title_text"
div class="text_block"
?
?
25

26.

Иерархия в HTML-документах
Рассмотрим пример HTML кода.
Нарисуем блок-схему этого HTML кода, где каждый блок
будет соответствовать одному HTML элементу:
div class="news"
div class="title"
p class="title_text"
div class="text_block"
p class="first"
p class="second"
26

27.

Иерархия в HTML-документах
div class="news"
div class="title"
p class="title_text"
?
div class="text_block"
p class="first"
p class="second"
Сколько потомков у элемента, имеющего
class="news"?
5
27

28.

Иерархия в HTML-документах
div class="news"
div class="title"
p class="title_text"
?
div class="text_block"
p class="first"
p class="second"
Какие элементы можно назвать дочерними (child)
элементами для элемента с class="news"?
Только элементы с class=
"title" и class="text_block".
28

29.

Иерархия в HTML-документах
div class="news"
div class="title"
p class="title_text"
?
div class="text_block"
p class="first"
p class="second"
Какие элементы являются предками элемента с
class="first"?
Элементы с class="text_block"
и class="news".
29

30.

Иерархия в HTML-документах
div class="news"
div class="title"
p class="title_text"
?
div class="text_block"
p class="first"
p class="second"
Какой элемент является родителем элемента с
class="first"?
Только элемент с
class="text_block".
30

31.

Иерархия в HTML-документах
div class="news"
div class="title"
p class="title_text"
?
div class="text_block"
p class="first"
p class="second"
Какой элемент мы можем назвать братским или
соседним
элементом
для
элемента,
имеющего
class="first"?
Элемент с
class="second".
31

32.

Элемент в html-структуре веб-страницы
Чтобы посмотреть, как описывается
структуре любой веб-страницы:
элемент
в
html-
откройте веб-страницу в браузере
нажмите правой кнопкой мыши на нужном элементе
в контекстном меню выберите пункт меню "Inspect" (в
русскоязычной версии браузера "Просмотреть код")
Справа или внизу окна браузера откроется консоль
разработчика на вкладке Elements. Выбранный
элемент будет подсвечен.
32

33.

Элемент в html-структуре веб-страницы
?
Откроем
веб-страницу
на
сайте https://www.google.com/
Нажмем правой кнопкой мыши на элементе
кнопка "Поиск в Google
В контекстном меню выберем пункт меню
"Просмотреть код"
Справа
окна
браузера
открылась
консоль
разработчика на вкладке Elements. Выбранный
элемент подсвечен.
Какой тег используется
кнопки "Поиск в Google"?
для
задания
input
33

34.

Элемент в html-структуре веб-страницы
?
Какие
атрибуты,
используются
на
сайте
https://www.google.com/
для
задания
свойств кнопки "Поиск в Google" в структуре
html-страницы?
id
name
input
aria-label
value
class
sf.chk
type
34

35.

Элемент в html-структуре веб-страницы
Примеры
атрибутов,
которые
повлияют
отображение и поведение элемента на странице:
на
<h1 style="color: blue;"> Заголовок будет
синим, т.к. цвет задан в атрибуте style </h1>
<p hidden> Атрибут hidden скрывает элемент на
странице, элемент не будет показываться </p>
<button disabled> Кнопка с атрибутом disabled
будет заблокирована </button>
35

36. ОСНОВЫ тестирования веб-приложений.

36

37.

Локаторы
Локаторы используются в Selenium для поиска элементов
на веб-странице.
Существует несколько типов локаторов:
ID: Находит элемент по его идентификатору.
Name: Ищет элементы по атрибуту name.
XPath: Позволяет находить элементы с использованием
XPath выражений.
CSS Selector: Использует CSS-селекторы для поиска.
Link Text: Находит ссылку по её тексту.
Partial Link Text: Поиск ссылки по части её текста.
Tag Name: Ищет элементы по имени тега.
Class Name: Находит элементы по имени класса.
37

38.

Поиск элементов
Методы find_element() и find_elements()
Локаторы
используются
универсальных методов:
с
помощью
двух
find_element(),
который возвращает ровно один
элемент, найденный первым; Если элемент не найден,
Selenium
сгенерирует
исключение
NoSuchElementException.
# Ищем элемент с тегом img
elem = driver.find_element(By.TAG_NAME, 'img')
38

39.

Поиск элементов
Методы find_element() и find_elements()
Локаторы
используются
универсальных методов:
с
помощью
двух
find_elements() - возвращает список найденных
элементов, этот метод вернёт пустой список, если
ничего не найдено.
# Ищем все элементы с классом some_class
elements = driver.find_elements(By.CLASS_NAME,
'some_class')
39

40.

Методы find_element() и find_elements()
Иногда возникает ситуация, когда у нас есть несколько
одинаковых по сути объектов на странице, например,
иконки товаров в корзине интернет-магазина.
В тесте нам нужно проверить, что отображаются все
выбранные для покупки товары. Для этого используется
метод
find_elements,
которые
в
отличие
от find_element вернёт список всех найденных элементов
по заданному условию. Проверив длину списка, мы можем
удостовериться, что в корзине отобразилось правильное
40
количество товаров.

41.

Пример кода:
browser.get("https://shop.com/book1.html")
# добавляем товар в корзину
add_button = browser.find_element(By.CSS_SELECTOR, ".add")
add_button.click()
browser.get("https://shop.com/book2.html")
# добавляем товар в корзину
add_button = browser.find_element(By.CSS_SELECTOR, ".add")
add_button.click()
browser.get("https://shop.com/basket.html")
# ищем все добавленные товары
goods = browser.find_elements(By.CSS_SELECTOR, ".good")
# проверяем, что количество товаров равно 2
41
assert len(goods) == 2

42.

Работа с элементами
element.click() - Симулирует клик по элементу.
element.send_keys("text") - Вводит текст в текстовое
поле.
element.clear() - Очищает текстовое поле.
element.is_displayed() - Проверяет, отображается ли
элемент на странице.
element.is_enabled() - Проверяет, доступен ли элемент
для взаимодействия (например, не заблокирован).
42

43.

Работа с элементами
element.is_selected() - Проверяет, выбран ли элемент
(актуально для радиокнопок и чекбоксов).
element.get_attribute("attribute")
значение указанного атрибута элемента.
-
Возвращает
element.text - Возвращает текст элемента.
element.submit() - Отправляет форму, в которой
находится элемент.
43

44.

Навигация по истории браузера
webdriver.back() - С помощью этого метода вы
можете вернуться на предыдущую страницу, как если бы
нажали стрелочку "назад" в браузере.
webdriver.forward() - Аналогично предыдущему, но
перемещает вперёд по истории браузера.
webdriver.refresh() Этот метод обновляет
текущую страницу, как если бы вы нажали кнопку
обновления в браузере.
44

45.

Работа со скриншотами
webdriver.get_screenshot_as_file("../file_name.jpg")
- Сохраняет скриншот страницы в файл по указанному
пути. Возвращает True если всё прошло успешно, и False
при ошибках ввода-вывода.
webdriver.save_screenshot("file_name.jpg")
Сохраняет скриншот в папке с проектом.
-
45

46.

Работа со скриншотами
webdriver.get_screenshot_as_png() - Возвращает
скриншот в виде двоичных данных (binary data), которые
можно передать или сохранить в файл в конструкторе
with/as;
webdriver.get_screenshot_as_base64() - Возвращает
скриншот в виде строки в кодировке Base64. Удобно для
встроенных изображений в HTML.
46

47.

Открытие и закрытие страниц и браузера
webdriver.get("http://example_url.ru") - Открывает
указанный URL в браузере.
webdriver.close()
вкладку.
-
Закрывает
только
текущую
webdriver.quit() - Закрывает все вкладки и окна,
завершает процесс драйвера, освобождает ресурсы.
! Каждый раз при открытии браузера в системе создается
процесс, который останется висеть, даже если вы вручную
закроете окно браузера. Чтобы не остаться без оперативной
памяти после запуска нескольких скриптов,
всегда добавляйте к своим скриптам команду закрытия!
47

48.

Открытие и закрытие страниц и браузера
Для того чтобы гарантировать закрытие, даже если произошла
ошибка
в
предыдущих
строках,
нужно
использовать
конструкцию try/finally:
from selenium import webdriver
from selenium.webdriver.common.by import By
link = "http://july.github.io/task.html"
try:
browser = webdriver.Chrome()
browser.get(link)
button = browser.find_element(By.ID, "sub_button")
button.click()
48
finally:
browser.quit()

49.

Открытие и закрытие страниц и браузера
Третий способ — использование менеджера контекста with/as.
С этим способом не нужно думать о том, когда закрывать браузер,
менеджер контекста выполнит закрытие автоматически
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
with webdriver.Chrome() as driver:
driver.get('http://parsinger.ru/1_1.html')
button = driver.find_element(By.ID, "sale_button")
time.sleep(2)
button.click()
49
time.sleep(2)

50.

Работа с элементами типа checkbox и radiobutton
Оба этих элемента создаются при помощи тега input со
значением атрибута type равным checkbox или radio
соответственно. В html-коде страницы вы увидите:
<input type="checkbox">
<input type="radio">
Если checkbox или radiobutton выбран, то у элемента
появится новый атрибут checked без значения. Часто атрибут
checked уже установлен для одного из элементов по умолчанию.
<input type="checkbox" checked>
<input type="radio" checked>
50

51.

Работа с элементами типа checkbox и radiobutton
Radiobuttons объединяются в группу, где все элементы
имеют одинаковые значения атрибута name, но разные
значения атрибута value:
<input type="radio" name="language"
value="python" checked>
<input type="radio" name="language"
value="selenium">
51

52.

Работа с элементами типа checkbox и radiobutton
Чтобы снять/поставить галочку в элементе типа
checkbox или выбрать опцию из группы radiobuttons,
надо указать WebDriver метод поиска элемента и
выполнить для найденного элемента метод click():
option1 = browser.find_element(By.CSS_SELECTOR,
"[value='python']")
option1.click()
52

53.

Работа с элементами типа checkbox и radiobutton
Можно увидеть тег label рядом с input.
Этот тег используется, чтобы сделать кликабельным
текст, который отображается рядом с флажком.
Этот текст заключен внутри тега label. Элемент label
связывается с элементом input с помощью атрибута for, в
котором указывается значение атрибута id для элемента
input:
53

54.

Работа с элементами типа checkbox и radiobutton
<div>
<input type="radio" id="python"
name="language" checked>
<label for="python">Python</label>
</div>
<div>
<input type="radio" id="java"
name="language">
<label for="java">Java</label>
</div>
54

55.

Работа с элементами типа checkbox и radiobutton
В этом случае можно также отметить нужный пункт с
помощью WebDriver, выполнив метод click() на элементе
label.
option1 = browser.find_element(By.CSS_SELECTOR,
"[for='java']")
option1.click()
55

56.

Работа с cookies
webdriver.get_cookies()
cookies.
- Возвращает список всех
webdriver.get_cookie(name_cookie)
конкретную cookie по имени.
-
Возвращает
webdriver.add_cookie(cookie_dict)
новую cookie к вашему текущему сеансу;
-
Добавляет
webdriver.delete_cookie(name_cookie)
cookie по имени.
-
Удаляет
webdriver.delete_all_cookies() - удаляет все файлы
cookie в рамках текущего сеанса;
56

57.

Работа с окном браузера
webdriver.get_window_position()
Возвращает
словарь с текущей позицией окна браузера ({'x': 10, 'y': 50}).
webdriver.maximize_window() - Разворачивает окно
на весь экран.
webdriver.minimize_window() - Сворачивает окно.
57

58.

Работа с окном браузера
webdriver.fullscreen_window() - Переводит окно в
полноэкранный режим, как при нажатии F11.
webdriver.get_window_size() - Возвращает размер
окна в виде словаря ({'width': 945, 'height': 1020}).
webdriver.set_window_size(800,600) - Устанавливает
новый размер окна.
58

59.

Вкладки в браузере
При работе в браузере мы можем открывать новые
вкладки и работать в них. Можем открыть любое
количество вкладок одновременно, но работать можем
только в активной.
Мы можем переключаться между вкладками,
проходить по вкладкам в цикле, получать их дескрипторы
! Дескриптор — это идентификатор
вкладки браузера.
59

60.

Вкладки в браузере
В Opera и Chrome дескрипторы выглядят одинаково:
CDwindow-8696D8A3F222B281BB03FC1EC259B251,
а в Firefox они имеют иной вид, например,
d8e0e954-bf72-4eae-a63e-5ea404c3b0eb.
Методы работы с вкладками:
current_window_handle
—
возвращает
дескриптор
текущей вкладки;
window_handles
—
возвращает
дескрипторов открытых вкладок;
список
всех
switch_to.window(window_handles[0]) — переключает
фокус между вкладками.
60

61.

Исполнение JavaScript
Метод execute_script()
Синтаксис:
webdriver.execute_script(script, *args)
В методе execute_script() можно использовать различные
полезные параметры:
execute_script("window.open('http://parsinger.ru',
'tab2');")
— создаст новую вкладку в браузере с именем "tab2".
61

62.

Исполнение JavaScript
execute_script("return
document.body.scrollHeight")
— вернёт значение высоты элемента <body>.
execute_script("return
window.innerHeight")
вернёт значение высоты окна браузера.
—
execute_script("return window.innerWidth") — вернёт
значение ширины окна браузера.
execute_script("return document.title;") — возвращает
title открытого документа.
62

63.

Исполнение JavaScript
execute_script("window.scrollBy(X,
Y)")
—
прокрутит документ на заданное число пикселей по
осям X и Y.
X — смещение в пикселях по горизонтали.
Y — смещение в пикселях по вертикали.
execute_script("alert('Ура Selenium')") — вызывает
модальное окно Alert.
execute_script("return
document.documentURI;")
— возвращает URL документа.
63

64.

Время ожидания и таймауты
webdriver.set_page_load_timeout() - Устанавливает
таймаут на загрузку страницы. Выбрасывает исключение,
если время вышло.
Таймауты в коде, чтобы видеть процесс выполнения
кода и чтобы браузер не закрывался за мгновение:
import time
time.sleep(2)
64

65.

Ожидания (Waits)
Ожидания в Selenium используются для управления
временем ожидания появления элементов на вебстранице.
Существует два типа ожиданий:
Неявные ожидания (Implicit Waits): Устанавливают
общее время ожидания появления элемента перед тем,
как выбросить исключение.
Явные ожидания (Explicit Waits): Позволяют задать
условие для ожидания конкретного элемента, что
обеспечивает большую гибкость по сравнению с
неявными ожиданиями.
65