Игра на понижение — с блокера до крита за 5 минут

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

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

Был у меня недавно кейс, в котором этот “лайфхак” спас мне очень много времени (собственно, благодаря этой ситуации я и решился на написание статьи).

Ситуация следующая: есть на форме кнопка “добавить файл”, по нажатию которой, вот неожиданность-то какая, должна открываться форма добавления файла. Казалось бы, всё логично, правильно и продуманно, все молодцы, да?
Ага, как же… Размечтались! Ключевое слово “должна”.
Это только в сказках всё работает так, как задумано: ступа у Бабы-яги летает, избушка — бегает, а печь добрых молодцев во фритюре со специями запекает. У нас же с вами, если кто забыл, 21 век на дворе — сказок и след простыл. Баг сидит на баге и багом погоняет, промежду прочим!

Так вот, ситуация: надо добавить файл (иначе дальше по бизнес-процессу не пройдёшь), по нажатию кнопки форма добавления файла появляется и тут же исчезает. Т.е. добавление файла (а вместе с ним и весь бизнес-процесс, на минуточку) у нас заблокировано.

Я, естественно, баг на это дело завёл. Но, зная нерасторопность команды разработки, задумался над тем, как этот блокер можно обойти, дабы не терять время. Полез я в консоль разработчика и вспомнил, что туда можно JavaScript’овые команды писать.

Ну, а дальше уже дело техники: записать на видео момент “всплытия” формы, в замедлении посмотреть это видео, увидеть, какие кнопки на этой форме есть, найти их в консоли разработчика, написать для них поисковые команды и вуаля — блокер уже не такой уж и блокер!
А теперь давайте поподробнее: по понятным причинам скриншоты проекта, над которым работаю, я вам показывать не буду, поэтому давайте разберем пример на основе всеми нами любимого кредитного калькулятора ПОИНТ (показывать буду на примере браузера Mozilla Firefox).
Допустим, нам нужно нажать на кнопку “Рассчитать” .

Шаг первый: поиск элемента

1. Открываем консоль разработчика (Shift + Ctrl + I или F12).

2. Нажимаем на кнопку “Выбрать элемент со страницы” (или нажимаем Ctrl + Shift + C).

3. Находим кнопку на странице и нажимаем на неё.

4. Видим, что эта кнопка у нас открылась в консоли на вкладке “Инспектор”.


(или же, если этот вариант вам не подходит по каким-то причинам, можно воспользоваться поиском по тексту в строке “Поиск в HTML” — вводите туда текст вашей кнопки и нажимаете Enter. Если кнопок с одинаковым текстом на странице несколько, то здесь пригодится удобная фича браузера: при наведении курсора на элемент в Инспекторе этот элемент подсвечивается на странице так же, как на шаге 3.

Шаг второй: указание на элемент

1. Для указания на элемент проще всего использовать id или class объекта. Для поиска по id используется команда getElementsById, для поиска по class — getElementByClassName (есть, конечно, еще css- и xpath-локаторы и отдельные команды для работы с ними, которые гораздо более гибки и удобны, но про них вам расскажут уже на ПОИНТе, в вебинаре по автоматизации тестирования). У нашего объекта нет айдишника, поэтому искать будет по классу (btn btn-primary). Переходим в консоли разработчика на вкладку “Консоль” и пишем следующее: document.getElementsByClassName(‘btn btn-primary’), нажимаем Enter.

2. Получаем коллекцию — это значит, что по данному локатору находится больше одного элемента.

3. Раскрываем коллекцию нажатием на стрелочку перед надписью HTMLCollection и видим, что у нас там 2 элемента.

4. Наводим курсор на первый элемент и видим, что у нас подсвечивается нужная нам кнопка.

5. Модифицируем нашу команду поиска, указывая, что нам нужен первый элемент коллекции: document.getElementsByClassName(‘btn btn-primary’)[0] (ноль, потому что нумерация внутри массива/коллекции начинается с 0, а не с 1), выполняем её и на выходе получаем не коллекцию, а конкретную кнопку — ту, которая нам нужна.

Шаг третий: нажатие на кнопку

1. Ну, тут всё просто: берём ту команду, которая выдаёт нам нужный элемент, и дописываем команду нажатия — click(), на выходе получая document.getElementsByClassName(‘btn btn-primary’)[0].click()

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

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

Всем знаний, народ!
#ятренерпоинт

Метки
#Тестирование ПО (2)Android (1)Cache (1)Cookie (1)courses (1)HR (1)iOS (2)java (1)Jedi Point (5)kaizen (2)pairwise (1)QA (14)QualityLab (1)REST API (1)selenium (1)SOAP UI (1)softskills (1)softwaretesting (1)SQA Days-25 (1)sql (5)TestSuites (1)usability (2)web (1)БАГИ (1)Исследовательское тестирование (2)Истории поинт (8)Команда разработки (1)Курс тестирования для начинающих (1)Кэш (1)Мнемоники (1)Мнемоники в тестировании (1)Нина Агеева (4)ПОИНТ (36)ПРомо-вебинар (1)Роман Буданов (3)Скриншот (3)Таблица решений (1)Тестирование (13)Тестирование ПО (2)Тест менеджмент (1)Тренер (11)Туры (1)автоматизация (2)алгоритмы (1)баг (1)безопасность (1)введение в тестирование (1)декомпозиция (1)домашки (1)займемсяпоинтом (1)игры (1)идеальный мир (1)интернет (1)истории выпускников (8)как надо тестировать (2)комбинаторика (1)конференция (1)котик (1)курс для начинающих тестировщиков онлайн (1)лайфхак (1)мобилки (3)мобильное тестирование (4)настройка мозгов (1)начинающий тестировщик (6)негативное тестирование (2)обучение (1)обучение тестированию (3)организация тестирования (1)персонажи (1)планирование (1)постановка мозгов (2)работа над ошибками (1)рабочий процесс (1)радиоСаня (1)режим разработчика (3)резюме (1)скринкаст (1)сопроводительное письмо (1)с чего начать (1)тайм-менеджмент (1)тестировани (1)тестирование usability (2)тестирование безопасности (1)тестирование веб (2)тестирование игр (1)тестирование мобильных приложений (1)тестировщик (5)улучшайзинг (1)ученик (2)фреймворки (1)чит лист (1)что должен делать тестировщик (1)ятренерпоинт (1)
С 23.09 по 21.11, ОНЛАЙН Зарегистрироваться