В Chrome 89 в DevTools добавлена экспериментальная поддержка автогенерация JS скриптов на Кукловод .
Схематически это работает так: вы открываете нужную страницу, включаете запись действий в DevTools, а затем делаете что-то на странице обычным способом (нажимаете на ссылки и кнопки, переходите на другие страницы, вводите текст).
По мере выполнения действий браузер заполняет вкладку DevTools виртуальным файлом записи с JS-кодом, описывающим все действия через API Puppeteer. После этого вы можете остановить запись и сохранить полученный код как настоящий JS-файл.
Чтобы продемонстрировать новую функциональность (называемую Кукловод-блок-флейта ) авторы подготовили небольшой демо-страница (хотя проверить можно на любой странице, никаких предварительных условий со стороны сайта не требуется).
Но сначала, поскольку это пока ранняя экспериментальная функция (хотя авторы планируют развивать и расширять Кукловод-блокфлейта ), его необходимо включить в настройках DevTools, на вкладке Эксперименты, как пункт Регистратор: 
После включения экспериментальных функций DevTools необходимо перезапустить.
Теперь вы можете открыть панель «Источник» в DevTools и выбрать появившуюся вкладку «Записи»: 
Добавим новый файл записи с именем
:test01.js
И начните записывать действия с помощью кнопки «Запись» внизу экрана:
Браузер сразу заполняет файл стартовым кодом, а затем дополняет код после каждого нашего действия на странице:
После повторного нажатия кнопки «Запись» браузер прекращает запись, дополняет код необходимыми закрывающими скобками, и полученный файл можно сохранить:
Результатом может быть примерно такой код:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(" https://jec.fyi/demo/recorder ?");
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your email");
await element.click();
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your email");
await element.type("[email protected]");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("aria/your name");
await element.type("baz");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("html > body > main > form > input[type=number]:nth-child(3)");
await element.type("23");
}
{
const targetPage = page;
const frame = targetPage.mainFrame();
const element = await frame.waitForSelector("html > body > main > form");
await element.evaluate(form => form.submit());
}
await browser.close();
})();
К сгенерированному коду и всему функционалу Кукловод-блокфлейта Сразу можно сделать несколько замечаний:
- полученный код не оптимален (в частности, полные селекторы элементов) и может содержать много повторов (хотя это нормально для подобных инструментов автогенерации и не обязательно влияет на скорость выполнения тестов в Puppeteer)
- пока записываются только самые простые действия (нажатия и ввод текста), а остальное игнорируется (действия со всей вкладкой, выделение текста, действия через контекстное меню, горячие клавиши)
- различные проверки ожиданий, создание снимков экрана и другие действия, типичные для e2e-тестов, необходимо будет вставлять в код вручную
Сам интерфейс Кукловод постепенно становится стандартным (хотя Кипарис остается не менее популярным), хорошо интегрируется с Шутка и другие тестовые библиотеки, а также используется в мультибраузерных Драматург от тех же авторов.
Поскольку написание и поддержка интеграционных тестов обычно обходится разработчикам дорого (такие тесты часто менее стабильны и более сложны, чем модульные тесты), такие инструменты автоматической генерации тестов могут значительно сэкономить бизнес-время и ресурсы.
Обновлено : Стефан Юдис Я разместил в своем блоге небольшую новость (с видеодемонстрацией) о Кукловод-блокфлейта : Как записать действия на экране в виде сценария кукловода .
Там же он отмечает, что в будущем пользователи сайта, обнаружившие на нем ошибку, смогут воспользоваться Кукловод-блокфлейта Прикрепите к отчету об ошибке скрипт, позволяющий точно воспроизвести ошибку.
Теги: #Google Chrome #Тестирование веб-сервисов #JavaScript #e2e тесты #puppeteer #chrome devtools #autotest #autogeneration
-
Как Открыть Стартап В Берлине [Инфографика]
19 Oct, 24 -
Чем Полезен (И Опасен) Окружающий Нас «Шум»
19 Oct, 24 -
Может Быть, Кто-Нибудь Сможет Помочь?
19 Oct, 24 -
Почему Они?
19 Oct, 24 -
Crayon Physics Выйдет В Начале Января.
19 Oct, 24
