9 бесплатных инструментов для тестирования юзабилити сайта на русском

9 бесплатных инструментов для тестирования юзабилити сайта на русском

Что такое тестирование?

Я тестирую продукт.

Моя задача — пропустить как можно меньше приоритетных для пользователя багов.

Чем меньше багов пропущено, чем меньше недовольства клиентом выражено — тем выше я оцениваю эффективность своей работы.

Какие области я буду тестировать в этом случае? Естественно, я начну с самых приоритетных для пользователя. Даже если они стабильно и успешно работают, я всё равно буду проверять основные пользовательские сценарии, чтобы ни в коем случае не пропустить серьёзных проблем.

Что будет, если я столкнусь с трудностями? К примеру, со сложновоспроизводимым дефектом, или непониманием бизнес-процесса пользователя, или нехваткой требований? Если это важный функционал, то я буду выяснять «что не так», «как правильно».

Какие тесты я буду проводить в первую очередь? Конечно, самые-самые стандартные. Выполнение самого основного сценария в самых основных условиях, чтобы убедиться, что самый важный функционал работает. И только после этого я перейду к менее стандартным сценариям.

Юзабилити-тест: что именно тестировать

Хочется улучшить сайт, но непонятно с чего браться? Пара идей что проверять тестом юзабилити, чтобы сдвинуться с места:

Что такое поиск ошибок?


Я тестирую продукт.

Моя задача — завести как можно больше багов.

Оно и логично! Заводить баги тестировщику всегда приятно, это видимый измеримый результат работы, И чем их больше, тем больше меня ценят как тестировщика.

Какие области я буду тестировать в таком случае? В первую очередь, самые нестабильные. Зачастую они нестабильны потому, что менее приоритетны, но это неважно, значительно важнее количество багов.

Что будет, если я столкнусь со сложновоспроизводимым багом? ROI на его исследование считается в голове очень быстро. Зачем мне с ним возиться, если я за это же время смогу завести 3 менее критичных, зато простых в заведении?

Анализ продукта и документирование тестов


Кликая на кнопки, можно завести много багов — но нельзя сказать, что было проверено. Единственное решение — документирование тестов. Подробные тест-кейсы, удручающие тестировщиков и отнимающие уйму времени, бывают нужны очень редко. А вот

с перечнем «что нужно проверить» — необходимы.

Что они дают:

  • Вы анализируете продукт, выписываете основные фичи, действия, их параметры. Таким образом существенно снижается риск что-либо забыть.
  • Чек-листы — отличная напоминалка «здесь надо вникнуть глубже». Есть какая-то невнятная фича с недостаточным описанием. Как её тестировать? В тестировании без тестов проще всего сказать «я вернусь к этому позже», и уже никогда не вернуться. А с тестами — у вас будет висеть тест, в котором непонятно как и что проверять, вы будете такие тесты видеть и не забудете необходимость выяснения.
  • Чек-листы можно и НУЖНО согласовывать. С разработчиками, аналитиками. Вся команда включается в процесс тестирования, тестировщики узнают много нового о продукте, коллективный разум улучшает качество тестирования. И помимо однократного повышения качества отдельно взятого чек-листа, повышается качество тестирования в целом: тестировщики начинают больше учитывать в тестировании, развиваться, эти знания со временем окупаются в виде более результативного тестирования.

Залог успеха в ведении тестов — создание карты, по которой вы будете идти. Цель — покрыть весь продукт. Только пожалуйста, не надо отмазок об ужасной ресурсоёмкости — я покрывала проекты с миллионами строк кода меньше чем за месяц-полтора. И в процессе написания таких тестов поднимались неожиданные вопросы и всплывали критичные ошибки, которые несмотря на наличие горе-тестеров болтались в продукте годами.

Оценка тестирования

Чтобы не быть слепыми котятами, необходимо оценивать эффективность тестирования. Анализировать пропущенные ошибки и причины их пропуска. Покрытие функционала и кода тестами. Уровень удовлетворения пользователей, через анкеты и сбор обратной связи. Качество заведения ошибок, опрашивая разработчиков.

ВСЕГДА есть что улучшать, и отсутствие непрерывного процесса совершенствования — неизбежное болото.

Обсуждение целей тестирования с командой

Многие считают, что у тестирования есть какие-то мифические цели. И что они всегда одинаковы.

Как бы не так!

В каждом проекте, компании, команде цели свои собственные. Все ли их понимают одинаково? Проговаривали ли вы их вслух?

Чтобы приносить максимум пользы, надо хорошо понимать, в чём эта самая польза заключается. И не удивляйтесь, если мнение РМов и разработчиков не будет соответствовать вашему. Надо не переубеждать их, а подстраиваться под текущие проектные цели!

Понимание пользователей и их бизнес-процессов

Для меня загадка, как это возможно, но тем не менее это факт: зачастую тестировщики проверяют продукт, ничего не зная о пользователе.

  • Как этот продукт используется?
  • Зачем он вообще нужен, какие проблемы решает?
  • Какая средняя квалификация у пользователей?
  • В каких условиях работают пользователи? На каких окружениях, оборудовании?


Не надо догадок и додумок про «в среднем про отрасли»! Тестировщики должны ИДЕАЛЬНО знать СВОИХ пользователей. Часто им эту информацию не предоставляют аналитики. Одумайтесь! Не зная пользователя, тестировать продукт по-нормальному невозможно.

Техническая квалификация и понимание архитектуры

Для иллюстрации приведу баг, который на меня недавно завели в баг-трекере:

7 бесплатных сервисов для проверки сайтов (о которых вы могли и не знать)

Картинка для привлечения внимания

Мне достаточно часто приходится использовать различные онлайн-сервисы для проверки доступности сайтов и их поверхностных тестов и проверок.

Как показал краткий опрос коллег — почти у всех эти наборы сервисов отличаются. Я хочу показать вам свой, прошу в .

LoadImpact: http://loadimpact.com, сервис нагрузочного тестирования сайтов (за деньги — до 5к одновременных подключений) у которого есть бесплатный тест на 50 одновременных соединений. Если вы хоститесь у безжалостного и беспощадного отечественного хостера за $0,01/месяц и у вас всего тысяча сайтов на сервере — попробуйте проверить свой, с высокой вероятностью он даже 50 одновременных подключений не выдержит.

BrowserMob: http://browsermob.com, дополнительный простой, но симпатичный сервис, позволяющий проверить скорость загрузки целевого сайта из 4 разных мест и показывающий много подробных метрик загрузки для каждого из них. А основная задача BrowserMob — автоматическое кросс-браузерное тестирование сайтов.

Alertra: http://alertra.com, сервис мониторинга аптайма, на сайте которого можно бесплатно проверить доступность (и время ответа) сайта из 11 разных мест. Работает быстро и надежно, никаких капч и прочей дребедени.

site24x7: http://site24x7.com, похожий на Alertra сервис, который использует уже 23 географически распределеные точки проверки.

You get signal: http://www.yougetsignal.com, отличный сервис позволяющий проверить открытые порты на любом хосте/IP. Частенько помогает для проверки проброса портов через NAT-ы.

Теперь перейдем от проверок доступности к чуть более сложным вещам. Писать про w3c-шные продукты я не буду, надеюсь все и так их знают и используют.

CSE HTML Validator: http://www.onlinewebcheck.com альтернатива известнейшему validator.w3.org, построенная [судя по всему] на своем отдельном ядре анализа. Выгодно отличается очень подробными и понятными рекомендациями по исправлению ошибок и потенциальных проблем.

Built with: http://builtwith.com/ анализирует заданный сайт и выдает целое досье о нем: веб-сервер, CMS, какая служба статистики используется и так далее. Показателей очень много, для беглого анализа конкурентов вполне подходит. Также, интересно покопаться в trends.builtwith.com где владельцы сервиса выдают статистику по всем отслеживаемым параметрам. Например подавляющее большинство сайтов до сих пор использует старый блокирующий JS-код для Google Analytics.

А какие сервисы есть у вас в закладках?

Creevey

— это молодой, но интересный проект, который разрабатывает

. Проект находится в стадии активной разработки и его API может меняться.

Creevey использует Selenium, поэтому поддерживает практически все браузеры, в том числе и мобильные. Но, как следствие, для больших проектов придется поднять Selenium Grid. Кроме того, что Creevey делает скриншоты, он позволяет писать тесты прямо в Storybook рядом с историями.

Как работает. Добавим истории немного метаинформации для Creevey.

export const Simple^ CSFStory<JSX.Element> = () => <MyComponent />;
Simple.story = {
    parameters: {
        creevey: {
            captureElement: ‘#root’,
            tests: {
                async click() {
                    await this.browser.actions().click(this.captureElement).perform();

                    await this.expect(await this.takeScreenshot()).to.matchImage(‘clicked component’);
                ;
            },
        },
    },
},
}

Здесь можно писать сценарий тестирования, например, попросить браузер кликнуть какой-нибудь элемент и только после этого сделать скриншот.

Как это выглядит в реальной жизни? Запускаем Creevey (и Storybook заодно). Интерфейс (похожий на Storybook) позволяет выбрать компоненты для тестирования, браузеры и тест-кейсы. Нажимаем кнопку «СТАРТ»: Creevey быстро делает скриншоты всех выбранных тест-кейсов и показывает их в своем интерфейсе.

Creevey показывает изменения. Например, если мы поменяли текст истории, Creevey покажет слева компонент до, справа – после изменений, а посередине сами изменения. 

Как это работает.

Изменения удобнее изучать, чем в Loki.js. В Creevey есть несколько режимов просмотра: не только как в Loki.js, но и в SWAP-режиме, когда окна просмотра переключаются в слайдовый режим, когда есть шторка, которую можно двигать. 

E2e-тесты


E2E-тесты похожи на интеграционные, но они выполняются реальном браузере. Обычно в проектах фронтенд пишется отдельно от бэкенда, поэтому мы также продолжим эмулировать API.

Минус

: из-за использования реального браузера наши тесты стали медленнее, а иногда еще они случайно падают – такая реальность у браузерных тестов.

Loki.js

Принцип работы

очень прост — он делает скриншот каждой истории с помощью Puppeteer, а затем попиксельно сравнивает получившиеся скриншоты с эталонными.

Loki.js:

  • Быстрый, относительно своих функциональных аналогов.
  • Нативно интегрируется с Docker — вам будет легче настроить его в CI.
  • Необязательно поднимать отдельный веб-сервис Storybook. Loki.js умеет работать со Storybook, собранным в статику.

Интеграция

. Интегрировать скриншот-тесты Loki.js в проект можно за пару минут.

Открываем консоль и ставим Loki.js как зависимость:

npm i -D loki


Инициализируем:

npx loki init

Loki.js сам интегрируется в проект и сам все настроит для своей работы. 

После этого запускаем Storybook.

npm run storybook


Запустим Loki.js и посмотрим, как он делает скриншот-тесты. Открываем вторую консоль при открытом Storybook и пишем:

npx loki test

9 бесплатных инструментов для тестирования юзабилити сайта на русском

Loki.js с помощью puppeteer запустит Chrome в headless-режиме, пройдет по всем историям запущенного Storybook и сохранит скриншоты на файловую систему в папку .loki.

Сейчас ищут техподдержку:  Почему не оформляется заказ на Вайлдберриз

Работа с Loki.js. Попробуем что-то изменить в нашем компоненте, например, уберем Material UI кнопку и поставим нативную HTML-кнопку. Снова запустим.

npx loki test

9 бесплатных инструментов для тестирования юзабилити сайта на русском

Loki.js сообщает в консоль, что компонент изменился. Чтобы посмотреть изменения — заходим в папку .loki/difference, куда Loki.js сохраняет удобные для просмотра различия между эталонным скриншотом и текущим.

Loki.js отмечает розовым разницу между двумя скриншотами. Не идеально, но помогает увидеть отличия.

Минус Loki.js. Он работает только в Chrome. Мы его быстро настроили, он хорошо работает в Docker, делает скриншоты, но, к сожалению, только в Chrome. Поэтому если вам нужно поддерживать IE11, попробуйте Creevey.

Unit-тесты

 Чтобы покрыть наш сценарий юнит-тестами напишем пять тестов.

Изучение

Поскольку все пакеты были обновлены во время обновления .NET Framework, я начал с различий между рабочими и неработающими проектами. Первой подсказкой было то, что все 3 проекта использовали: MSTest.TestAdapter и MSTest.TestFramework.

Естественно, я пошел в -> Консоль вывода -> Выпадающее меню Тест в VS 2021 и посмотрел на результат. Ничего полезного там нет.

Первый шаг решения : обновите MSTest.TestAdapter и MSTest.TestFramework до версии 2.0.0.

Шаг второй решения : Теперь консоль вывода -> выпадающий список Test начал показывать один за другим отсутствующие пакеты и неправильные перенаправления привязки.

Шаг третий : добавьте недостающие пакеты вручную. Для меня это были

Инструменты во фронтенде

Давайте посмотрим, какие инструменты для тестирования есть во фронтенде. 

9 бесплатных инструментов для тестирования юзабилити сайта на русском
На картинке представлены не все инструменты: только популярные и те, у которых есть логотипы.

И столько же подходов к тестированию.

Вариантов, как тестировать фронтенд-проекты, много. Я расскажу о двух видах тестирования, которые применяю в своих проектах. Они дают много уверенности в работе кода, но при этом требуют минимальных усилий, с точки зрения написания, поддержки и запуска тестов. Это скриншот-тесты через Storybook и функциональные тесты компонентов.

Интеграционные тесты


Для сценария достаточно только одного

интеграционного теста

— нам не нужно больше тестировать модули в отдельности. При этом мы протестируем

реальное взаимодействие

между модулями, и будем уверены, что они умеют работать друг с другом.

Рефакторинг почти свободен. Если захотим как-то перекомпозировать наш код, например, по другому поделить ответственность в коде Store, это можно сделать не поменяв ни строчки теста.

Как перейти от поиска ошибок к тестированию?

Чтобы тестирование было эффективным и полезным в долгосрочной перспективе, необходимо следовать простым правилам и использовать ключевые

инструменты тестирования:

Как тестировать сайт автоматически с уведомлением при проваленном тесте?

Добрый день. Подскажите, пожалуйста, как организовать тестирование сайта, написанного на PHP (например на Битриксе)

Я один разрабатываю и поддерживаю несколько сайтов. На данный момент у меня есть тесты на SELENIUM IDE (дополнение для Firefox). Они проверяют наличие на некоторых страницах сайта (работающего сайта. Насколько я понимаю это называют на production) некоторых html тегов, значения их атрибутов, и.т.д. Но запускать эти тесты надо вручную.

Ещё я ставил на локальный компьютер Сodeception. Мне он нравится больше. Но не знаю – можно ли и хорошо ли держать на работающем сайте codeception? При том, что тестировать какие-то вещи, вносящие изменения в базу данных MySQL я не буду.

А хотелось бы, чтобы тесты где-то запускались с некоторой заданной периодичностью и скоростью, проверяли работающий сайт (production). И если какой-то тест провален – присылалось бы сообщение на email. Или каким-то другим образом было бы мне уведомление о проваленном тесте.

Как это можно организовать? Или где про это прочитать?

P.S. На всякий случай упомяну, что на локальном компьютере у меня используется HG. Делаю коммиты. И периодически – push на Bitbucket. Но на сайт я загружаю файлы просто по SFTP.

Не работает. текущие проблемы и неисправности

9 бесплатных инструментов для тестирования юзабилити сайта на русском

Попробуйте это, если test1.ru упал (но не на самом деле) или не открывается только у вас:

Шаг 1Очистить кэш нажав CTRL F5. Если это не помогло, перейдите к Шагу 2.
Шаг 2Попробуйте перезапустить ваш модем. Также, перезагрузите систему. Если проблема осталась, переходите к Шагу 3.
Шаг 3если проблема осталась; ваш антивирус может блокировать сайт. Отключите антивирусные программы (если такие есть) и отключите файервол.
Шаг 4если проблема до сих пор не решена, значит ваш DNS может быть неверным. DNS это инструмент, который переводит веб адрес (как например tekhpoddergka.ru) в машинный адрес, называемый IP (к примеру 50.116.7.135).

Чтобы убедиться, что это ошибка DNS, используйте этот IP (test1.ru) и поместить его в адресной строке браузера и нажмите ввод. Если нет вопрос загрузки test1.ru, это подтверждает DNS неисправен. Исправить это здесь!

Отрефакторенные тесты

Теперь тест занимает гораздо меньше места, при этом читается совершенно по-другому. 

const spy = apiMock.search({ title: "TITLE", description: "DESCRIPTION" });

render(<Search />);

pageObject.search("ТЕСТ");

await waitForRerender();

expect(spy).toHaveBeenCalledWith({ search: "ТЕСТ" });
expect(pageObject.getResult()).toEqual({
 title: "TITLE",
 description: "DESCRIPTION",
});


Если раньше тест читался очень

низкоуровнево

Пирамида тестирования

Если театр начинается с вешалки, то тестирование начинается с пирамиды тестирования.

Пирамида – это концепция, которая говорит, что в проекте есть 3 вида тестирования:

  • Unit, когда тестируется отдельная функция или модуль.
  • Интеграционное, когда тестируются несколько модулей вместе.
  • E2E, когда все приложение тестируется целиком, например, включая базу данных.

Примечание. В классической пирамиде тестирования Майка Кона эти уровни называются Unit, Service и UI. Но в современном варианте чаще упоминаются Unit, интеграционные и E2E.

Чем выше тесты на пирамиде, тем они ценнее — они дают больше уверенности в том, что приложение работает так, как ожидается. Но при этом их дороже писать и поддерживать. Чем ближе тесты к основанию пирамиды, тем быстрее эти тесты написать и тем быстрее они исполняются.

Пирамида тестирования говорит, что тесты на проекте должны быть в следующей пропорции: много Unit-тестов, меньше интеграционных, и совсем чуть-чуть E2E-тестов.

Пирамида фронтенд-тестирования

Для фронтенда

вывел отдельную пирамиду тестирования, которую назвал «

Трофей тестирования

Вместо пирамиды у нас есть трофей.

  • Основа трофея — это множество статических проверок: ESLint, Prettier, TypeScript.
  • К статическим проверкам мы пишем много интеграционных тестов.
  • Там, где мы не можем писать интеграционные тесты, допустимы Unit-тесты.
  • E2E тесты следует писать для критичных и важных сценариев.

Платные инструменты автоматизации

9 бесплатных инструментов для тестирования юзабилити сайта на русском

Кроме Loki.js и Creevey есть платные инструменты, например, Percy, Chromatic, Happo, которые поддерживают всё многообразие браузеров.

Платные инструменты просты в настройке и использовании. С Loki.js и Creevey нужно что-то делать в конфигах, уметь работать в консоли, желательно уметь настраивать Docker и Selenium Grid. Платные инструменты этого не требуют. Это просто Plug and Play – поставил и запустил.

В платных инструментах удобнее смотреть изменения. В Loki.js и Creevey мы много работаем в консоли — это может быть неудобно для не-разработчиков. Например, в Chromatic, это выглядит так.

Все видно наглядно

. В сервис может зайти дизайнер и посмотреть изменения в компонентах в своей ветке, а затем подтвердить или отклонить. После этого в CI-систему, например, в GitHub вам в pull request придет подтверждение. Это, конечно, намного удобнее, чем Loki.js и Creevey.

Доступны по цене. При этом у этих инструментов есть бесплатные тарифы для Open Source и достаточно дешевые платные тарифы, которые начинаются от 30$ в месяц.

Плюсы и минусы

Это полноценный тест на UI

. Он проверяет, что продукт работает: если ввести текст в input и нажать кнопку «Найти», то приложение сделает запрос в API и выведет результаты поиска в интерфейсе.

С этим тестом можно рефакторить почти всё. Например, перенести логику из Store в компонент (или обратно), или заменить Redux на MobX.

Мы написали тесты без UI.

9 бесплатных инструментов для тестирования юзабилити сайта на русском
Немного комичный, но правдивый факт.

Но с этим тестом всё не так гладко.

Сценарий простейший, а в тесте просто так не разобраться — он большой и непонятный. Неподготовленные разработчики обязательно запутаются в коде.

Мы покрыли только позитивный сценарий, а у нас есть и другие. Например, API может ответить ошибкой 400, 500 или 404. Для каждого случая должна быть своя реакция приложения.

Подход плохо масштабируется. Когда мы будем описывать ещё сценарии, нам скорее всего придется писать очень похожий код. А если писать много похожего кода — то его будет сложнее читать… Поэтому хорошая и очевидная мысль – вынести код, который точно будет повторяться в большинстве тестов

Повторяющийся код

Мы точно знаем, что в каждом тесте будем запрашивать сеть. Почему бы не вынести настройку мока запроса в отдельную функцию?

const searchSpy = jest.fn();
mock.onGet("/api/v1/search").replyOnce((request) => {
 searchSpy(request.params);
 return [200, { title: "TITLE", description: "DESCRIPTION" }];
});


Код с сетевым запросом мы вынесем в объект, который назовем ApiMock.

export const createApiMock = (mock: MockAdapter) => ({
 search(searchResult: SearchResult) {
   const spy = jest.fn();
   mock.onGet("/api/v1/search").replyOnce((request) => {
     spy(request.params);
     return [200, searchResult];
   });
   return spy;
 },
});

У этого объекта есть метод

search

, который настраивает axios-mock-adapter на поисковый запрос, используя аргумент метода как результат поиска.Также метод создаст для нас

spy

и вернет его.

Также мы знаем, что в каждом тесте будем вводить в input какой-то текст и нажимать на кнопку «Найти». Часть с заполнением input и кликом на кнопку вынесем в объект, который назовем pageObject.

export const pageObject = {
 search(searchString: string) {
   const inputEl = screen.getByPlaceholderText("Что ищешь?");
   fireEvent.change(inputEl, { target: { value: searchString } });
   const buttonEl = screen.getByText("Найти");
   fireEvent.click(buttonEl);
 },

 getResult() {
   const resultEl = screen.getByTestId("search-result");
   return {
     title: resultEl.querySelector("h3")!.textContent,
     description: resultEl.querySelector("div")!.textContent,
   };
 },
};

В нем сделаем метод

search

, который принимает только один аргумент – поисковую строку. Он сам найдет input, введет в него значение, найдет кнопку и кликнет на нее.

Бонусом добавим для pageObject ещё один метод, который позволяет получить из верстки результаты поиска.

Применим пирамиду тестирования


Посмотрим, как это работает — проверим пирамиду на небольшой функциональности, например, на простом поиске. У нас есть input для ввода пользовательского запроса и кнопка «Найти», которая отправляет запрос на бекенд.

Сейчас ищут техподдержку:  «Объединяй!» ВСЁ В ОДНОМ ТАРИФЕ — Москва

Для реализации подобного функционала поделим приложение на стандартные, для фронтенд-архитектуры, слои:

Пример функционального теста

Функциональный тест похож на интеграционный тест в классическом понимании — мы тестируем всю фичу целиком, но при этом не используем реальный браузер и реальные запросы.

Вместо jsdom, testing-library, axios-mock-adapter и jest можно взять любые другие инструменты. Выбор конкретных инструментов не важен — главное, чтобы вам и вашей команде было удобно с ними работать.

Настраиваем мок. Начнём тест с настройки сети.

const searchSpy = jest.fn();
mock.onGet("/api/v1/search").replyOnce((request) => {
 searchSpy(request.params);
 return [200, { title: "TITLE", description: "DESCRIPTION" }];
});

В первой строке кода создаем spy. Spy – функция, которая запоминает все свои вызовы. В этом spy мы будем сохранять запросы к API поиска. Во второй строке настраиваем axios-mock-adapter: говорим ему, что в рамках теста придет запрос на /api/v1/search, на который нужно ответить 200 кодом и определенными данными. При этом нужно сохранить параметры запроса в spy.

Рендерим компонент. После настройки сети мы отрендерим компонент через testing-library. Через него же заполняем input поисковым запросом и кликаем на кнопку «НАЙТИ». После этого ждем, когда все перерендерится.


render(<Search />);

const inputEl = screen.getByPlaceholderText("Что ищешь?");
fireEvent.change(inputEl, { target: { value: "ТЕСТ" } });
const buttonEl = screen.getByText("Найти");
fireEvent.click(buttonEl);

await waitForRerender();


Теперь проверим был ли вызван поиск с тем текстом, который мы вводили с помощью testing-library и отобразил ли компонент результаты поиска в DOM-дереве.

expect(searchSpy).toHaveBeenCalledWith({ search: "ТЕСТ" });
expect(screen.getByText("TITLE")).toBeInTheDocument();

Вот мы и написали функциональный тест. У него можно выделить следующие фазы:

  • Настраиваем окружение (API в нашем случае)
  • Рендерим компонент
  • Делаем какие-то действия в DOM
  • Ждём ререндера
  • Проверяем что окружение было вызвано так, как мы ожидали (в нашем случае проверяем вызов API).
  • Проверяем, что в DOM-дереве находится контент, который мы ожидали увидеть.
const searchSpy = jest.fn();
mock.onGet("/api/v1/search").replyOnce((request) => {
 searchSpy(request.params);
 return [200, { title: "TITLE", description: "DESCRIPTION" }];
});

render(<Search />);

const inputEl = screen.getByPlaceholderText("Что ищешь?");
fireEvent.change(inputEl, { target: { value: "ТЕСТ" } });
const buttonEl = screen.getByText("Найти");
fireEvent.click(buttonEl);

await waitForRerender();

expect(searchSpy).toHaveBeenCalledWith({ search: "ТЕСТ" });
expect(screen.getByText("TITLE")).toBeInTheDocument();

Результаты тестирования и поиска ошибок

В случае с поиском ошибок, в краткосрочной перспективе результаты выше: багов заводится больше и сразу.

Но в долгосрочной перспективе всё не так радужно:

  • из-за отсутствия глубоких знаний о продукте, постепенно начинает расти % пропущенных дефектов
  • команда разработки занята исправлением страшных-ужасных-немыслимых багов, полученных путём клика на одну и ту же кнопку 144 раза под IE в полнолуние
  • в релиз попадают некоторые ужасно неприятные и очевидные для пользователя баги
  • количество находимых ошибок в ДОЛГОСРОЧНОЙ перспективе падает

Симптомы

  1. 5 проектов модульного тестирования, все доступны в TestExplorer
  2. 2 из 5 выполнены правильно
  3. 3 заявив, что не запускается вообще
  4. Проблема началась после обновления .net framework

Скриншот-тесты через storybook

позволяет разрабатывать компоненты в изолированной песочнице и поставлять им разные входные данные.

Добавим Storybook в наш проект с компонентом поиска — напишем простую команду:

npx -p @storybook/cli sb init

Команда сама добавит Storybook в проект, сама настроит все конфиги и Storybook будет готов к запуску. Запускаем:

npm run storybook

Storybook дословно это «Книга историй». В рамках storybook мы пишем истории для всех наших компонентов. Истории – это обычные функции, которые возвращают верстку. 

Для нашего компонента поиска целесообразно описать три истории:

  • как компонент работает в начале — показывается кнопка input;
  • как компонент грузит данные — показывается loader;
  • как компонент показывает поисковые результаты.

9 бесплатных инструментов для тестирования юзабилити сайта на русском

Теперь, если запустить Storybook, увидим следующую картину.

Слева в интерфейсе Storybook находится навигация по историям, а справа то, как выглядят компоненты. Компоненты кликабельны и даже доступны для редактирования, если поставить соответствующие дополнения.

Истории в Storybook:

  • Можно писать на любом фреймворке. Storybook поддерживает практически все популярные фреймворки: Angular, React, Vue. Можно писать истории на чистом HTML и CSS.
  • Storybook гарантирует, что компоненты всегда запускаются в изолированной песочнице и не могут афектить друг на друга. 
  • В Storybook очень просто описать все возможные состояния компонента.

Если посмотреть на два последних пункта, то они выглядят как описание тестов: есть функция, она живет в изолированной песочнице и что-то возвращает (в нашем случае — верстку), и есть возможность описать разные вариации вызова функции. 

Получается что истории в Storybook — это идеальная основа для скриншот-тестов. Существует множество решений для автоматизации использования историй как скриншот-тестов (а также есть возможность написать свой велосипед, но не делайте так — это намного сложнее, чем кажется).

Сравнение

9 бесплатных инструментов для тестирования юзабилити сайта на русском

Если смотреть по зеленым ячейкам, то выглядит так, будто лучше всего писать интеграционные тесты, а Unit-тесты определенно хуже интеграционных тестов. Но пирамида тестирования требует писать очень много Unit-тестов. Неужели пирамида тестирования не работает?

Классическая пирамида тестирования работает, но не всегда. Её нужно правильно адаптировать к контексту. Также у пирамиды есть проблема с терминологией. Разные люди по-разному понимают термины Unit и E2E. Это часто приводит к холиварам в онлайн-чатах и в оффлайн обсуждениях: у кого-то тесты недостаточно E2E, или Unit’ы — не Unit’ы.

Тестирование веб приложений и сайтов – полное руководство

В этой статье мы рассмотрим тестирование веб приложений и сайтов. Она довольно длинная, поэтому усаживайтесь по удобнее.

  1. Тестирование функциональности;
  2. Тестирование удобства использования;
  3. Тестирование интерфейса;
  4. Тестирование совместимости;
  5. Тестирование производительности и скорости загрузки сайта;
  6. Тестирование безопасности.

Проверьте все ссылки, присутствующие на веб-странице, а также ссылки на базы данных, формы, используемые для подтверждения действий и получения информации от пользователей, файлы Cookie и т.д.

  • Проверьте ссылки, исходящие от всех страниц к конкретному домену.
  • Внутренние ссылки.
  • Ссылки на другие элементы, расположенные внутри страниц.
  • Ссылки для отправления электронной почты администратору или другим пользователям веб-страниц.
  • Проверьте, нет ли ссылок на изолированные страницы.

Формы используются для получения информации от пользователей и взаимодействия с ними.

Что нужно проверить в формах:

Рассмотрим пример проекта поисковой системы, над которым я сейчас работаю. В проекте есть этапы регистрации рекламодателей и партнеров. Каждый шаг регистрации отличается от других, но зависит от остальных этапов. Поэтому весь процесс регистрации должен проходить правильно.

Есть различные виды валидации, например, проверка электронной почты, финансовой информации пользователя и т.д. Все поля с валидацией нужно протестировать в ручном или автоматическом режиме.

Cookie — это небольшие файлы, хранящиеся на компьютере пользователя. Чаще всего они используются для поддержки сеансов с авторизацией. Проверьте приложение, выключая и включая cookies в опциях браузера.

Проверьте, шифруются ли Cookie перед записью на компьютере. Протестируйте сеансы регистрации и статистику пользователя, когда сеанс посещения сайта закончится. Проверьте, влияет ли на безопасность приложения удаление файлов cookie.

Если вы оптимизируете сайт для поисковых систем, то валидация HTML/CSS особенно важна. Первым делом проверьте сайт на наличие синтаксических ошибок в HTML-коде. Проверьте, доступен ли сайт для различных поисковых систем.

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

Проверьте, все ли запросы к базе данных выполняются правильно, данные извлекаются и обновляются должным образом.

При тестировании функциональности сайтов нужно проверить:

  1. Внутренние ссылки;
  2. Внешние ссылки;
  3. Ссылки на электронную почту;
  4. Битые ссылки.
  1. Валидация полей;
  2. Сообщения об ошибке при неверном вводе;
  3. Обязательные и необязательные к заполнению поля.

Следует проверить целостность базы данных.

Тестирование юзабилити — это анализ взаимодействия пользователя и сайта, поиск ошибок и их устранение.

При этом проверяется:

  • Легкость обучения;
  • Навигация;
  • Субъективная удовлетворенность пользователей;
  • Общий вид.

Под навигацией подразумеваются средства для просмотра страниц пользователем. Это кнопки, блоки. А также то, как посетитель сайта использует ссылки на другие страницы.

Проверка юзабилити:

  • Сайт должен быть простым в использовании;
  • Инструкции должны быть очень четкими;
  • Проверьте, достигают ли предоставленные инструкции поставленной цели;
  • Главное меню должно быть доступно на каждой странице;
  • Главное меню должно быть построено в логической последовательности.

Контент должен быть логичным и простым для понимания. Проверьте текст на наличие ошибок. Применение темных цветов раздражает пользователей, не нужно использовать их в теме оформления.

Для контента и фона страницы лучше применять общепринятые стандарты, чтобы цвет шрифта, рамок и т.д. не раздражал пользователей.

Контент должен быть содержательным, ссылки работать надлежащим образом, изображения соответствующего размера. Это основные стандарты, соблюдаемые при веб-разработке. Ваша задача — проверить все в рамках тестирования пользовательского интерфейса.

Варианты поиска, карта сайта, справочные материалы и т.д. Проверьте работу всех ссылок в карте сайта. Функция «Поиск по сайту» должна помогать легко находить нужный контент.

Нужно проверить, правильно ли осуществляется связь с сервером. Следует проверить совместимость сервера с используемым программным обеспечением, аппаратными средствами, сетью и базой данных.

Основные интерфейсы:

  • Интерфейсы веб-сервера и приложения.
  • Интерфейсы сервера базы данных и сервера приложения.

Если база данных или веб-сервер для какого-либо запроса, исходящего от сервера приложения, возвращает сообщение об ошибке, сервер приложения должен фиксировать его и отображать пользователю.

Проверьте, что происходит, когда пользователь прерывает какое-либо действие. А также, что происходит при повторном подключении к серверу в ходе выполнения какой-либо операции.

Нужно проверить:

  • Совместимость с браузерами;
  • Совместимость с операционными системами;
  • Просмотр на мобильных устройствах;
  • Параметры печати.

Работа некоторых веб-приложений зависит от типа браузера. Сайт должен быть совместим с различной конфигурацией и параметрами разнообразных браузеров.

Верстка сайта должна быть кроссбраузерной. При использовании Java-скриптов и AJAX, обеспечивающего функциональность пользовательского интерфейса, проверки безопасности или валидации создают большую нагрузку на систему.

Проверьте работу веб-приложения в браузерах Internet Explorer, Firefox, Netscape Navigator, AOL, Safari, Opera разных версий.

Некоторые функции веб-приложения могут быть несовместимы с определенными операционными системами. Не во всех из них поддерживаются новые технологии, используемые в веб-разработке. Поэтому проверьте работу приложения в Windows, Unix, MAC, Linux, Solaris и их различных версиях.

Сейчас ищут техподдержку:  Написать жалобу на Банк ВТБ 24 онлайн

Проведите тестирование сайта на мобильных устройствах и проверьте, как просматриваются веб-страницы с помощью мобильных браузеров. Проблемы с совместимостью также могут возникнуть из-за мобильных устройств. Также не стоит забывать о тестировании сайта на разных разрешениях.

Если вы предусматриваете возможность печати страницы, удостоверьтесь, что шрифты, выравнивание, графика и т. д. отображаются на бумаге должным образом. Страницы должны подходить под размеры, которые устанавливаются в опциях печати.

Тестирование производительности сайта или веб-приложения должно включать в себя:

  • Нагрузочное тестирование.
  • Стрессовое тестирование.

Проверьте производительность приложения на различной скорости интернета.

Нагрузочное тестирование сайта (веб-приложения) — это тестирование, при котором большое количество пользователей одновременно выполняют запрос к одной и той же странице. Выдерживает ли система пиковые нагрузки?

Стрессовое тестирование — нагрузка системы, выходящая за пределы установленных лимитов. Стрессовое тестирование выполняется с целью достичь сбоя в работе сайта или веб-приложения путем увеличения нагрузки. А также проверить, как система реагирует на стресс, и как она восстанавливается после сбоев. Стрессовой нагрузке подвергают поля для ввода информации, входа и регистрации.

ab тестирование функциональности также включает в себя проверку на ошибки, связанные с оперативной памяти.

Тест производительности можно применять для проверки масштабируемости сайта или оценки продуктивности при использовании стороннего программного обеспечения.

Сплит тестирование сайта при использовании различных вариантов интернет-соединения: через модем, ISDN и т.д.

  1. Количество пользователей, одновременно посещающих сайт;
  2. Проверьте работу системы при пиковых нагрузках;
  3. Пользователь осуществляет доступ к большому количеству данных.
  1. Непрерывная нагрузка;
  2. Производительность памяти, процессора, обработки файлов и т. д.

Ниже приведены некоторые наборы для тестирования веб-безопасности:

  • Проверка с помощью вставки внутреннего URL в адресную строку браузера без авторизации. Внутренние страницы при этом не должны открываться.
  • После авторизации с помощью логина и пароля, а также просмотра внутренних страниц попробуйте изменять URL. Например, вы проверяете какую-то статистику сайта под идентификатором ID= 123. Попробуйте изменить ID URL на другой ID сайта, который не имеет отношения к авторизованному пользователю. В любом случае доступ этого пользователя к просмотру других показателей должен быть запрещен.
  • Попробуйте ввести неверные данные в поля формы для авторизации. Выясните, как система реагирует на ввод недопустимых данных.
  • Каталоги или файлы не должны быть доступны напрямую, если для них не предусмотрена возможность скачивания.
  • Проверьте работу капчи для защиты от автоматического входа с помощью программного кода.
  • Проверьте, используется ли в целях безопасности SSL. Если да, то должно отображаться сообщение при переходе пользователя с незащищенных HTTP-страниц к защищенным и наоборот.
  • Все операции, сообщения об ошибках, нарушения безопасности должны записываться в файл журнала на веб-сервере.

Основной причиной тестирования безопасности сайта является поиск потенциальных уязвимостей и их последующее устранение.

  • Сетевое сканирование;
  • Сканирование уязвимостей;
  • Возможность потенциального взлома паролей;
  • Обзор журнала;
  • Средства для проверки целостности;
  • Обнаружение вирусов.

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

Есть множество типов серверов и браузеров различных версий. Между ними есть небольшие, но значимые различия.

Дополнительные факторы, которые следует учесть при тестировании сайта:

  • Какова ожидаемая нагрузка на сервер (например, количество запросов за единицу времени)?
  • Какая производительность требуется при различных видах нагрузки (время ответа веб-сервера, время отклика базы данных на запрос)?
  • Какие инструменты потребуются для тестирования производительности?
  • Кто является целевой аудиторией? Какие браузеры будут использовать пользователи? Какова скорость подключения? Предназначен ли сайт для использования внутри организации или будет доступен в интернете для широкого круга пользователей?
  • Какую производительность ожидает получить клиент (насколько быстро должны загружаться страницы, как должны себя вести анимации, апплеты, нагрузка и запуск)?
  • Будут ли разрешены простои сервера и техническое обслуживание, а также обновление контента? Если да, в каком количестве?
  • Какие средства безопасности требуются (файерволы, шифрование, пароли и т.д.), и какую работу они будут выполнять? Как их можно проверять?
  • Насколько надежным должно быть интернет-соединение? Как оно будет влиять на резервное копирование системы?
  • Как будет выполняться управление обновлением контента сайта?
  • Требования для технического обслуживания, отслеживания и контроля содержимого веб-страниц, графических элементов, ссылок и т.д.
  • Какая спецификация HTML будет соблюдаться? Насколько точно?
  • Как будут проверяться и обновляться внутренние и внешние ссылки? Насколько часто?
  • Как будет происходить управление и проверка CGI апплетов, сценариев JavaScript, компонентов ActiveX и т.д.?
  • Максимальный размер веб-страницы не должен превышать 3-5 экранов, кроме случаев, когда контент сосредоточен на одной теме. Если размер веб-страницы больше, предоставьте внутренние ссылки для навигации по ней.
  • Разметка веб-страницы и элементы дизайна должны быть последовательными и логично связанными.
  • Отображение веб-страниц должно быть независимо от типа браузера.
  • На каждой странице следует указать ссылку для связи.

Данная публикация является переводом статьи «Web Testing Complete Guide (Web Application Testing Tips and Scenarios)» , подготовленная редакцией проекта.

Универсальная формула тестирования

Польза тестов прямо пропорциональна уверенности в работе кода после запуска тестов и обратно пропорциональна сумме стоимости написания, запуска и поддержки тестов.

9 бесплатных инструментов для тестирования юзабилити сайта на русском
Универсальная формула тестирования.

Но у этой формулы есть одна большая проблема — субъективность. 

  • Стоимость написания, запуска и поддержка тестов зависят от компетенций разработчиков в проекте и от технологического стека проекта
  • Уверенность в работе кода, покрытого тестами у всех разная. Одному разработчику достаточно написать тесты, покрывающие основные сценарии, в то время как другой разработчик не успокоится пока не напишет пару десятков тестов, покрывающих все ситуации.

Искусство написания тестов заключается в том, чтобы правильно скомбинировать разные виды тестирования для нанесения максимальной пользы проекту.

Звучит слишком по-философски. Давайте разберемся, как это применять.

Функциональные тесты

Скриншот-тесты хорошо работают. Но они покрывают только статичные сценарии. А нам интересно протестировать весь сценарий, когда пользователь зашел, ввёл текст, кликнул на кнопки «НАЙТИ», подождал и получил результаты. Скриншот-тесты так не могут. Для этого, вместе со скриншот-тестами, нужно писать функциональные тесты.

Элементы, обманывающие ожидания

Пользователь может распознавать дизайн не так, как задумал веб-дизайнер, отсюда ожидания, которые не реализуются.

К примеру, пользователям может казаться, что текст, блок или картинка выделены как кликабельные элементы. Если много людей пытается нажать на элемент, а он некликабельный и никуда не ведет, это нужно исправить:

  • повесить на элемент ссылку на что-то полезное, что логично было бы ожидать по клику;

  • переработать оформление, чтобы элемент не выглядел активным;

  • вовсе его убрать, если он не несет практической ценности.

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

  • добавить надпись, которая бы давала понять, что ссылка здесь;

  • сделать ссылку явной, вынести ее за рамки элемента;

  • добавить элементу реакцию — увеличение или подсветку при наведении.

Если у вас не кликабельное изображение, а нажатий много, возможно, пользователи хотят кликами приблизить картинку, чтобы лучше рассмотреть. Тогда нужно сделать ее крупнее или задать увеличение по клику.

Этапы, где теряются конверсии

Если вы видите, что на каком-то этапе воронки отваливается необычно большая часть пользователей, скорее всего с этим этапом проблема. Одна из возможных причин — сайтом неудобно или непонятно пользоваться.

Рассмотрим реальный кейс теста юзабилити компании Imaginary Landscape. Из Google Analytics видно, что пользователи заходят на страницу с формой обратной связи, но заявку на звонок не отправляют. Видимо, что-то не так с самой заявкой.

Компания выдвинула гипотезы о причинах и сделала несколько вариантов формы. После юзабилити тестирования стало понятно, что дело в количестве строк: люди не хотят вводить так много данных. Форму поменяли, количество строк сократили c 11 до 4, после чего конверсия выросла на 140%.

Кейс: поменяли форму заявки
Было — стало

Как в итоге тестировать

  • Пирамида тестирования работает, но не во фронтенде. У фронтенда своя пирамида, в которой требуется больше интеграционных тестов.
  • Заводите Storybook — он ускоряет разработку.
  • Скриншотные тесты очень легко внедрить, но при этом они хорошо работают.
  • Одних скриншот-тестов не хватит, нужны еще функциональные тесты.
  • Frontend инфраструктура позволяет с легкостью мокать окружение (браузер, сеть и тд). Используйте это. Но старайтесь не мокать внутреннюю имплементацию своего кода.
  • Для тестов поведения отлично подходит связка testing-library, инструмент для мока сетевых запросов и паттерн pageObject.

9 бесплатных инструментов для тестирования юзабилити сайта на русскомСсылка на твит

Выводы


Очень многие разработчики не любят тестировщиков. И правильно делают!

Зато хороших тестировщиков любят и ценят все. Но тестировщиков, а не кликеров и багозаводильцев!

Учитесь узнавать, что не так, что не нравится другим участникам команды разработки. Обязательно исследуйте пропущенные ошибки и делайте всё для того, чтобы больше их не пропускать. Не гонитесь за заведением багов — вашей мантрой должны быть «счастье пользователя», «качественный продукт» и «успешный проект», а не «завести как можно больше багов» — ОЧЕНЬ часто эти 2 цели оказываются слишком далеки друг от друга.

И да пребудет с вами сила!

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Оставьте комментарий

Adblock
detector