Что проверяет QA в UI кроме соответствия макету

1️⃣ Как кратко ответить

QA проверяет в UI не только соответствие макету, но и функциональность, юзабилити, кроссбраузерность, адаптивность, производительность, доступность и безопасность. Это включает в себя проверку интерактивных элементов, отзывчивости интерфейса, корректности отображения на разных устройствах и браузерах, а также соответствие стандартам доступности.

2️⃣ Подробное объяснение темы

В процессе тестирования пользовательского интерфейса (UI) QA-специалисты обращают внимание на множество аспектов, выходящих за рамки простого соответствия макету. Эти аспекты важны для обеспечения качественного пользовательского опыта и включают в себя:

1. Функциональность: Проверка того, что все элементы интерфейса работают согласно требованиям. Например, кнопки должны выполнять свои функции, формы должны корректно отправляться, а ссылки — вести на правильные страницы.

2. Юзабилити: Оценка удобства использования интерфейса. Это включает в себя проверку интуитивности навигации, логичности расположения элементов и простоты выполнения задач пользователем. Например, если пользователь не может легко найти кнопку "Отправить", это может указывать на проблемы с юзабилити.

3. Кроссбраузерность: Убедиться, что интерфейс корректно отображается и функционирует во всех поддерживаемых браузерах. Это важно, так как разные браузеры могут по-разному интерпретировать HTML, CSS и JavaScript. Например, анимации могут работать в Chrome, но не в Internet Explorer.

4. Адаптивность: Проверка корректного отображения интерфейса на различных устройствах и экранах. Это включает в себя тестирование на мобильных устройствах, планшетах и настольных компьютерах. Например, сайт должен корректно отображаться как на iPhone, так и на Android-устройствах.

5. Производительность: Оценка скорости загрузки и отклика интерфейса. Медленный интерфейс может негативно сказаться на пользовательском опыте. Например, если страница загружается более 3 секунд, это может привести к потере пользователей.

6. Доступность: Проверка соответствия стандартам доступности, таким как WCAG (Web Content Accessibility Guidelines). Это включает в себя обеспечение возможности использования интерфейса людьми с ограниченными возможностями. Например, все изображения должны иметь альтернативный текст, а интерфейс должен быть доступен для навигации с клавиатуры.

7. Безопасность: Проверка на наличие уязвимостей, таких как XSS (межсайтовый скриптинг) или CSRF (подделка межсайтовых запросов). Это важно для защиты данных пользователей и предотвращения атак.

Пример кода для проверки доступности с использованием автоматизированного инструмента:

const AxeBuilder = require('axe-webdriverjs');
const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
​
(async function example() {
  // Создаем экземпляр веб-драйвера для Chrome
  let driver = await new Builder().forBrowser('chrome').setChromeOptions(new chrome.Options()).build();
​
  try {
    // Переходим на тестируемую страницу
    await driver.get('http://example.com');
​
    // Запускаем проверку доступности с помощью axe-webdriverjs
    const results = await AxeBuilder(driver).analyze();
​
    // Выводим результаты проверки в консоль
    console.log(results.violations);
  } finally {
    // Закрываем браузер
    await driver.quit();
  }
})();

• AxeBuilder — это инструмент для автоматизированного тестирования доступности.
• Builder и chrome — используются для создания экземпляра веб-драйвера для браузера Chrome.
• driver.get('http://example.com') — открывает тестируемую страницу.
• AxeBuilder(driver).analyze() — выполняет анализ доступности страницы.
• console.log(results.violations) — выводит в консоль найденные нарушения доступности.
• driver.quit() — закрывает браузер после завершения тестирования.

Этот код демонстрирует, как можно автоматизировать проверку доступности интерфейса, что является важной частью тестирования UI.