Игра на понижение — с блокера до крита за 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. Вводим команду, выполняем и — вуаля, произошёл расчёт, магия свершилась.

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

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