Сайты с ошибками для тестировщиков

Спасибо! Наш менеджер свяжется
с Вами в ближайшее время.

Сайты с багами для тестирования

Как и создание ТЗ, и прототипирование, тестирование сайта является одним из важных этапов разработки. Тестирование и отлов ошибок предшествуют запуску проекта и выполняются после всех остальных этапов, ведь досконально проверять имеет смысл только уже готовый продукт. Но иногда бывает уместным протестировать отдельный этап, например, после верстки дизайна нужно посомтреть, как выглядят страницы на разных браузерах и устройствах. Обо все по порядку.

Блок: 1/5 | Кол-во символов: 465
Источник: https://www.seostop.ru/blog/sozdanie-saita/testirovanie.html

Тестирование документации

Мы должны начать с подготовительного этапа, анализируя документацию. Тестер изучает полученную документацию (анализирует определенную функциональность сайта, готовит план дальнейшего тестирования).

На этом этапе анализируются основные артефакты, связанные с тестированием веб-сайта:

• Требования
• План тестирования
• Тест кейсы
• Матрица соответствий

Блок: 2/12 | Кол-во символов: 370
Источник: https://geteasyqa.com/ru/qa/test-website/

1. Инструменты Яндекс Метрики

В рунете из бесплатных инструментов юзабилити-тестирования пока не придумали ничего удобнее и функциональнее счетчиков Яндекс Метрики. Чего стоит один «Вебвизор».

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

Чтобы установить «Вебвизор», авторизуйтесь на Яндекс Метрике и перейдите на вкладку «Добавить счетчик». В «Настройках» скопируйте код счетчика и вставьте на все страницы сайта.

Вот так выглядит отчет «Вебвизора». А настоящая магия — просмотр действий пользователя — начнется при нажатии на значок воспроизведения.

«Вебвизор» не единственный полезный инструмент Яндекса, который поможет отследить реакцию пользователей на ваш сайт.

Тепловая карта кликов наглядно покажет самые кликабельные места на странице. Например, по карте кликов Яндекса видим, что кнопку «Получить счетчик» нажимают, а вот новости (колонка справа) особой популярностью не пользуются. Чем горячее цвет в точке, тем чаще на нее кликают пользователи.

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

Блок: 2/7 | Кол-во символов: 1645
Источник: https://pr-cy.ru/news/p/6133

Простое тестирование

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

Итак, в случае стандартного проекта всё тестирование сводится к сверке функционала и внешнего вида получившегося сайта с тем, что требовало ТЗ. Ссылки, формы, другие интерактивные элементы проверяются на работоспособность, а дальше — всё по заданию. Было заявлено, что ресурс должен корректно отображаться и на смартфонах и на ПК — адаптивность сайта проверяется, в ТЗ указана непременная совместимость сайта с Internet Explorer 9 — это тоже проверяется.

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

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

Блок: 3/5 | Кол-во символов: 1128
Источник: https://www.seostop.ru/blog/sozdanie-saita/testirovanie.html

Что проверять

Проверка работы сайта будет считаться успешной, когда будет проведено тестирование:

• всех ссылок сайта;
• форм на всех страницах;
• cookies;
• HTML/CSS валидации.

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

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

Блок: 3/11 | Кол-во символов: 859
Источник: https://richhost.biz/kak-protestirovat-rabotu-sajta.html

2. Тестирование форм

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

• Понятно ли простому пользователю, что нужно делать для правильного заполнения формы? Точно ли описаны этапы ее заполнения и требования к итоговому варианту?
• С какими трудностями можно столкнуться при заполнении? Что может быть непонятно или истолковано двояко?
• Как улучшить форму, как сделать ее более понятной и простой?
• Принимается ли форма по указанному адресу после отправки?

Блок: 4/30 | Кол-во символов: 651
Источник: https://www.kasper.by/blog/testirovanie-saita/

Онлайн-сервис предлагает 5 простых тестов:

• Five Second Test — тест пяти секунд. Принцип таков: вы загружаете скриншот тестируемой страницы на сайт, участники теста смотрят на нее в течение 5 секунд, после чего дают свою оценку. Можно задавать разные вопросы, например, какой элемент больше всего привлек внимание, что запомнилось, о чем сайт и тому подобное. По завершении вы получите ответы участников теста в полном объеме + автоматически сгенерированное облако часто повторяющихся слов.

1.Загружаем скриншот страницы

2. Задаем участникам вопросы

3. Получаем отчет с ответами

4. Для наглядности изучаем облако

• Click Test — тест кликов. Действия те же, только вместо ответов получаем тепловую карту кликов. По ней мы увидим, что пользователи, к примеру, не жмут на стратегически важную (для нас) кнопку, зато активно кликают картинку. Дополнительно сервис предоставит отчет о количестве кликов и среднем времени щелчка.

• Question Test — тест вопросов. Вы спрашиваете о своем сайте — реальные люди отвечают.

• Navigation Test — анализ навигации. Позволяет понять, насколько удобно пользователям «лазить» по вашему сайту, понятна ли его архитектура и навигация.

• Preference Test — предпочтение. Поможет провести А/В тестирование дизайна сайта, приложения, листовки. Загружаете два варианта дизайна — пользователи выбирают, какой им больше нравится. Все просто и оперативно.

Тепловая карта кликов

UsabilityHub — англоязычный сервис, но среди предлагаемых языков тестирования есть русский. В платной версии вы выбираете количество участников и вскоре получаете результаты. В бесплатном варианте придется самому поучаствовать в тестированиях, поотвечать на вопросы и пооценивать дизайны. Наберете необходимое количество баллов за участие — получите возможность провести свой тест.

Блок: 4/7 | Кол-во символов: 1798
Источник: https://pr-cy.ru/news/p/6133

Тестирование UI (интерфейса пользователя)

Тестирование интерфейса пользователя (UI) выполняется для проверки соответствия графического пользовательского интерфейса вашего сайта спецификациям.

Вот некоторые проверки для тестирования интерфейса веб-сайта:

• Соответствие стандартам графических интерфейсов
• Оценка элементов дизайна: макет, цвета, шрифты, размеры шрифтов, ярлыки, текстовые поля, форматирование текста, титры, кнопки, списки, значки, ссылки
• Тестирование с различными разрешениями экрана
• Тестирование локализированных версий: точность перевода, проверка длины имен элементов интерфейса и т. п.
• Тестирование графического интерфейса пользователя на целевых устройствах: смартфоны и планшеты.

Полезные инструменты для UI тестирования: FitNesse, iMacros, Coded UI, Jubula, LoadUI.

Блок: 5/12 | Кол-во символов: 788
Источник: https://geteasyqa.com/ru/qa/test-website/

3. Usabilla

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

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

Блок: 5/7 | Кол-во символов: 505
Источник: https://pr-cy.ru/news/p/6133

Тестирование функционала

Как протестировать ссылки:

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

Как протестировать формы:

• действительность заполнения;
• допустимые символы для заполнения;
• недопустимые символы в определенных полях;
• параметры в формах с редакторами и функционалом (если есть).

Как протестировать cookies:

• проверка ресурса с отключенными, а затем с включенными coolies;
• проверка на шифровку;
• проверка безопасности при удалении cookies;
• проверка на активность cookies в нужный промежуток времени.

Как протестировать валидацию html/css:

• проверка на отсутствие ошибок;
• доступность для поисковых машин;
• точность карты сайта.

Блок: 8/11 | Кол-во символов: 770
Источник: https://richhost.biz/kak-protestirovat-rabotu-sajta.html

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

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

Блок: 6/9 | Кол-во символов: 534
Источник: https://wiont.ru/blog/osobennosti-testirovaniya-web-sajtov.html

4. Optimal Workshop

На сервисе доступны такие инструменты:

• Treejack — тестирование «дерева» сайта. Помогает понять, как пользователи ориентируются на вашем сайте, выполняют ли те действия, которые вы от них ждете, или теряются в его дебрях. Для тестирования нужно расписать информационную архитектуру своего сайта в форму Treejack. Звучит страшно, но каждая строка формы подписана, если знаете английский — легко справитесь. Также нужно поставить задачи участникам тестирования, к примеру, найти мобильный телефон на сайте. На выходе получите исчерпывающую статистику в виде таблиц и диаграмм. Бесплатная демо-версия позволяет опросить 10 человек.

• OptimalSort — тестирование по методу сортировки карточек. Помогает выяснить, как пользователь думает, какие принимает решения и как ему проще достичь конечной цели на вашем сайте. Как это работает: все элементы контента сайта «выписывается» в отдельные карточки, а участникам предлагается отсортировать их так, как им было бы понятно и удобно. В результате вы получаете отчеты в виде таблиц, матриц, дендрограмм и понимание ментальной модели ваших пользователей. В бесплатной версии можно протестировать 30 карточек, опросив 10 человек.

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

Результаты тестирования макета сайта с помощью Chalkmark

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

Блок: 6/7 | Кол-во символов: 1607
Источник: https://pr-cy.ru/news/p/6133

Тестирование совместимости

1366×768, 1920×1080, 1600×900 — наверно, вы знаете, что означают все эти комбинации цифр. Правильно, разрешение мониторов или экранов, на которые мы ежедневно смотрим. Так вот здесь можно увидеть «картинку», сколько процентов пользователей имеют устройство с тем или иным количеством пикселей. Посмотрите сколько много разных форматов. Как же веб-сайт смотрится на каждом из них? На этот вопрос и об уровне кроссбраузерности ответит тестирование совместимости со следующими видами работ:

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

Блок: 8/9 | Кол-во символов: 727
Источник: https://wiont.ru/blog/osobennosti-testirovaniya-web-sajtov.html

5. Feng-GUI

В отличие от предыдущей тройки инструментов, этот не дает обратную связь от живых людей. Приложение на основе своих алгоритмов само генерирует карту внимания пользователя. То есть показывает, куда он посмотрит сразу после загрузки страницы и в какой последовательности (по мнению программы) его взгляд будет перемещаться с одного элемента на другой. Для тестирования вводим url нужной страницы сайта, жмем Analyze, через несколько секунд получаем заветную карту взгляда пользователя.

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

Не хотите разбираться в интерфейсах и статистиках англоязычных ресурсов? Идите в народ. К примеру, для оценки дизайна страницы разместите скриншот на revision.ru или подобных площадках, поинтересуйтесь мнением «местных» — web-дизайнеров, разработчиков и других специалистов. Проведите опросы в соцсетях, например, в тематических сообществах, или соберите фокус-группу среди своих знакомых. Для более или менее объективного анализа юзабилити достаточно опросить 5 респондентов (по некоторым данным из своей целевой аудитории.

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

Подготовила Ольга Мороз

Блок: 7/7 | Кол-во символов: 1611
Источник: https://pr-cy.ru/news/p/6133

6. Адаптация сайта для просмотра на мобильных устройствах

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

Блок: 8/30 | Кол-во символов: 392
Источник: https://www.kasper.by/blog/testirovanie-saita/

Тестирование, связанное с изменениями

Тестирование, связанное с изменениями, имеет две основные цели:

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

Selenium, HP Quick Test Professional,  TestComplete, TestDrive, SoapUI часто используются для тестирования, связанного с изменениями.

Блок: 9/12 | Кол-во символов: 721
Источник: https://geteasyqa.com/ru/qa/test-website/

Заключение

На сайте всегда найдется, что проверить — это факт! К примеру: поиск ошибок в контенте и проверка его на уникальность, тестирование скорости загрузки сайта, юзабилити, соответствие мета-тэгов и Title хорошему тону интернет-продвижения и так далее.

Чтобы провести некоторые виды тестирования нужно обладать компетентностью в технических вопросах и интернет-маркетинге. Однако часть работ вы можете сделать сами – достаточно потратить немного времени на изучение.

Буду рад вашим комментам и отзывам.

Интернет-маркетинг Как открыть магазин одежды с нуля? Инструкция по созданию интернет-магазина с офлайн точкой продаж!

Трансформация «живой» торговли в интернет пространство сегодня достигла колоссальных масштабов. Значительное число владельцев собственного бизнеса товаров стремятся расширить свой коммерческий проект, открывая параллельно…

Блог Как открыть прибыльный интернет-магазин с нуля: подробнейшая пошаговая инструкция

Вперед к финансовой независимости: создаем эффективный eCommerce проект Интернет-магазин, приносящий прибыль это большая и кропотливая работа. Сегодня мы хотим поделиться нашим многолетним опытом…

Блог 24 интересных и выгодных дропшиппинг-поставщиков

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

Блок: 9/9 | Кол-во символов: 1817
Источник: https://wiont.ru/blog/osobennosti-testirovaniya-web-sajtov.html

Тестирование мобильной версии сайта

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

Вот несколько советов для того, чтобы сделать ээфективным тестирование сайта на мобильных устройствах:

• Проверьте совместимость со смартфонами и планшетами
• Убедитесь, что навигация по сайту максимально проста
• Оптимизируйте время загрузки вашего сайта
• Убедитесь, что кнопки имеют достаточный размер для людей с большим пальцем
• Оптимизируйте размер всех изображений
• Не используйте Flash и всплывающие окна
• Используйте маркеры и короткие предложения
• Убедитесь, что ваш номер телефона может быть набран с помощью одного клика
• Убедитесь, что веб-сайт может получить доступ к вашему местоположению через GPS

Полезные инструменты для тестирования мобильной версии сайта – BrowserStack, Perfecto Mobile Continuous Quality Lab, Windows Phone Emulator, Android Studio emulator, Google’s Mobile-Friendly Test, Google’s Page Speed Online.

Блок: 10/12 | Кол-во символов: 1164
Источник: https://geteasyqa.com/ru/qa/test-website/

Тестирование с нагрузкой

Существуют специальные сервисы помогающие провести нагрузочное тестирование. Это позволяет оценить выносливость веб-ресурса при большой посещаемости пользователей.

Блок: 10/11 | Кол-во символов: 191
Источник: https://richhost.biz/kak-protestirovat-rabotu-sajta.html

Бета-тестирование

Бета-тестирование – заключительная предварительная стадия тестирования. Как правило, это делают конечные пользователи, которые не являются сотрудниками компании.

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

Такие инструменты, как HockeyApp, Ubertesters, и TestFlight, являются всемирно используемыми платформами для бета-тестирования.

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

Блок: 11/12 | Кол-во символов: 737
Источник: https://geteasyqa.com/ru/qa/test-website/

9. Навигация и юзабилити

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

Веб-разработчики могут выступать в роли тестировщиков.

Блок: 11/30 | Кол-во символов: 223
Источник: https://www.kasper.by/blog/testirovanie-saita/

Как проводить тестирование сайта с помощью EasyQA Chrome Extension

EasyQA Chrome Extension позволяет создать баг репорт с вашего веб-сайта или веб-приложения, не тратя время на отправку информации,помогает в кратчайший срок начать работу по исправлению бага.

Использовать EasyQA Chrome Extension для работы с багами очень просто. Всё, что вам нужно сделать, это:

• Создайте токен для Вашего Проекта
• Установите EasyQA Chrome Extension в свой браузер
• Залогиньтесь (по желанию).

Основные возможности EasyQA Chrome Extension:

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

Блок: 12/12 | Кол-во символов: 828
Источник: https://geteasyqa.com/ru/qa/test-website/

10. Поиск битых ссылок

Все они должны работать и вести на правильные страницы. Если сайт маленький, проверить ссылки можно самостоятельно. Если же на сайте около пятисот ссылок, можно вооружиться такими инструментами, как Screaming Frog SEO Spider. Если ссылок более пятисот, понадобиться купить расширенную версию или воспользоваться сервисом онлайн.

Блок: 12/30 | Кол-во символов: 357
Источник: https://www.kasper.by/blog/testirovanie-saita/

11. Проверка в Google Search Console

Search Console дает возможность узнать про все существенные проблемы сайта: появление страниц с ошибкой 404, появление несанкционированного ПО и пр. С помощью такого инструмента веб-разработчик может следить за ходом работы ресурса, а также регулировать индексацию, собирать статистику запросов и т.д. Еще один вариант для монторинга сайта – регистрация в Bing Webmaster Tools, Яндекс.вебмастер.

Блок: 13/30 | Кол-во символов: 438
Источник: https://www.kasper.by/blog/testirovanie-saita/

12. Установка Minify

Эта библиотека на PHP5 нужна, чтобы объединить, кэшировать JavaScript и CSS-файлы, а также минимизировать их. Благодаря этому уменьшается время загрузки сайта. Подробнее про библиотеку написано на GitHub.

Блок: 14/30 | Кол-во символов: 231
Источник: https://www.kasper.by/blog/testirovanie-saita/

13. Проверка ошибки 404

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

Блок: 15/30 | Кол-во символов: 135
Источник: https://www.kasper.by/blog/testirovanie-saita/

14. Проверка наличия иконки

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

Часто наши SEO-оптимизаторы в роли тестировщиков.

Блок: 16/30 | Кол-во символов: 258
Источник: https://www.kasper.by/blog/testirovanie-saita/

15. Переадресация — 301 редирект

Структура сайта будет неизбежно меняться, и при этом важно удостовериться, что старые ссылки дают 301 редирект на новые. Для сбора всех ссылок предназначен уже упомянутый Screaming Frog Spider. Полученную по ссылкам информацию выгружают в  Excel, где в разных колонках отображаются старые и новые URL.

Блок: 17/30 | Кол-во символов: 340
Источник: https://www.kasper.by/blog/testirovanie-saita/

18. Тестирование целей, установка аналитики

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

Блок: 20/30 | Кол-во символов: 258
Источник: https://www.kasper.by/blog/testirovanie-saita/

20. Ускоренные мобильные страницы (AMP)

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

Блок: 22/30 | Кол-во символов: 181
Источник: https://www.kasper.by/blog/testirovanie-saita/

21. Интеграция с социальными сетями

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

Блок: 23/30 | Кол-во символов: 220
Источник: https://www.kasper.by/blog/testirovanie-saita/

24. Мониторинг

Для его осуществления предназначены различные инструменты, выбор зависит от того, с чем вы привыкли работать. Перед запуском сайта проверьте исправность своих инструментов.

Блок: 26/30 | Кол-во символов: 193
Источник: https://www.kasper.by/blog/testirovanie-saita/

25. Системы резервного копирования

При «падении» сервера эти системы должны сохранить все необходимые вам данные, поэтому такие системы должны работать с самого запуска сайта.

Блок: 27/30 | Кол-во символов: 181
Источник: https://www.kasper.by/blog/testirovanie-saita/

26. Тестирование нагрузки на ресурс

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

Блок: 28/30 | Кол-во символов: 218
Источник: https://www.kasper.by/blog/testirovanie-saita/

27. Авторизация пользователей

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

Блок: 29/30 | Кол-во символов: 282
Источник: https://www.kasper.by/blog/testirovanie-saita/

28. Сертификат безопасности SSL

Вернуться назад

Блок: 30/30 | Кол-во символов: 151
Источник: https://www.kasper.by/blog/testirovanie-saita/

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

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

Предупреждение: статья не претендует на академическую полноту, но точно поможет что-нибудь не упустить.

Всё посмотреть и прокликать

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

Что проверять:

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

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

Инструменты:

• Реальные браузеры и устройства.
• Эмуляторы (BrowserStack, LambdaTest, Browsera, BrowserShots).

Ошибки JavaScript

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

Валидность кода

Нужно убедиться, что код удовлетворяет стандартам HTML/CSS, для этого есть специальные валидаторы. Узнайте, как проверить валидность HTML.

Веб-формы

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

Что проверять:

• Обязательные поля подписаны.
• Если данные должны быть записаны в базу, проверяем это.
• Выводятся понятные сообщения об ошибках заполнения.
• Проверяем экранирование символов в формах на уровне клиента и сервера.
• Приходят подтверждающие письма (если так задумано).

Неправильные ссылки

Проверьте, что все ссылки ведут на настоящие сайты и не ведут на 404. Для этого тоже есть несколько инструментов. На главной не должно быть ссылки на главную.

Локализация

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

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

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

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

Что проверять

• Как быстро браузер отобразит страницу?
• Сколько времени занимает доставка ответа от сервера к пользователю?
• Все ли ресурсы загружаются?

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

• Использовать сжатие контента. Например, выбирать подходящие форматы графики и шрифтов.
• Включить серверное и клиентское кэширование
• Избавиться от неиспользуемых данных, которые подгружаются подзапросом. Например в приложении 10 библиотек JS, а используется только одна.
• Правильно настроить файлы Cookie
• Хранить статические данные на отдельном CDN-сервере.

Критерии качества

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Загрузка…