Тестировщик не пишет код на HTML, CSS или JS — это работа разработчика. Но тестировщик должен уметь ЧИТАТЬ и узнавать эти форматы, когда встречает их в работе: в исходном коде страницы, в баг-репорте разработчика или в ответе сервера.
Чему научишься за этот урок:
— различать, за что отвечают HTML, CSS и JS на странице;
— узнавать формат JSON и находить в нём нужное поле по ключу;
— отличать JSON от XML и знать, где какой формат чаще встречается.
HTML, CSS, JS: три разные роли
HTML (HyperText Markup Language) — язык разметки, описывающий структуру страницы: какие элементы на ней есть — заголовки, кнопки, поля ввода. HTML отвечает на вопрос «что на странице есть».
CSS (Cascading Style Sheets) — язык описания внешнего вида: цвета, отступы, шрифты. CSS отвечает на вопрос «как это выглядит».
JS (JavaScript) — язык программирования, который добавляет странице поведение: реакцию на клики, проверки перед отправкой формы без обращения к серверу. JS отвечает на вопрос «что происходит при действиях пользователя».
JSON — основной формат данных в ответах API
JSON (JavaScript Object Notation) — текстовый формат данных из пар «ключ: значение», например: {"name": "Иван", "age": 25}. Это самый частый формат ответов современных API: сервер возвращает клиенту JSON, а клиент читает из него нужные значения.
Читать JSON просто: находишь нужный ключ (то, что слева от двоеточия), смотришь его значение (то, что справа). Значением может быть не только число или строка, но и вложенный объект — ещё один набор пар «ключ: значение» в фигурных скобках {} — или список (массив) в квадратных скобках [].
XML — формат постарше
XML — более старый текстовый формат данных с тегами, например: <name>Иван</name>. Он встречается реже, чем JSON, но иногда используется в легаси-системах (старых системах, которые давно не переписывали под современные форматы).
Пример: ответ сервера о курсе
На нашем полигоне запрос информации о курсе может вернуть примерно такой JSON-ответ: {"id": 45, "title": "Основы тестирования ПО", "price": 4990, "seats_available": 3, "promo_active": true}. Чтобы узнать, например, сколько осталось свободных мест, достаточно найти ключ seats_available и посмотреть его значение.
{
"id": 45, <- ключ "id", значение - число
"title": "Основы тестирования ПО", <- ключ "title", значение - строка
"seats_available": 3, <- ключ, значение - число
"promo_active": true <- ключ, значение - булево (да/нет)
}
Итог:
— HTML, CSS и JS — три разные роли на одной странице: структура, внешний вид, поведение;
— JSON — основной формат данных в ответах современных API, из пар «ключ: значение», с возможными вложенными объектами и списками;
— XML — более старый формат с тегами, встречается реже, в основном в легаси-системах;
— тестировщик должен уметь найти в JSON-ответе сервера нужное поле по ключу.
Контрольный вопрос. Что описывает HTML?
Подсказка: Это про то, ЧТО есть на странице, а не про то, как это выглядит или как реагирует на действия.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что описывает CSS?
Подсказка: Это про то, как элементы страницы ВЫГЛЯДЯТ, а не какие они есть и не как реагируют на клики.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Что добавляет странице JS (JavaScript)?
Подсказка: Это единственный из трёх, кто описывает реакцию на действия пользователя.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. В каком формате чаще всего приходят ответы современных API?
Подсказка: Это формат из пар «ключ: значение» в фигурных скобках, разобранный в уроке как основной.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Как в JSON обычно выглядит пара «ключ: значение» для имени?
Подсказка: Ищи вариант с двоеточием и кавычками, а не с тегами в угловых скобках.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Как обычно обозначается значение поля «имя» в XML?
Подсказка: Ищи вариант с открывающим и закрывающим тегом в угловых скобках, а не с двоеточием и кавычками.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Как называется более старый текстовый формат данных с тегами (например, Иван), который иногда встречается в легаси-системах? Ответь одним словом (аббревиатура).
Подсказка: Этот формат в уроке противопоставлен JSON как более старый вариант.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Какие из утверждений о работе с JSON верны (выбери все подходящие)?
Выберите все верные варианты.
Подсказка: Вспомни, как устроен пример из урока: ключ слева от двоеточия, значение справа, а вложенность оформляется скобками.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Контрольный вопрос. Дан такой JSON-ответ сервера о курсе: {«id»: 45, «title»: «Основы тестирования ПО», «price»: 4990, «seats_available»: 3, «promo_active»: true}. Сколько свободных мест осталось на курсе? Ответь одним числом.
Подсказка: Ищи ключ, который по названию явно означает «свободные места», и смотри его значение.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. В формате JSON данные хранятся парами: слева от двоеточия — имя поля, справа — его значение. Как одним словом называется левая часть такой пары?
Подсказка: Термин уже встречался в этом уроке при разборе структуры JSON-объекта.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. В JSON значение поля может быть числом, строкой или значением из ровно двух вариантов (true/false). Как одним словом называется этот третий тип значения?
Подсказка: Термин из общей теории типов данных, не специфичный только для JSON.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Задание. Раздел полигона со скидками возвращает вложенный список промокодов: «promocodes»: [{«code»: «START10», «discount»: 10}, {«code»: «AUTUMN20», «discount»: 20}]. Опиши в 2-3 предложениях, в каком порядке ты будешь искать скидку конкретного промокода AUTUMN20 внутри такого вложенного JSON — что ищешь сначала, а что потом.
Критерий приёмки: описан порядок — сначала найти в массиве promocodes объект, у которого значение ключа code равно AUTUMN20, затем взять значение ключа discount именно у этого найденного объекта. Общие фразы без упоминания того, что нужно сопоставить code с искомым значением, не засчитываются.
Подсказка: Список promocodes — это несколько отдельных объектов подряд; тебе нужен не первый попавшийся, а тот, где совпадает конкретное поле.
✅ Готово, если: ответ раскрывает то, что просит критерий приёмки в задании выше.
Онлайн-проверка ответа появится позже
Задание. Дан такой JSON-ответ сервера о курсе: {«id»: 45, «title»: «Основы тестирования ПО», «price»: 5000, «seats_available»: 3, «promo_active»: true, «promocodes»: [{«code»: «START10», «discount»: 10}, {«code»: «AUTUMN20», «discount»: 20}]}. Сколько рублей скидки даст промокод AUTUMN20 на этот курс? Ответь одним числом (в рублях).
Подсказка: Сначала найди в списке promocodes нужный процент скидки, затем посчитай эту долю от цены курса.
✅ Готово, если: ты ввёл(а) верный ответ, и онлайн-проверка его приняла.
Проверить ответ →
Реальная проверка — на нашей платформе, бесплатно и без регистрации. Открыть задачу и ввести ответ →
Что дальше
Мы научились читать HTML, CSS, JS и находить нужные поля в JSON-ответе сервера. Дальше — инструмент, который позволяет увидеть всё это своими глазами прямо в браузере: DevTools, панель разработчика, без которой не обходится ни один тестировщик.
