ГУАП

КАФЕДРА № 41

ОТЧЕТ ЗАЩИЩЕН С ОЦЕНКОЙ

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

старший преподаватель				Н.Н. Григорьева
должность, уч. степень, звание		подпись, дата		инициалы, фамилия

ОТЧЕТ О ЛАБОРАТОРНОЙ РАБОТЕ №4

ПОЛУЧЕНИЕ ПРАКТИЧЕСКИХ НАВЫКОВ ПО ТЕСТИРОВАНИЮ ВЕБ-ЭЛЕМЕНТОВ НА ОСНОВЕ CSS-СЕЛЕКТОРОВ

по курсу: ПРОГРАММНАЯ ИНЖЕНЕРИЯ

РАБОТУ ВЫПОЛНИЛ

СТУДЕНТ ГР. №
				подпись, дата		инициалы, фамилия

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

Цель работы:

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

основе CSS-селекторов.

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

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

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

DevTools.

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

Ход работы:

Вариант задания 15 (Рисунок 1).

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

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

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

На рисунке отображены атрибуты изображения Кешью, среди них: src - ссылка на источник изображения, heading – подпись, name - имя и т.д.

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

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

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

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

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

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

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

Рисунок 5 – Элемент almond

Рисунок 6 – Поиск по тегу

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

Рисунок 8 – Поиск по классу

Вывод:

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

Список используемых источников:

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

2. Jeffrey Way. 30 CSS селекторов, которые вы должны запомнить. URL: https://code.tutsplus.com/ru/tutorials/the-30-css-selectors-you-must-memorize--net-16048 (дата обращения 25.02.2024).

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