Фронт Flashcards
(25 cards)
Фронт - это?
Это та часть приложения или сайта, которую видит и использует пользователь. Это интерфейс, через который пользователь взаимодействует с программой: кнопки, меню, текстовые поля и прочее. Фронтенд обрабатывает информацию, которую пользователь вводит, и отправляет эту информацию бэкенду для обработки.
Бэкенд и фронтенд работают в паре, обеспечивая работоспособность и удобство использования программного продукта.
Взаимодействие бэка и фронта по средствам API
1.Отправка запросов (API): Фронтенд передает запросы на сервер (бэкенд) для получения данных или выполнения определенных операций.
2. Обработка запросов: Бэкенд получает запросы от фронтенда, выполняет необходимые действия (например, извлекает информацию из базы данных) и готовит ответ.
3. Отправка данных обратно: После обработки запроса бэкенд отправляет данные обратно на фронтенд для отображения пользователю.
4. Обновление интерфейса: Фронтенд получает данные от бэкенда и обновляет свой интерфейс, чтобы показать пользователю актуальную информацию или результат операции.
Пример взаимодействие бэка и фронта
Пользователь на фронте:
-Выполняет какое-то действие(поисковая строка, добавление товара)
Фронт:
-собирает инфу
-формирует запрос к бэку
Бэк:
-получает запрос с фронта
-проверяет инфу в бд в таб1 (цену, наличие)
-добавляет инфу в таб2, формирует подтверждение
Фронт:.
-получает от бэка подтверждение
-обновляет страницу пользователя
Тестовая средка\Окружение тестирования - это?
Тестовая среда или окружение тестирования (или тестовый стенд) представляет собой определенную конфигурацию аппаратного и программного обеспечения, которая позволяет специалистам по контролю качества запускать проверки ПО. Это, по сути, специальная среда, где тестировщик проводит различные проверки для выявления ошибок в программном обеспечении.
Эти среды позволяют начать тестирование еще до того, как программа готова к релизу.
Типы тестовых сред:
Среда разработчика - создаются и отлаживаются программы.
Среда тестирования - тестировщик проверяет работу ПО(проводит различные виды тестирования)
Интеграционная среда - проверка взаимодействия между модулями и системой.
Превью\Предпродакш среда - финальное тестирование перед выпуском ПО.
Продакш среда - работает конечный пользователь.
Примеры Фронтенд-Тестирования:
- Тестирование пользовательского интерфейса - проверка кнопок, полей ввода, выпадающих списков на корректное отображение. Расположение и выравнивание элементов на странице.
- Тестирование навигации - проверка переходов между страницами и разделами(корректно и без ошибок).
- Тестирование адаптивности - проверка корректна ли адаптация на разных разрешениях экранов.
- Тестирование форм и валидации - проверка формы, можно ли заполнять и отправлять данные, данные проходят валидацию.
- Тестирование анимации и визуальных эффектов - анимация, эффекты и переходы соответствуют дизайну.
- Тестирование динамических элементов - модальные окна, выпадающие списки работают корректно.
- Тестирование кроссбраузерной совместимости - проверка работы в разных браузерах.
- Тестирование респонсивности и скорости загрузки - время загрузки страницы на разных устройствах.
- Тестирование доступности - доступность для пользователей с ограниченными возможностями.
- Тестирование роутинга - переход между различными состояниями, чтобы убедиться, что URL-адреса и страницы работают корректно.
Элементы UI:
Элементы пользовательского интерфейса обеспечивают взаимодействие пользователя с программой.
Список компонентов, требующих проверки, обширен.
-Текстовые поля для ввода данных.
-Чекбоксы для выбора нескольких вариантов.
-Радиокнопки для выбора одного варианта.
-Кнопки действий.
-Значки социальных сетей для шаринга.
Также необходимо учитывать состояния элементов GUI:
-Активировано / деактивировано.
-Заполнено / не заполнено.
-Скрыто / отображено.
-Параметры по умолчанию.
-Поведение при наведении мыши.
Ключевые критерии качества GUI:
-Стили и внешний вид: Таблицы стилей и эстетика интерфейса.
-Совместимость: Обеспечение совместимости с различными браузерами или операционными системами.
-Валидация и целостность данных: Проверка вводимых данных на корректность и целостность.
-Навигация и удобство использования: -Удобство навигации и общее удобство использования интерфейса.
-Безопасность: Безопасное применение различных режимов и функций.
-Реакция на пользовательские действия: Корректная обработка действий пользователя и сочетаний клавиш.
Методы тестирования:
-Пользовательское приемочное тестирование: проверка пригодности продукта для конечного пользователя, обычно проводимая пользователями или их представителями для оценки соответствия ожиданиям.
-Функциональное тестирование: проверка всех функций интерфейса на соответствие требованиям и спецификациям.
-Регрессионное тестирование: проверка, чтобы изменения в программе не повлияли на уже работающие элементы интерфейса.
-Модульное тестирование: тестирование отдельных компонентов интерфейса для обеспечения их корректной работы.
-Тестирование производительности: оценка работы интерфейса при различных нагрузках, чтобы убедиться, что он работает эффективно и отзывчиво.
-Тестирование графического интерфейса: проверка всех аспектов визуального интерфейса, включая внешний вид, адаптивность к разным экранам и реакцию на действия пользователя.
Важные аспекты тестирования GUI:
Компоненты пользовательского интерфейса
-Проверьте расположение, размер, ширину, длину и выравнивание всех элементов пользовательского интерфейса.
-Протестируйте прием данных, вводя в поля текст, цифры, специальные и недопустимые символы.
-Запустите функционал программы при помощи GUI.
-Проверьте орфографию в сообщениях об ошибках и об успешном выполнении.
-Изображения должны быть хорошего качества, а текст — четким.
-Проверьте, как выглядит GUI в разных разрешениях экрана и при изменении размера экрана/страницы.
-Протестируйте полосы прокрутки страницы, а также состояние и поведение элементов управления.
Поведение и удобство использования
-Следующий список включает общие ожидания в отношении поведения и удобства использования программы.
-Приложение открывается двойным кликом.
-Поведение при запуске нескольких экземпляров приложения соответствует ожидаемому.
-В информации о программе отображается название приложения, версия и другие важные сведения.
-Строки заголовков окон и нейминг последовательны.
-При закрытии приложения пользователю предлагается подтвердить закрытие и выводится предупреждение о любой несохраненной работе.
-Динамические элементы, такие как индикаторы выполнения или значки песочных часов, показывают, требуется ли процессам время для загрузки или завершения.
-Онлайн-справка доступна через меню «Справка» и клавишу F1.
-Навигация по вкладкам работает и имеет порядок слева направо и сверху вниз.
-Обязательные поля выделены и имеют валидацию.
-Команды окна имеют соответствующую клавишу быстрого доступа.
HTML:
HTML - представляет собой основу веб-страниц. Он определяет структуру и содержимое страницы, устанавливает, где и как следует размещать каждый элемент.
Отметим важное: HTML фокусируется на разметке контента, но также играет роль в построение интернет-страницы.
HTML, язык разметки гипертекста, представляет собой основу для создания структуры веб-сайтов.
При запросе веб-страницы браузером происходит доступ к серверу. Браузер анализирует строки HTML-описания страницы, определяет объекты и строит их отображение на экране.
Пример HTML
<> - открывающий тег</> -закрывающий тег
<title> - следующий текст будет отображен в заголовке окна страницы.
<body> - содержимое, которое будет видно на странице.
<h1>,<h2> - заголовок разных уровней в тексте.
action - скрипт, который будет обрабатывать эту форму
method - указывает метод
HTML 5 имеет встроенную поддержку разных типов: email, tel, number, time, date, datetime, datetime local, month, week, range, search, color.
required = "required" - поле обязательное к заполнению
password - должен маскировать
autocomplete = '"off" - выключено автодополнение
autocomplete = '"current password" - текущий пароль
<button> - служит для отправки формы
</button></h2></h1></body></title>
CSS:
определяют внешний вид HTML-документов. Внешние стили размещаются в отдельных файлах с расширением .css и подключаются к HTML-странице при помощи тега <link></link> в секции <head>
- Внутренние стили могут быть определены непосредственно внутри HTML-страницы при помощи тега <style> в секции <head>:</style>
- Или применены как атрибуты к конкретным HTML-элементам:
<p>Текст</p>
Тестировщику важно учесть следующие аспекты CSS при тестировании фронтенда
-Корректность отображения: Убедитесь, что стили применяются корректно ко всем элементам.
-Отзывчивость и адаптивность: Проверьте, как веб-страница отображается на разных устройствах и разрешениях экранов.
-Кроссбраузерная совместимость: Гарантируйте, что стили работают одинаково в разных браузерах.
-Верстка и компоненты: Тестируйте различные компоненты, убедитесь, что верстка элементов (кнопки, меню, формы и т.д.) соответствует заданным стилям и требованиям дизайна.
-Интерактивность: Проверьте, что стили корректно реагируют на пользовательские действия, такие как наведение курсора, клики и т.д.
-Загрузка и производительность: Убедитесь, что использование CSS не замедляет загрузку страницы, особенно при наличии большого объема стилей.
-Обработка ошибок: Тестируйте варианты, когда CSS-файлы не загружаются или загружаются неполностью, чтобы гарантировать, что страница отображается приемлемо.
-Доступность: Проверьте, что стили учитывают принципы доступности веб-страницы для пользователей с ограниченными возможностями.
-Актуальность и обновления: Убедитесь, что стили и их обновления не нарушают уже существующую функциональность и дизайн приложения или сайта.
Основное отличие браузеров
— движки, то есть сердце любого браузера. Движок — это код, который обрабатывает страницы, определяет загрузку, рисует сайт, анимирует элементы и определяет стандартные стили для элементов.
Движок браузер- это?
– это ядро любого браузера. Он представлен в виде скрипта и отвечает за преобразование кода Web-продукта в динамическое изображение, которое отображается на экране устройства пользователя. Различия в движках в том, что они имеют разные алгоритмы обработки кода. А ещё в них использованы отличные друг от друга принципы реализации стандартов web’а.
Актуальные Движки:
Blink
Современный движок, созданный в 2013 году на основе WebKit. Считается достаточно быстрым и высокопроизводительным для работы именно с web-приложениями. Применяется в Google Chrome, Opera и новых версиях Microsoft Edge, а также в других браузерах на базе Chromium, например, Yandex Browser.
WebKit
Оптимизирован под устройства компании Apple. Обладает высокой производительностью и поддерживает все основные web-стандарты. Ещё одним из его достоинств является энергоэффективность и высокое качество рендеринга текста и графики, что особенно важно для дисплеев с высоким разрешением. Применяется в Safari.
Gecko
Довольно-таки старый движок – был разработан в 1997 году. Его неоспоримые преимущества – кроссплатформенность и гибкость, т.к. Gecko поддерживает множество операционных систем, в том числе Windows, macOS, Linux и Android. Как и Blink и WebKit, поддерживает все основные web-стандарты. Хотя может быть и не такой шустрый, как WebKit, но у него своя фишечка – расширяемость, т.е. может поддерживать множество уникальных расширений и плагинов (например Selenium). Применяется в Firefox (до версии 57) и других продуктах Mozilla (например, почтовый клиент Thunderbird), SeaMonkey.
Что такое Chrome DevTools
Это набор инструментов, встроенных в браузер Google Chrome, для создания и отладки сайтов. С их помощью можно просматривать исходный код сайта, отлаживать работу frontend: HTML, CSS и JavaScript. Также DevTools позволяет проверять сетевой трафик, быстродействие сайта и многое другое.
Что такое Elements
Здесь отображается весь HTML- и CSS-код открытой страницы. На данной вкладке можно просмотреть и внести исправления в файлы CSS и JavaScript.
Отредактировать HTML-элементы на странице, открытой в браузере, можно, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт Edit as HTML. Изменения можно наблюдать в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям.
Что такое Console
Консоль позволяет смотреть вывод JavaScript, а также исполнять свой код для тестирования и отладки страницы. Если на открытой странице не подгрузились какие-либо данные, например стили, шрифты или картинки, здесь отобразятся соответствующие ошибки с подробным описанием. Также в консоль можно ввести команду на языке JavaScript, и она выполнится. Вкладка Console отображает все ошибки при загрузке страницы
Что такое Sources
Вкладка отображает загруженные файлы из всех источников, к которым обращался сайт. В большей степени она используется при отладке кода, позволяет увидеть все файлы и просмотреть их содержимое. Sources можно использовать в качестве полноценного редактора кода, получив доступ к локальным файлам через Workspaces
Что такое Network
На вкладке отображаются сетевые запросы, который делает сайт. Как правило, ее используют при оптимизации скорости загрузки страницы, а также для мониторинга выполняемых запросов. Запросы к данным представлены в виде таблицы. Сверху расположены инструменты: очистка таблицы, включение и отключение записи запросов и другие. Под таблицей можно увидеть количество запросов, общее время загрузки всех данных, время загрузки DOM и ресурсов, участвующих в отображении текущей страницы.
Что такое Perfomances
Вкладка отображает нагрузку, которую создает сайт на компьютер пользователя. На панели есть таймлайн использования сети, выполнения JavaScript и загрузки памяти. Также можно посмотреть время исполнения отдельных частей кода и выбрать конкретный период на шкале, чтобы увидеть, какие процессы происходили в этот интервал. Все это позволяет проанализировать каждое событие, которое происходило в момент загрузки или во время взаимодействия с пользователем.
Что такое Application
Панель, где можно быстро очистить хранилище и кэш
Что такое Security
Отвечает за надежность ресурса. Здесь можно получить информацию о данных протокола и сертификата безопасности, если они есть. Также, если источник небезопасный, узнать, какие именно запросы не защищены. Поэтому этот инструмент, как правило, используется для решения проблем со смешанным контентом и другими подобными задачами.
Что расскажешь про JavaScript
JavaScript - это логический язык программирования, который можно использовать для изменения содержимого веб-сайта и заставить его вести себя по-разному в ответ на действия пользователя.
