4_1

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ

федеральное государственное автономное образовательное учреждение высшего образования

«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ

АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»

Кафедра 41

ПРЕПОДАВАТЕЛЬ

Доцент, канд. техн. наук				Е. Л. Турнецкая
должность, уч. степень, звание		подпись, дата		инициалы, фамилия

Лабораторная работа №4_1

ТЕСТИРОВАНИЕ НА ОСНОВЕ CSS-СЕЛЕКТОРОВ

по курсу: Программная инженерия

СТУДЕНТКА ГР. №		Z0411		25.01.25		М. В. Карелина
	номер группы			подпись, дата		инициалы, фамилия

Номер студенческого билета: 2020/3477

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

2025

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

Для достижения поставленной цели требуется решить следующие задачи:

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

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

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

Вариант 7 (Рис. 1)

Рисунок 2 - Страница с вариантом задания

Определены атрибуты веб-элементов средствами DevTools (Рисунок 2).

Рисунок 1 - Выбор элемента курсором на странице

На рисунке отображены атрибуты изображения Сэнди Чикс, среди них: src - ссылка на источник изображения, heading – заголовок, name – имя, class и data-type.

С помощью контекстного меню скопирован селектор одного из элементов (Рисунок 3).

Рисунок 2 - Копирование селектора

В результате получилось: body > main > div.gallery > div > section > div:nth-child(4). Псевдокласс nth-child(4) говорит о том, что элемент является четвертым от своего родителя.

На рисунке 4 отображено копирование селектора атрибута heading.

Рисунок 3 - Копирование селектора атрибута heading

Скопированный селектор #cheecks говорит о том, что атрибут принадлежит элементу cheecks.

На рисунках 5 - 8 представлен поиск элемента по селектору, тегу, значению атрибута и классу соответственно.

Рисунок 4 - Элемент SpongeBob

Рисунок 5 - Поиск по тегу

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

Рисунок 7 - Поиск по классу

Вывод

В ходе выполнения лабораторной работы мною были освоены навыки нахождения CSS-селекторов, поиска элементов различными способами – по тегу, классу, атрибуту. Осуществлено знакомство с тестированием веб-интерфейса на основе CSS-селекторов.