ASPERO.PRO > Junior QA > Элементы интерфейса сайта Элементы интерфейса (или элементы управления) – это поля различных типов, которые используются для ввода, изменения или отображения данных. Тестировщикам нужно ориентироваться в названиях элементов, чтобы понимать документацию и корректно называть их в баг-репортах и тест-кейсах.

Типичные UI элементы на сайте

Button (Кнопка) — элемент, при нажатии на который происходит какое-то действие на сайте. Radiobutton (Переключатель опций) — позволяет пользователю выбрать одну опцию Checkbox (Флажок) — позволяет выбрать несколько опций Select (Выпадающий список) — позволяет пользователю выбрать одну опцию из выпадающего списка Accordeon (Аккордеон) — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента. Slider (Слайдер) — переключатель изображений (или другого контента) работающий автоматически или вручную Content (Контент) — текст, изображения, видео, то есть наполнение сайта. Popin (Попин) — небольшое всплывающее окно в углу экрана. Popup (Попап, Модальное окно) — разновидность всплывающего окна. Оно появляется на большую часть экрана и блокирует работы с остальным сайтом. Это может быть форма обратной связи, или просмотр фотографий в вк и фейсбуке. Block (Блок) — смысловой элемент включающий в себя информацию только об одной сущности. Обычно блок начинается с заголовка и отделен от следующего каким-либо визуальным решением, цветом, линией, тенью. Раздел — страница сайта. Тут все просто. Header (Шапка, хеддер) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е она перемещается вместе с перемещением пользователя по странице. Footer (Подвал, футер) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта Galley (Галерея) — набор из нескольких изображений Preview (Превью, предпросмотр) — изображение или часть другого контента, уменьшенная в размере. При нажатии на превью открывается исходный размер контента, отображаемого в превью. Border (Бордер) — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками) Tooltip (Тултип) — подсказка, всплывающая при наведении на элемент Pointer Cursor (Поинтер) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку Text Cursor — тип курсора, стандартный для редактирования текста Navigation (Навигация) — любой вид элементов позволяющая перенаправлять пользователя на похожий элемент будь то страница, другая картинка, следующий текст и так далее. Pagination (Пагинация) — нумерация страниц, обычно отображенная как навигация в конце страницы List (Списки) — в веб интерфейсах присутствуют нумерованные списки (цифрами) , маркированные списки (точки, квадратики, кружки, черточки) и списки определений Arrows (Стрелочки) — вид навигации. Search Bar (Поисковая строка) — строка для ввода поискового запроса Player (Плеер) — элемент воспроизводящий аудио и видеофайлы Slider (Слайдер) — предназначен для ввода чисел в указанном диапазоне Editbox (Текстовое поле) — поле для ввода текстовых значений Password field (Поле пароля) — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки. Input Mask (Маска) — это значения, указывающие формат допустимых значений входных данных в поле. Link (Ссылка) — элемент интерфейса перенаправляющий вас по адресу, указанному в нем. Anchor (Якорь) — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем Tabs (Вкладки, табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку Progress bar (Строка выполнения, прогресса, загрузки) — элемент GUI, который представляет собой прямоугольную область, которая «заполняется» областью другого цвета/фактуры по мере выполнения какой-либо задачи, например, загрузки файла. Switch (Переключатель) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл Alert (Алерт, Окно с предупреждением) — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером Spinner / Throbber (Спиннер, троббер) — анимированный элемент, воспроизводящийся в процессе выполнения какой-то задачи. Preloader (Прелоадер) — развновидность спиннера для индикации процесса загрузки сайта, видео, изображений и другого контента. Rating bar (Рейтинг) — элемент интерфейса показывающий среднюю оценку Tags (Теги) — элемент чаще всего располагающийся под контентом. Показывает принадлежность статьи, товара и пр. к конкретной категории. Зачастую при нажатии на тег, вы попадете на страницу со всем контентом, у которого есть такой тэг Breadcrumbs (Хлебные крошки, навигационная цепочка) — элемент интерфейса, показывающий путь от начала до того уровня, где в данный момент находится пользователь. См. также https://ru.wikipedia.org/wiki/Элемент_интерфейса и ее английскую версию. Статья базируется на https://borodaboroda.com/blog/elementy-interfejsa-sajta/

Про внешний вид элементов

В каждой операционной системе существует свой набор «родных» элементов интерфейса со своим стилем. На вэб-странице разработчик с помощью CSS может придать особый вид каждому элементу. Документ, помимо прочего описывающий как должны выглядеть базовые элементы называется «Style Guide» (Стилистический справочник) или «Guide Lines» (Стилистическое руководство). Вот примеры таких документов: https://developer.apple.com/design/human-interface-guidelines/ https://material.io/design/ https://design.gov.ua

Веб-формы

Веб-форма на сайте — это аналог бумажной формы, анкеты, бланка и опросного листа.form Форму можно использовать для того чтобы получать сведения от посетителей сайта или выдавать нужные данные в ответ. К примеру, с помощью web-формы можно указать адресс доставки товара или же получить список книг по фильтру, где фильтр тоже является формой. Все что требуется от посетителей, так это внести различного рода информацию в поля формы, выбрать необходимые пункты в списках, установить переключатели и т.д. В разметке веб-страницы форма задается тегом <form>, внутри которого и располагаются элементы управления. Для отправки формы имеются два метода: GET и POST. Метод GET рекомендуется использовать в случаях, когда при обработке формы на стороне сервера не происходит побочных действий, например, поиск. В противном случае, когда на стороне сервера подразумевается модификация в базах данных и т.п., требуется использовать метод POST. Об отличиях методов GET и POST часто спрашивают на собеседовании. Вот тут (на английском) дается детальное описание различий. Подробнее о формах читайте тут: HTML Book - Тег <form> HTML5-формы