HTML, CSS, JavaScript в тестировании сайтов

Тестировщик, работающий с Интернет-приложениями, должен понимать, из чего они состоят. Давайте поговорим о HTML, CSS и JavaScript.

Тестировщик » QA-блог » Инструменты » HTML, CSS, JavaScript в тестировании сайтов

Обеспечение качества в сайтостроении

Создание и поддержка web-сайтов – одна из подотраслей IT. С помощью сайтов пользователи размещают информацию в сети, организуют Интернет-магазины, создают тематические порталы и т.д. Тестировщик, который занимается обеспечением качества (Quality Assurance, QA) сайтов, должен проверять их на наличие дефектов ПО.

Чтобы делать это в лучшем виде, надо понимать, что сайт представляет из себя по конструкции. Оказывается, в нем есть такие важные строительные элементы, как HTML, CSS, JavaScript. Обсудим их подробнее.

HTML определение

HTML (Hyper Text Markup Language, язык разметки гипертекста) — язык построения web-сайтов, с помощью которого указывается место каждого элемента на Интернет-странице и его параметры. Например, какой текст будет в заголовке, каким шрифтом его надо показать, какие картинки будут на странице и т.п.

Важно: HTML — это язык именно разметки, а не программирования. Но он очень важен для строения Интернет-сайта.

HTML – фундамент и кирпичики сайтостроения

Язык разметки гипертекста HTML составляет структуру сайта. Если мы хотим построить дом, то ему форму придают фундамент и стены. Если мы хотим простроить сайт, но его форма определяется HTML. Т.е. это своего рода фундамент и кирпичики web-страницы.

Каждый элемент сайта описывается одной или несколькими строками HTML-кода. Когда нашему браузеру (Chrome, Opera, Firefox, Safari, MS Edge и т.п.) надо вывести веб-страницу, он сначала заходит на сервер, где хранится содержание сайта. Браузер читает строки из HTML-описания страницы, какие там есть объекты, и строит их на экране. При необходимости браузер подгружает файлы (картинки, аудио, видео и т.п.) – это тоже элементы, и они тоже описаны с помощью ХТМЛ.

Пример HTML

Что такое HTML-код страницы, который хранится на сервере? Это набор строк, в каждой из которой обозначены тип объекта, его размер, особенности оформления и т.п. Выглядит это примерно так:

В каждой строке есть теги – операторы, обозначенные графическими символами <> и </>. Первый – открывающий тег (оператор начинает действовать), второй – закрывающий (оператор прекращает действие). Например, <title> показывает, что следующий за ним текст будет размещен в заголовке окна страницы. Тег <body> обозначает то, что будет показано внутри страницы. Тег <h1> – заголовок первого уровня в тексте, который появится на странице. Тег <h2> – заголовок второго уровня и т.д.

На изображение пример как выглядеть HTML код.

Как посмотреть HTML-код

Есть простой способ открыть и посмотреть HTML-код страницы в браузере. Для этого надо навестись мышкой на страницу и нажать ее правую клавишу. Поверх страницы появится меню. В нем надо нажать «Посмотреть исходный код».

На изображение пример как посмотреть HTML код.

Тогда на отдельной странице откроется HTML-код:

На изображение пример как посмотреть HTML sourcecode.

Что такое CSS

CSS (Cascading Style Sheets — каскадные таблиц стилей) – язык декорирования внешнего вида веб-страницы, которая была написана на HTML. Он может использоваться для указания цветов, шрифтов, стилей и других параметров внешнего вида страницы. 

CSS отличается от HTML тем, что обычно с помощью ХТМЛ задают логическую структуру веб-страниц, а CSS – их оформление. Если HTML – это фундамент и кирпичики здания, то CSS – это отделка: побелка, плитка, обои, и даже картины на стенах.

Смысл разделения CSS и HTML в том, что оно дает бОльшую гибкость в управлении сайтом и упрощает структуру кодинга страницы. CSS-код может располагаться как внутри HTML-документа, так и в отдельных файлах с расширением .css (это текстовый файл, в котором содержатся правила CSS с комментариями).

Что такое JavaScript

JavaScript (ДжаваСкрипт) — вот это как раз язык программирования, который работает с сайтами. Он их оживляет. Сайт только с CSS и HTML – это статическая картинка. Сайт с JavaScript – это уже динамический объект. С ним можно взаимодействовать: загружать картинки, выбирать пункты меню и т.д. 

В нашей аналогии со зданием: JavaScript – лифт, который доставит Вас на нужный этаж.

Как найти код JavaScript

  1. Навести мышку на страницу, нажать на правую кнопку. В возникшем меню выбрать «Посмотреть код элемента».
    На изображение пример как найти JavaScript код.
  2. В появившемся окне увидите знакомый HTML-код. Это называется «инструмент разработчика» (Dev tool), т.к. именно с этим работают программисты. Теперь в нем надо выбрать вкладку «Console» (Консоль).
    На изображение пример как найти JavaScript код - шаг 2.
  3. Появится вкладка как раз для кода JavaScript
    На изображение пример как найти JavaScript код - шаг 3.

На этой вкладке можно посмотреть:

  • Все имеющиеся ошибки;
  • Промежуточные результаты выполнения кода JavaScript;
  • Ответы на запросы JavaScript. 

Пример: если на этой вкладке ввести запрос:

const links = document.querySelectorAll('a')

links

То сразу после него выгрузится перечень всех ссылок на странице.

Использование HTML, CSS, JavaScript в тестировании

Применение инструмента разработчика позволяет тестировать сайт методом «серого ящика». С помощью ХТМЛ, CSS, JavaScript тестировщик может изучить, из-за чего возникает тот или иной дефект. Например:

  • Все ли теги в HTML в нужном месте;
  • Все ли открытые теги в HTML закрыты там, где они должны быть закрыты;
  • Все ли стили CSS соблюдаются;
  • Какие запросы приходят на страницу;
  • Какие данные, наоборот, уходят со страницы;
  • Какова скорость загрузки страницы;
  • Адаптивность сайта для разных разрешений.

Резюме

HTML, CSS, JavaScript – это языки для постройки сайта и его оживления. HTML формирует структуру, CSS упрощает оформление, JavaScript обеспечивает динамическое взаимодействие с пользователем. Тестировщик с помощью инструмента разработчика может исследовать коды этих языков для обнаружения дефектов.

на изображение автор Михаил Кулешов

Автор Михаил Кулешов

Михаил, профессиональный партнерский маркетолог, является основателем компании South Media OÜ, которая была создана в 2018 году и базируется в Таллинне. С 2016 года Михаил уехал из Финляндии и жил как настоящий «цифровой кочевник» в IT-индустрии, путешествуя по миру только с ноутбуком. Михаил работает и пишет статьи, связанные с IT-индустрией.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *