Тестирование Фронтенда Flashcards
Что можешь рассказать про HTML
HTML (HyperText Markup Language) — это стандартизированный язык разметки, используемый для создания и оформления страниц.Он определяет структуру и содержание веб-страницы с помощью так называемых тегов и атрибутов, позволяя встроить в текст страницы ссылки, изображения, видео, формы для ввода данных и другие элементы интерактивности.
Что такое Chrome DevTools
Это набор инструментов, встроенных в браузер Google Chrome, для создания и отладки сайтов. С их помощью можно просматривать исходный код сайта, отлаживать работу frontend: HTML, CSS и JavaScript. Также DevTools позволяет проверять сетевой трафик, быстродействие сайта и многое другое.
Какие вкладки есть в Chrome DevTools
- Elements
- Console
- Sources
- Network
- Performances
- Memory
- Application
- Security
- Lighthouse, но в основном смотрю
Elements - для проверки соответствия верстки макетам - Console - для фронтовых ошибок
- Network - для отслеживания запросов
- Application - для куки и локальных хранилищ
Что такое Elements
Здесь отображается весь HTML- и CSS-код открытой страницы. На данной вкладке можно просмотреть и внести исправления в файлы CSS и JavaScript.
Отредактировать HTML-элементы на странице, открытой в браузере, можно, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт Edit as HTML. Изменения можно наблюдать в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям.
Что такое Console
Консоль позволяет смотреть вывод JavaScript, а также исполнять свой код для тестирования и отладки страницы. Если на открытой странице не подгрузились какие-либо данные, например стили, шрифты или картинки, здесь отобразятся соответствующие ошибки с подробным описанием. Также в консоль можно ввести команду на языке JavaScript, и она выполнится. Вкладка Console отображает все ошибки при загрузке страницы
Что такое Sources
Вкладка отображает загруженные файлы из всех источников, к которым обращался сайт. В большей степени она используется при отладке кода, позволяет увидеть все файлы и просмотреть их содержимое. Sources можно использовать в качестве полноценного редактора кода, получив доступ к локальным файлам через Workspaces.
Что такое Network
На вкладке отображаются сетевые запросы, который делает сайт. Как правило, ее используют при оптимизации скорости загрузки страницы, а также для мониторинга выполняемых запросов. Запросы к данным представлены в виде таблицы. Сверху расположены инструменты: очистка таблицы, включение и отключение записи запросов и другие. Под таблицей можно увидеть количество запросов, общее время загрузки всех данных, время загрузки DOM и ресурсов, участвующих в отображении текущей страницы.
Что такое Perfomances
Вкладка отображает нагрузку, которую создает сайт на компьютер пользователя. На панели есть таймлайн использования сети, выполнения JavaScript и загрузки памяти. Также можно посмотреть время исполнения отдельных частей кода и выбрать конкретный период на шкале, чтобы увидеть, какие процессы происходили в этот интервал. Все это позволяет проанализировать каждое событие, которое происходило в момент загрузки или во время взаимодействия с пользователем.
Что такое Application
Панель, где можно быстро очистить хранилище и кэш
Что такое Security
Отвечает за надежность ресурса. Здесь можно получить информацию о данных протокола и сертификата безопасности, если они есть. Также, если источник небезопасный, узнать, какие именно запросы не защищены. Поэтому этот инструмент, как правило, используется для решения проблем со смешанным контентом и другими подобными задачами.
Что расскажешь про CSS
CSS . Этот язык разметки определяет, как HTML-элементы веб-сайта должны отображаться на интерфейсе страницы.
Что расскажешь про JavaScript
JavaScript - это логический язык программирования, который можно использовать для изменения содержимого веб-сайта и заставить его вести себя по-разному в ответ на действия пользователя.
Что такое кроссбраузерность и для чего это нужно тестировщику?
Кросс-браузерность - это способность веб-приложения или сайта корректно отображаться и функционировать во всех основных веб-браузерах. Это важно для тестировщиков по следующим причинам:
Обеспечение единообразного пользовательского опыта:
Кросс-браузерное тестирование гарантирует, что пользователи получают одинаковый опыт взаимодействия с веб-приложением независимо от используемого браузера.
Это важно для поддержания бренда и удовлетворенности пользователей.
