Консоль браузера — это инструмент, о котором многие знают, но лишь немногие используют его возможности в полной мере. Для большинства QA-инженеров она остаётся чем-то вроде диагностической панели: открыть, увидеть ошибку, закрыть. Однако её потенциал значительно шире. Я убедился в этом на собственном опыте. Привет, Хабр, меня зовут Алексей Иванов, я занимаюсь тестированием в компании «Самолет», и, помимо ежедневной работы с продуктом, организую митапы по тестированию в Москве. Участвуя в таких крупных конференциях как Heisenbug и SQA Days, я заметил, что многие мои коллеги используют JS-консоль исключительно для отслеживания ошибок на сайте. Но что, если взглянуть на неё шире? 

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

setInterval(()=> {
$('#gift').click()
}, 150)

Суть кода проста: он просто кликает по элементу каждые 150 мс — ничего сложного. Но давайте я расскажу о других сценариях, где такие простые скрипты могут существенно ускорить ручной регресс-анализ. Вот лишь небольшой список полезных скриптов. Можете присылать свои в комментариях.

Примеры полезных скриптов для JS-консоли

Кейс 1: Подсчёт элементов на странице

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

const countElement = $$('[class^="_ObjectsListCard"]').length;
console.log(`Количество проектов: ${countElement}`);

На этом примере мы можем быстро посчитать кол-во элементов, используя css селектор

const countElement = $$('[class^="_ObjectsListCard"]').length;
console.log(`Количество проектов: ${countElement}`);

Кейс 2: Парсинг данных со страницы (ссылки)

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

const links = [...document.querySelectorAll('a')].map(link => link.href);
console.log('Все ссылки на странице:', links);

Этот скрипт универсальный и можно использовать на любой странице и получить все ссылки, а если хотим конкретные ссылки можем изменить селектор:

const links = [...document.querySelectorAll('.services__item a')].map(link => link.href);
console.log('Все ссылки на странице:', links);

Кейс 3: Парсинг данных из таблицы (таблицу)

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

const tableRows = [...document.querySelectorAll('table tbody tr')];
const data = tableRows.map(row => {
const columns = row.querySelectorAll('td');
return {
column1: columns[0].innerText,
column2: columns[1].innerText,
column3: columns[2].innerText,
};
});
console.log('Данные из таблицы:', data);

Пример как мы получили данные из календаря статистики:

Кейс 4: Парсинг данных и выполнение вычислений

Можно не только парсить данные, но и сразу выполнять вычисления. Например, если нужно суммировать значения в колонке:

const tableRows = [...document.querySelectorAll('table tbody tr')];
const total = tableRows.reduce((sum, row) => {
    const rawValue = row.querySelector('td:nth-child(2)').innerText;
    const normolizeValue  = rawValue?.replace(',', '.');
    const value = parseFloat(normolizeValue);
    return sum + (isNaN(value) ? 0 : value);
}, 0);
console.log(`Сумма значений во второй колонке: ${total.toFixed(2)}`);

const tableRows = [...document.querySelectorAll('table tbody tr')];
const total = tableRows.reduce((sum, row) => {
const value = parseFloat(row.querySelector('td:nthchild(
3)').innerText);
return sum + (isNaN(value) ? 0 : value);
}, 0);
console.log(`Сумма значений в третьей колонке: ${total}`);

Кейс 5: Отправка запросов для подготовки данных

Иногда требуется подготовить данные или проверить API без использования Postman или других инструментов. Это можно сделать прямо из консоли:

fetch('<https://example.com/api/data>', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => console.log('Ответ от сервера:', data))
.catch(error => console.error('Ошибка:', error));

Например создание нового пользователя и вход в этот аккаунт (для вас скрипт будет другой):

Кейс 6: Подключение к сокетам

Если ваш проект использует WebSocket, можно подключиться к сокету и прослушивать события прямо в консоли:

const socket = new WebSocket('wss://example.com/socket');
socket.onopen = () => {
console.log('Соединение установлено');
socket.send(JSON.stringify({ action: 'subscribe', channel: 'updates'
}));
};

Подробнее про веб-сокеты можете почитать здесь.

Кейс 7: Заполнение форм

Для ускорения тестирования форм можно использовать автоматическое заполнение и отправку данных:

document.querySelector('#name').value = 'Тестовое имя';
document.querySelector('#email').value = 'test@example.com';
document.querySelector('form').submit();
console.log('Форма заполнена и отправлена');

Пример заполнения:

Важное замечание

Однако стоит отметить, что не всегда удается просто кликнуть или заполнить поля формы через консоль. Это может быть связано с использованием сложных UI-фреймворков, которые добавляют валидацию или управляют состоянием элементов на странице. Например, в некоторых случаях элемент может не воспринимать ввод значения через value , так как внутренние скрипты фреймворка могут ожидать определенных событий или использовать собственные механизмы управления состоянием. В таких ситуациях можно попытаться вызвать соответствующие события вручную:

const nameInput = document.querySelector('#name');
nameInput.value = 'Тестовое имя';
nameInput.dispatchEvent(new Event('input', { bubbles: true }));
nameInput.dispatchEvent(new Event('change', { bubbles: true }));

Хранение и управление скриптами для ускорения тестирования в DevTools

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

Закладки в браузере

Маленькие скрипты можно хранить прямо в закладках браузера — это быстрый и удобный способ для часто используемых задач. Я, например, так сохраняю скрипты для выполнения запросов и авторизации. Такой метод отлично подходит для простых сценариев, которые регулярно используются. Чтобы сохранить скрипт, нужно создать новую закладку и вместо URL вставить JavaScript-код, добавив перед ним префикс javascript:. Например:

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

Плюсы: быстрый доступ

Минусы: ограничено простыми скриптами, неудобно для управления большим количеством кода.

Репозиторий на GitHub/GitLab

Если ваши скрипты часто обновляются и требуется совместная работа с коллегами, то использование репозитория на GitHub или GitLab — отличный вариант. Это позволяет легко делиться кодом, отслеживать изменения и управлять версиями. Такой подход особенно полезен, если скрипты усложняются или их количество растёт, так как вы всегда сможете вернуться к предыдущей версии или обсудить изменения с командой.

Плюсы: удобное управление версиями, совместная работа, история изменений.

Минусы: требует настройки репозитория и навыков работы с системой контроля версий.

Chrome DevTools Snippets

Chrome DevTools предоставляет встроенную возможность для хранения скриптов в виде сниппетов. Это удобный способ сохранять и запускать ваши скрипты прямо в инструментах разработчика. Такой подход отлично подходит для быстрого доступа к часто используемым фрагментам кода.

Как использовать: Откройте Chrome DevTools, перейдите на вкладку "Sources" и выберите раздел "Snippets". Здесь вы можете создавать, сохранять и запускать скрипты напрямую из DevTools.

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

Минусы: скрипты сохраняются только локально и не синхронизируются между устройствами.

Собственное расширение

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

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

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

Минусы: требует знаний разработки расширений и занимает больше времени на создание и поддержку.

Заключение

Скрипты для консоли браузера — это недооценённый инструмент, способный значительно упростить процесс ручного тестирования. Несмотря на то, что большинство QA-инженеров используют консоль исключительно для отладки, её возможности гораздо шире. Простые скрипты, которые можно написать за считаные минуты, могут выполнять повседневные задачи вроде кликов, заполнения форм или навигации по страницам. Это позволяет значительно ускорить процесс регрессионного тестирования и сократить количество однообразных действий. Как их хранить и управлять ими зависит от задач. Главное — найти подход, который лучше всего подходит вашим нуждам, и научиться использовать инструменты по максимуму. Пишите в комментариях, используете ли вы какие-то ещё скрипты в консоли или другие простые и удобные инструменты?