JavaScript-консоль для QA-инженера: от поиска багов до автоматизации

[Emelian]

Полезная статья. Спасибо!

Зацепил ваш код, который «просто кликает по элементу каждые 150 мс». Примерно это мне сейчас и нужно. Также, понравилось все то, что вы пишите про парсинг данных, Хром и расширения к нему. Это уже несколько дней, как тема моих интересов, включая JS.

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

Также, я читал, что для тестирования часто применяется безголовый (headless) Chrome или, другими словами, «безгуёвый» (without GUI) браузер. Я хоть и не тестировщик (сейчас, просто, свободный «художник», в смысле, программист, см. мою последнюю статью https://habr.com/ru/articles/848836/ ), но возможность применения безгуёвого Хрома, для тестирования, мне очень интересна.

Работали ли вы, когда-нибудь, в этом направлении? Интересно было бы услышать ваше мнение. Меня это интересует с целью веб-скрапинга данных для моей обучающей программы.

[hel1n]

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

[Emelian]

браузер без gui правильно называется Headless

Я это знаю. Только русскоговорящие не говорят «хидлэс Хром», а, по-русски, «безголовый Хром», ну, или на жаргоне.

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

Не вполне уверен насчет «также», ну, да ладно, вам виднее.

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

Это объясняет, что Питон просто скачивает JS-скрипт, а Хром его еще и выполняет, что для нас более ценно, так как результаты перевода скрыты в самом скрипте, который не выполняется вне своего окружения.

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

[Klestofer]

Пример с букмарклетом не сработает из за однострочного комментария. Да и $$ там не доступно. Нужно так:

javascript:(function(){
/* Ваш код здесь */
const countElement = document.querySelectorAll('[class^="_ObjectsListCard"]').length;
console.log(`Количество проектов: ${countElement}`);
})();

[hel1n]

да, так и есть, я туда обычно запросы всякие запихиваю

[Goodzonchik]

Console не ограничивается лишь одним методом log. Их очень довольно много, и сразу оговорюсь, что для тестирования извне их или не применить, или очень сложно или нет смысла.

Но, например, для того, чтобы вывести таблицу есть отдельный метод .table(), который явно подойдет больше для отображения табличных данных.

Также, можно еще можно иногда пользоваться методами dir и dirxml.

[hel1n]

https://developer.chrome.com/docs/devtools/console/log
https://developer.chrome.com/docs/devtools/console/api
да, вот можно подробно почитать

[Hermion_Joya]

Я вот как раз из тех QA, кто консоль использовал чисто посмотреть, что там происходит. А тут, оказывается, можно скрипты вставлять - офигеть!