Лабораторные работы Цифровая кафедра ФЭА 4 семестр / Введение в тестирование веб-приложений / cktestwebthird

МИНОБРНАУКИ РОССИИ САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ ЭЛЕКТРОТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ «ЛЭТИ» ИМ. В.И. УЛЬЯНОВА (ЛЕНИНА) Цифровая Кафедра

ПРАКТИЧЕСКАЯ РАБОТА №3

Тестирование на основе CSS-селекторов

Вариант - 7

Санкт-Петербург

2026

Цель.

Получение практических навыков по тестированию веб-элементов на основе CSS-селекторов.

Задачи.

1.Определить атрибуты веб-элемента средствами DevTools.

2.Провести тестирование на основе тегов и CSS-селекторов средствами Dev-Tools.

3.Зафиксировать результат обучения в отчете.

Браузер, который использовался при выполнении работы, – Safari.

Нахождение программного кода веб-элемента и его атрибутов.

Для выполнения работы был осуществлен переход на учебный тренажер (https://sqa-course.github.io/selectors_training/) и выбран 7 вариант.

Для просмотра программного кода веб-страницы была использована панель инструментов веб-разработчика DevTools (вкладка «Элементы»).

С помощью инструмента инспектирования был выбран один из графических элементов на странице. В HTML-дереве этот элемент представлен тегом <img>, который предназначен для отображения изображений. У данного элемента были определены следующие атрибуты и их значения:

src - содержит адрес файла с картинкой;

heading - содержит текстовое название элемента;

id - уникальный указатель на элемент в пределах страницы; name - используется для задания якоря;

class - атрибут, который используется для задания правил вёрстки с помощью CSS;

data-type - информационный атрибут о типе данных.

Каждый набор таких уникальных атрибутов выступает в роли селектора (локатора) для поиска конкретного элемента на странице.

Скриншот 1. Тег img с атрибутами для изображения “Патрик Стар”

Поиск веб-элемента различными способами.

Для тестирования поиска была активирована строка поиска внутри пространства DevTools с помощью комбинации клавиш CTRL+F.

Поиск по тегу.

Был осуществлен поиск по тегу <img>. В результате в строке поиска отразилось общее количество таких элементов на странице. Поскольку разработчики используют небольшое количество тегов для разметки, одному тегу соответствует сразу множество элементов на странице, что делает этот поиск не всегда удобным для нахождения уникального объекта.

Скриншот 2. Результаты поиска по тегу <img>

Поиск по селектору.

Для точного поиска был использован уникальный CSS-селектор. Через контекстное меню исследуемого элемента программного кода был скопирован его селектор (пункт Copy -> Copy selector). При вводе данного селектора в поисковую строку DevTools элемент был успешно найден и подсвечен синим цветом в HTML-коде.

Скриншот 3. Результаты поиска по селектору #patrick

Поиск по значению атрибута.

Был произведен поиск элемента по его уникальному идентификатору id. В строке поиска значение атрибута было записано в квадратных скобках: [id=" patrick"]. Поиск выдал ровно 1 совпадение, так как значение id не должно повторяться в пределах веб-страницы.

Скриншот 4. Результаты поиска по id = “patrick”

Поиск по классу.

Был выполнен поиск всех элементов, объединенных общим классом, определяющим их стилевое оформление (наследование свойств предка). Поиск осуществлялся через прямоугольные скобки [class=" imageContainer box-shadow"]. Также был опробован короткий вариант поиска через точку:

.imageContainer. В результате фильтрации было найдено несколько элементов с одинаковым стилем.

Скриншот 5. Результаты поиска по классу imageContainer

Вывод.

Входе выполнения практической работы были успешно достигнуты поставленные цели: были получены практические навыки по тестированию веб-элементов графического интерфейса методом «белого ящика» с доступом к коду веб-страницы. Закреплено понимание структуры HTMLдокумента как модели древа с вложенными дочерними и родительскими элементами.

Впроцессе работы освоены инструменты разработчика DevTools и и были получены навыки нахождения веб-элементов по тегу, классу, значению атрибута и сложному CSS-селектору . Основная проблема, с которой мы столкнулись при тестировании - это избыточная выдача результатов при поиске по базовым тегам (Например, <img>), так как они формируют структуру всей страницы. Данная проблема решается использованием локаторов, основанных на уникальных атрибутах (таких как id ), или комбинированием классов, что позволяет однозначно идентифицировать требуемый узел в DOM-дереве. Полученные навыки являются фундаментальными для дальнейшей работы с автоматизированным тестированием.

Список использованных источников.

1.Современный учебник JavaScript. URL: https://learn.javascript.ru/cssselectors. (дата обращения: 24.05.2026)

2.Материалы портала Webref. URL: https://webref.ru/course/csstutorial/selector. (дата обращения: 24.05.2026)

3.Материалы портала HTML Academy URL: https://htmlacademy.ru/courses/307/run/2 . (дата обращения: 24.05.2026)

4.Материалы курсы «Автоматизация тестирования с помощью

Selenium и Python». URL: https://stepik.org/course/575/. (дата обращения: 24.05.2026)

5.Jeffrey Way. 30 CSS селекторов, которые вы должны запомнить.

URL: https://code.tutsplus.com/ru/tutorials/the-30-css-selectors-you-must- memorize--net-16048 (дата обращения: 24.05.2026)