Как изменить результат теста в браузере
Формы часто скрывают под собой сложную бизнес-логику, поэтому умение правильно тестировать формы — один из критических навыков тестировщика. Количество наборов входных данных, которые может принимать нетривиальная форма, стремится к бесконечности. Проверить их все невозможно физически. Вот почему важно подходить к тестированию форм с умом и использовать техники, упрощающие этот процесс.
Зачем тестировать формы?
1. Безопасность
Злоумышленники могут использовать поля формы для получения информации или других вредоносных действий — это может быть сделано с помощью SQL-инъекций и вредоносных скриптов.
2. Стабильность
Когда пользователь вводит данные, которые не могут быть обработаны приложением, оно может среагировать неожиданным образом — например, упасть.
3. Корректное поведение UI и единообразие
Очень важно, чтобы все формы в приложении были единообразны (и по внешнему виду, и по поведению).
4. Чистота базы данных
Форма — место, которое наполняет базу данных. Если есть проблемы с валидацией, появляется угроза того, что некорректные данные попадут в БД. Это ведет к проблемам с поведением приложения и потенциальным багам.
Разделение эквивалентности
Разделение эквивалентности — это разделение набора возможных данных для ввода на классы. Каждый член класса считается идентичным всем остальным.
Давайте разберем это на примере. Предположим, что есть поле для ввода, которое может принимать только числовые значения в промежутке от 1 до 200 000. Вот классы эквивалентности, которые нужно будет проверить:
- Числа меньше минимального значения промежутка (меньше 1)
- Числа внутри промежутка (1-200 000)
- Числа больше максимального значения промежутка (больше 200 000)
Анализ граничных значений
Кроме классов эквивалентности, нужно протестировать граничные значения. Граничные значения это:
- Минимальное значение
- Максимальное значение
- Выборочные значения из промежутка
Граничные значения проверяются, потому что ни один разработчик не застрахован от так называемой ошибки на единицу.
Дополнение
Вместе со всем вышеперечисленным нужно попробовать:
- оставить поле пустым
- ввести нечисловое значение
- ввести число больше 32-bit Integer
- другие варианты, которое подскажет ваш опыт и воображение 🙂
Таблица верификации полей
Вот пример таблицы для верификации полей ввода. Вы можете составить такую же для вашей формы.
Тип данных | Корректный ввод | Некорректный ввод |
---|---|---|
Положительные целые числа | — только числа — максимально возможное значение (N) — числа внутри промежутка (N + 1) / 2 | — число больше максимально возможного (N + 1) — дробные числа — отрицательные числа — строковые значения — числа + строковые значения — числа + специальные символы — Unicode (например U+0000, U+0001) |
Строки | — только символы — только числа — только специальные символы — числа + символы — числа + спецсимволы — символы + спецсимволы | — |
Даты | — проверить, что при выборе появляется datepicker — проверить, что поле нельзя изменить с клавиатуры — проверить, что значение поля можно скопировать, но вставить нельзя — проверить, что при выборе значения в datepicker, оно появляется в поле — проверить, что в феврале 29 дней в високосных годах — проверить, что в феврале 28 дней не в високосных годах | — |
Бонус: BugMagnet
Для тестирования форм есть отличный плагин для Chrome и Firefox — BugMagnet. После установки кликните правой кнопкой мыши по любому полю формы и у вас появится возможность выбора значений для заполнения из огромного списка данных. Вот видео, на котором показано, как работаем BugMagnet:
Требуется изменить результаты тестирования у одного пользователя! Как это сделать?
Чтобы переопределить общую оценку за тест (или любой другой элемент курса) надо зайти в "Оценки" -> "Отчет по оценкам" и нажать на карандаш у названия нужного теста. Затем надо нажать галочку "Переопределить" и ввести нужную оценку.
При включенном Ajax и режиме быстрого оценивания, баллы редактируются прямо в ячейке таблицы:
Зачем? Вопрос неверно составлен? Перепутаны верные/неверные ответы?
При просмотре попытки конкретного студента можно «Переопределить оценку или оставить комментарий» за каждый вопрос:
А не подскажете, где отобразится комментарий для студента после того, когда преподаватель его оставит, например, при переопределении оценки за вопрос? На странице Результат попытки он не отображается, в настройках можно показать комментарии к ответу и т.п. Может, нужны какие-то права для просмотра? Спасибо
Вы же сами можете проверить, где отобразится комментарий. Создайте курс, тест, двух пользователей, одному дайте права преподавателя, второму - студента. Ну, и так далее.
По идее, комментарий будет показан студенту ниже самого вопроса на странице обзора попытки.
Как всегда, ответ на поверхности. Для отображения отзыва преподавателя в настройках теста необходимо включить "Отзыв для конкретного варианта ответа":
Однако в этом случае, естественно, отображаются и отзывы к конкретным вопросам, которые я хотел не показывать. Видимо, отобразить только отзыв преподавателя нельзя. Результат переопределения баллов за вопрос и комментарий "Make comment or override mark" при переоценке вопроса:
Галочки с первого скриншота не имеют никакого отношения к комментарию, оставляемому после переопределения оценки (второй скриншот, самый нижний коммент). Этот комментарий будет показан в любом случае, если он есть.
Только что проверил, без галочки Отзыв для конкретного варианта ответа комментарий не отображается (на скриншоте один и тот же вопрос, переоцененный преподавателем):
Я раньше тоже считал, что комментарий и переопределение оценки должны отображаться в любом случае.
Точно, вы правы. Только я не пойму, почему этот комментарий к вопросу или переопределению оценки за вопрос в целом повесили на галку отзыва за конкретный вариант ответа. Где логика?
Google Chrome — один из самых популярных браузеров. Он доминирует на рынке, и в ближайшие пару лет это вряд ли изменится.
Положение лидера делает тестирование в Chrome обязательным пунктом в чеклисте кроссбраузерного тестирования.
Инструменты разработчика (Dev Tools) — одна из функций браузера Chrome. Эти инструменты стали важной частью ежедневной работы как разработчиков, так и тестировщиков. Поэтому тестировщики должны знать, как пользоваться этими инструментами на полную и обеспечивать с их помощью лучшее качество тестирования.
Вообще инструменты разработчика доступны во всех основных браузерах. Но Chrome Dev Tools выделяются на их фоне, поскольку команда Google Chrome постоянно улучшает и расширяет их функционал.
В этой статье мы дадим 16 советов по использованию инструментов разработчика Chrome для кроссбраузерного тестирования. В следующем разделе мы расскажем, как зайти в Dev Tools. Если вы знаете, как это сделать, можно пролистать дальше и перейти сразу к советам.
Если вы хотите добавить дополнительные инструменты для упрощения тестирования — вот наша статья с подборкой пяти расширений Google Chrome, упрощающих жизнь тестировщику.
Как открыть инструменты разработчика?
Прежде чем знакомиться с различными приемами работы с Dev Tools, тестировщику следует научиться хотя бы открывать их. Это можно сделать двумя способами.
1. Откройте Google Chrome. Кликните правой кнопкой мыши по экрану. В открывшемся меню выберите Inspect.
2. Второй способ открыть инструменты разработчика — использовать сочетание клавиш. Можно нажать или Ctrl + Shift + C (Cmd + Option + C), или Ctrl + Shift + J (Cmd + Option + J).
В этой статье мы будем работать с инструментами разработчика в Google Chrome. Но аналогичный функционал есть и в других браузерах, например, в Mozilla Firefox и Safari. Открывается он примерно так же, как в Chrome: правый клик мышью и выбор Inspect Element в появившемся меню.
Mozilla Firefox
Safari
Итак, пора перейти к собственно советам по использованию инструментов разработчика для улучшения кроссбраузерного тестирования.
1. Поиск элемента
Эта функция помогает тестировщику (или разработчику) искать в DOM-дереве нужные элементы страницы.
Откройте Chrome Dev Tools и зайдите на вкладку Elements. Собственно, ее не нужно искать: по умолчанию она открывается первой. Находясь в этом разделе, нажмите Ctrl + F (Cmd + F).
Откроется поле для ввода, где вы сможете вставить искомое слово. После ввода инструмент подсветит этот элемент в коде.
2. Добавление и редактирование элементов
Инструменты разработчика позволяют добавлять теги в код или изменить их.
Таким образом можно быстро вносить изменения в стили сайта. Эти изменения будут применены только в вашем браузере и только в текущей сессии. Как только вы перезагрузите страницу, все восстановится в изначальном виде.
3. Изменение расположения DOM-элементов в дереве
Вы можете изменить позиции элементов во вкладке Elements, просто перетаскивая их.
Таким образом можно изменить структуру страницы и прикинуть, где ваш контент будет лучше смотреться.
4. Поиск CSS-свойства в Sources
Тестировщику часто приходится искать в Sources свойство, определенное в Elements, для внесения каких-то изменений. Это можно быстро сделать при помощи Ctrl + Click (Cmd + Click). Затем перейдите во вкладку Sources, где нужное свойство будет подсвечено.
5. Скриншот элемента
Тестировщики могут делать скриншоты элементов. Для этого выберите элемент и нажмите Ctrl + Shift + P (Cmd + Shift + P).
Откроется палитра команд. Выберите в ней Capture Node Screenshot, чтобы сделать скриншот элемента.
6. Использование результатов предыдущей операции в консоли
Работая в консоли, вы можете заметить, что каждая новая строка выдает определенный output, зависящий от выражения, определенного в предыдущей. Инструменты разработчика позволяют использовать этот output в следующих выражениях, обращаясь к нему при помощи «$_».
7. Многострочные скрипты
Обычно в любой программе или операционной системе консоль на каждой новой строке выдает результат предыдущего выражения.
Консоль разработчика работает аналогично.
Но в Console в Chrome Dev Tools тестировщик может применять многострочные скрипты. Для этого в конце каждой строки нажимайте не Enter, а Shift + Enter.
Вкладка Console быстро заполняется различными логами. Чтобы очистить консоль, нажмите Ctrl + L (Cmd + K) или напишите команду clear();
8. Локаторы для автоматизированного тестирования при помощи Selenium
Для автоматизированного тестирования с использованием Selenium очень часто используются локаторы. Они нужны для поиска конкретных элементов на странице.
В Selenium есть следующие локаторы:
- ID
- Name
- Linktext
- Partial Linktext
- Tag Name
- Class Name
- CSS Selector
- Xpath
При помощи инструментов разработчика можно быстро находить локаторы для любых элементов страницы.
Например, если вам нужен Xpath элемента, вы можете скопировать его при помощи инструментов разработчика, и «скормить» своим скриптам в Selenium.
10. Переход к определенной строке
В инструментах разработчика можно перейти к указанной строке, введя ее номер в строке поиска. Для открытия поиска нажмите Ctrl + O (Cmd + O).
11. Переключение между файлами в рамках проекта
Веб-проекты, как правило, содержат много файлов. Тестировщику может понадобиться неоднократно переключаться между ними в ходе интеграционного тестирования или на стадии юнит-тестов.
Инструменты разработчика позволяют быстро переключаться на нужный файл (в рамках проекта), просто введя его название в строке поиска.
Поиск по файлам открывается клавишами Ctrl + P (Cmd + P).
12. Watch Expression
В инструментах разработчика Chrome есть функция под названием Watch Expression. Найти ее можно во вкладке Sources, в колонке справа.
Тестировщику во время дебага нужно постоянно следить за переменными и выражениями. Искать их снова и снова очень затратно по времени. Watch Expression может делать это за вас.
Тестировщик просто вводит выражение или переменную в этот раздел, и они будут обновляться при каждом изменении.
13. JavaScript Breakpoints
Современные сайты содержат много JavaScript-кода. При одном-единственном запросе может меняться множество значений, а тестировщику нужно определять, где они находятся, и наблюдать за ними.
Например, API-запрос, использующий AJAX, может запускаться 4 раза и возвращать разные коды статуса. Для эффективного тестирования его нужно проверять на каждом этапе. Для этого в инструментах разработчика есть специальная фича — JavaScript Breakpoints.
Используя JavaScript Breakpoints, вы можете определять строку, на которой хотите приостановить выполнение кода.
Чтобы воспользоваться этой функцией, просто кликните на номер строки, на которой выполнение JavaScript-кода должно прерваться.
14. XHR/Fetch Breakpoints
Во вкладке Sources под Watch Expression есть раздел XHR/Fetch Breakpoint. С его помощью вы можете устанавливать брейкпоинт в скрипте при каждой отправке запроса.
Тестировщик также может использовать эту функцию только для определенных запросов, с конкретными URL.
15. Включение нескольких курсоров
Разве не круто было бы иметь возможность писать на разных строках одновременно? Инструменты разработчика позволяют это делать. Для этого нужно инициализировать множественные курсоры, зажав Ctrl (Cmd) и кликая в нужных местах.
16. Мониторинг производительности
Dev Tools позволяют тестировщику следить за производительностью сайта прямо в панели инструментов. Для этого нужно зайти во вкладку Performance, нажать Ctrl + E (Cmd + E), а затем — Ctrl + R (Cmd + R) для перезагрузки страницы. Чтобы прекратить замеры производительности, нажмите кнопку «Stop».
Инструменты разработчика сильно упрощают и ускоряют работу. Обязательно используйте их во время тестирования!
Google Chrome сегодня однозначно самый популярный браузер. По состоянию на 2020 год, 2.65 миллиарда людей использовали его как основной браузер (источник — Statista). Подавляющее большинство веб-приложений и сайтов поддерживают Chrome.
Chrome популярен и среди разработчиков и тестировщиков. Как пишет DebugBear, магазин расширений Google Chrome насчитывает более 137000 расширений.
Мы собрали список из 5 расширений для Chrome, которые будут полезны для тестировщиков:
1. EditThisCookie
Работа с куками может быть очень неприятной — часто бывает, что они есть, когда не нужны и их нет, когда они нужны. Управлять ими традиционно — через консоль браузера — не очень удобно. Взгляните:
Очень просто и удобно управлять куками с помощью расширения EditThisCookie — оно позволяет одним кликом удалять, изменять или добавлять новые куки. Must Have для всех тестировщиков, часто работающим с куками.
- удалять куки
- изменять куки
- заблокировать куки
- создавать новые куки
- искать куки
- импортировать/экспортировать куки
И это только часть из того, что умеет это расширение. Установить его можно по ссылке.
2. Responsive Viewer
Изменять размер окна браузера может быть неудобно, особенно если нужно проверить внешний вид приложения больше, чем на 2-3 размерах экрана. В Chrome есть встроенная возможность увидеть приложение на экранах других размеров, но эта функциональность ограничена одновременным просмотром только одного viewport-а.
Когда нужно протестировать, как работает приложение на разных размерах экрана, можно использовать Responsive Viewer — расширение позволяет сделать это одновременно. Можно переключаться между режимами телефона и планшета, много предопределенных размеров экрана для разных девайсов.
Функционал Responsive Viewer включает:
- синхронный скролл
- просмотр приложения на разных экранах одновременно
- набор предопределённых размеров экрана популярных девайсов
- спрятать/показать экран
- добавление своих размеров экрана
3. Exploratory Testing Chrome Extension
Делать заметки во время тестирования бывает сложно, особенно если нужно переключаться между несколькими окнами. Бывает, нужно сделать скриншот, связать его с каким-то пояснительным текстом.
В таких случаях, я советую использовать Exploratory Testing Chrome Extension (или ECTE). В ECTE можно добавить всю информацию о багах прямо в окне браузера.
У ECTE простой интерфейс — он позволяет легко добавлять заметки и делить их на баги, идеи и т.п.
После тестирования можно составить подробный отчет прямо в браузере или выгрузить его в CSV-файл.
Функционал ECTE позволяет:
- создавать заметки прямо в окне браузера
- одновременно с созданием заметки делать скриншот
- просмотреть все ваши записи в сгенерированном отчете
- экспортировать отчет в HTML или CSV файл
4. Ruto — XPath Finder
Если вы используете XPath локаторы — XPath Finder вам очень понравится. Собирая XPath локаторы вручную, с помощью консоли разработчика — долго и утомительно.
Ruto XPath Finder возвращает XPath и позволяет выбрать, как его форматировать.
На гифке выше были варианты получить XPath на основе data-url, href или получить CSS-локатор. Пара кликов — и локатор нужного формата получен. Расширение может сэкономить кучу времени.
Функционал XPath Finder позволяет:
- получать XPath на основе разных атрибутов
- копировать XPath в один клик
- находить вложенные XPath локаторы
5. Web Developer Form Filler
Тестировщики, работающие с формами прекрасно знают, как приятно может быть многократное заполнение одной и той же большой формы. После пятого раза, обычно изобретается новый язык для заполнения.
Для решения таких проблем отлично подходят автофиллеры для форм. WDFF — одно из таких расширений. Когда форма заполняется в первый раз, оно позволяет одним кликом сохранить значения всех полей. Когда нужно будет заполнить форму еще раз, расширение восстановит эти значения.
- сохранять данные для повторной вставки в форму
- изменять и обновлять селекторы, которые используются расширением
- сохранять несколько наборов значений для одной и той же формы
- заполнять форму рандомно сгенерированными значениями
Ни одно из этих расширений не заменит ручного тестирования, но каждое из них поможет упростить вам жизнь. Все они значительно сэкономят время на выполнение однотипных рутинных задач и позволят сфокусироваться на реально важных вещах во время тестирования.
Напишите в комментариях, какими расширениями во время тестирования пользуетесь вы?
Версия WordPress 5.3 подъехала к нам с новым фильтр хуком для функционала Здоровье сайта – site_status_test_result . Этот фильтр позволяет полностью изменить результат конкретного теста – текст, лейбл, цвет лейбла, приоритетность… короче давайте я покажу вам всё на примере!
Предположим, что на моём сайте тест выдаёт такое рекомендуемое улучшение:
Какой-то не самый красивый пример получился 😁, давайте разберём, как оно работает.
- Строка 5 – напоминаю, что список всех тестов (их идентификаторов) вы можете найти на этой странице.
- Строка 10 – Установленные плагины в виде массива мы легко получаем из базы данных при помощи функции get_option(), а при помощи стандартной PHP функции count() определяем количество элементов в этом массиве.
- Строка 12 – Проверяем количество установленных плагинов, если их больше 50, то выполняем код ниже.
- Строка 14 – Проверка статуса выполненного теста. Если всё хорошо, наши плагины не нуждаются в обновлениях и нет неактивных, мы можем полностью перезаписать заголовок результата теста, изменить бейдж на «Производительность» например, иначе мы просто дописываем уже к существующему заголовку кусочек текста про много плагинов.
- Подобное условие есть на строке 26 – ведь по сути нам надо добавлять ссылку на страницу с плагинами только когда тест говорит, что всё ок, и ссылок уже не было добавлено.
Короче много текста, вот результат:
Смотрите также
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Читайте также: