Тестирование UI (/ux)

Сперва поговорим о UI и UX

Какие же критерии у UX
эффективность (efficiency)
правильность (accuracy)
активизация в памяти (recall)
эмоциональная реакция (emotional response)

Теперь поговорим о GUI

Сначала были консоли

GUI сейчас

WebGui

Функциональные тесты
Настраиваем окружение
Рендерим компонент
Делаем какие-то действия в DOM
Ждём ререндера
Проверяем что окружение было вызвано так, как мы ожидали (в нашем случае проверяем вызов API).
Проверяем, что в DOM-дереве находится контент, который мы ожидали увидеть.

Функциональное или не функциональное??

Основные точки внимания
Элементы страницы расположены как на макете на всех устройствах.
Сайт одинаково выглядит и работает во всех нужных браузерах.
Кнопки нажимаются и после этого что-то происходит, слайдеры крутятся, гамбургеры раскрываются. (эта часть прежде всего мануальна но можно и автоматизировать)
Все JavaScript-скрипты работают корректно. (ну тут на самом деле работа за unit tests)
Отображается правильный контент. (очень легко сформулировать но сложно проверить)
Отдаются нужные заголовки. (да это тоже желательно проверить если есть документация)
Фавиконка установлена. (ага иногда об этом забывается)
Текст отображается не кракозябрами (в 2020 такое редко, но бывает).
Курсор интерактивный на интерактивных элементах и обычный на обычных. (опять же смотрим по ТЗ)
С локализацией всё в порядке (русская, английская версия).
Страница не разъезжается, если включить блокировщик рекламы. (опционально)
И отдельно для Веб-форм
Обязательные поля подписаны.
Если данные должны быть записаны в базу, проверяем это.
Выводятся понятные сообщения об ошибках заполнения.
Проверяем экранирование символов в формах на уровне клиента и сервера.
Приходят подтверждающие письма (если так задумано).

Небольшой чек-лист
Типы данных. Убедитесь, что для определенных типов данных, таких как валюта и даты, можно вводить только допустимые значения.
Ширина поля. Если определенное текстовое поле предназначено для определенного количества символов, укажите в пользовательском интерфейсе, что введенные данные не должны превышать границу по количеству символов. (Например, поле, которое позволяет использовать 50 символов в базе данных приложения, не должно позволять пользователям вводить более 50 символов в интерфейсе).
Элементы навигации. Убедитесь, что все кнопки навигации на странице работают и перенаправляют пользователей на нужную страницу или экран.
Индикаторы прогресса. Иногда приложению нужно время, чтобы выполнить порученную работу, в таких случаях используйте индикатор прогресса, он поможет понять, что работа все еще выполняется.
Подсказки ввода. В выпадающем меню с сотнями элементов при вводе первой буквы должны остаться только те элементы, которые начинаются с этой буквы, так вы убережете пользователей от просмотра длинной портянки значений.
Скролл таблиц. Когда данные из таблицы перетекают на следующую страницу, функция прокрутки должна позволять пользователям прокручивать данные, но не трогать все заголовки.
Ведение журнала ошибок. Когда в системе возникает фатальная ошибка, убедитесь, что приложение записывает сведения об ошибке в специальный файл журнала для последующего просмотра.
Пункты меню и режим. Убедитесь, что приложение отображает только те пункты меню, которые доступны в определенном режиме.
Комбинации клавиш. Проверьте комбинации клавиш, правильно ли они работают, независимо от браузера, платформы или устройства.
Кнопки подтверждения действий. Убедитесь, что пользовательский интерфейс имеет работающую кнопку подтверждения каждый раз, когда пользователь хочет сохранить или удалить элемент.

Так ну теперь к инструментам

Начнем с классики

Скриншот тесты

Еще вариантик

Ну и наконец тестирование UI с помощью кода

Немного о селекторах
XPath-путь /html/body/*/span[@class] будет соответствовать в нём двум элементам исходного документа :
первый блок в третьем слое
и
второй блок в третьем слое
.

Puppeeteer
const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone 6'];
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
//выбираем тип устройства с которым хотим взаимодействовать
//await page.emulate(iPhone);
await page.setViewport({width: 1366, height: 768});
await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36');
//заходим на нужную страницу
await page.goto('http://localhost:3000/');
await page.waitForSelector("#root > div > div.component-search-input > div > input"); //ждем когда загрузится элемент
//сымитируем воод клавиатурой
await page.focus("#root > div > div.component-search-input > div > input")
await page.keyboard.type('Smile')
//делаем скриншот
await page.screenshot({ path: 'example3.png' });
await browser.close();
})();

cypress.IO

Selenium