На недавнем задании автоматизации QA моей команде необходимо быстро создать и развернуть некоторые базовые тесты на дым пользовательского интерфейса для предприятия веб -приложения. После некоторой дискуссии мы решили пойти с кукловодом. Это моя первая экспозиция кукловодам, и я хочу поделиться тем, что я узнал до сих пор.
Так что же такое кукольник? Кукольник-это библиотека узлов с открытым исходным кодом, которая предоставляет API высокого уровня, который позволяет разработчику автоматизации управлять браузером через Dev Tool Protocol Анкет
Первый шаг к изучению функций кукловода — это установить его, так что давайте начнем!
Настройка кукловода
npm i puppeteer
И вот и! Как только вы успешно установите кукольник, вы также загрузили версию Chromium, которая гарантированно будет работать с установленными API -интерфейсом кукловода.
Если вам не нужна накладная часть этой загрузки и вы хотите проверить с существующей установкой Chrome, вы можете вместо этого установить кукольный ядер. Просто убедитесь, что версия браузера, к которой вы планируете подключиться, совместима с версией кукольного, который вы устанавливаете, которая находится в кукловом Package.json файл.
Сделать скриншот
Теперь мы готовы создать наш первый тест, и мы начнем с чего -то основного. Для этого теста мы откроем браузер, перейдем к ведущей домашней странице Edje, сохраните скриншот страницы и закроем браузер.
Создайте новую папку для ваших тестов, а затем создайте новый файл с именем scenshot.js:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setViewport({ width: 1680, height: 1050 })
await page.goto('http://leadingedje.com', {waitUntil: 'networkidle2'});
await page.screenshot({path: 'le-screenshot.png'});
await page.pdf({path: 'le-screenshot.pdf'});
await browser.close();
})();
Если вы знакомы с другими фреймворками автоматизации пользовательского интерфейса, все это, вероятно, выглядит знакомо. Мы открываем браузер, переопределяем разрешение по умолчанию 800×600, перейдем к странице, зафиксируем скриншот, затем закрываем браузер. Мы также делаем скриншот как в формате PNG, так и в PDF с 2 строками кода.
Это код, так что теперь давайте запустим его!
node screenshot.js
Если это работает успешно, вы не должны видеть ошибок в командной строке, и новые файлы, созданные с именем Le-Screenshot.png и Le-Screenshot.pdf. Откройте файл PDF и обратите внимание на получение полной страницы.
То, что вы не увидите, это открытие браузера. Это связано с тем, что по умолчанию кукольник запускается без головы, что необходимо при запуске в качестве автоматического процесса CI. Если вы хотите увидеть браузер в действии, просто установите опцию без головы при запуске браузера:
const browser = await puppeteer.launch({headless: false});
Автоматизация поиска Google
Давайте создадим еще один тест и назовите его Google.js:
const puppeteer = require('puppeteer');
const { expect } = require('chai');
// puppeteer options
const opts = {
headless: false,
slowMo: 100,
timeout: 10000
};
(async () => {
const browser = await puppeteer.launch(opts);
const page = await browser.newPage();
await page.setViewport({ width: 1680, height: 1050 })
await page.goto('https://www.google.com', {waitUntil: 'networkidle2'});
await console.log('search page loaded');
const searchTextbox = await page.waitFor('input[name=q]');
await searchTextbox.type('meeseek');
await page.keyboard.press('Enter');
const [response] = await Promise.all([
page.waitForNavigation(),
page.once('load', () => console.log('meeseek results page loaded'))
]);
expect(await page.title()).to.contain('Google Search');
await page.screenshot({path: 'meeseek.png'});
await browser.close();
})();
С помощью этого теста мы перемещаемся на Google.com, выполняем поиск, ожидая результатов и подтверждая заголовок страницы результатов.
Кроме того, мы замедляем тест на 100 мс для каждой операции, используя опцию Slomo при запуске браузера. Это может быть полезно, если у вас есть быстрый запущенный тест и вы хотите быть уверенным, что все взаимодействие браузера.
Мы также установили тайм -аут на 10000 мс. Любой тест, который тест дольше, чем 10 секунд, потерпит неудачу.
Трассировка производительности
Для нашего последнего примера мы собираемся отойти от базовой автоматизации пользовательского интерфейса и использовать кукольник, чтобы получить информацию о трассировке производительности.
Вкладка Performance в инструментах Chrome Dev позволяет записывать критические показатели производительности браузера при перемещении по своему веб -сайту. С этими показателями вы можете устранить проблемы с производительностью, анализируя, что Chrome делает под капюшоном, чтобы отобразить ваш сайт.
Мы собираемся немного изменить наш пример Google, чтобы автоматически захватить трассировку во время автоматического теста. Оттуда мы можем загрузить этот трассировочный файл в инструменты Chrome Dev и посмотреть, что на самом деле происходит во время нашего теста.
Создайте новые имена файлов trace.js:
const puppeteer = require('puppeteer');
// puppeteer options
const opts = {
headless: false
};
(async () => {
const browser = await puppeteer.launch(opts);
const page = await browser.newPage();
await page.setViewport({ width: 1680, height: 1050 })
await page.tracing.start({path: 'trace.json',screenshots:true});
for (i = 0; i < 10; i++) {
await page.goto('https://www.google.com', {waitUntil: 'networkidle2'});
await console.log('search page loaded');
const searchTextbox = await page.$('input[type=text]');
await searchTextbox.type('meeseek box');
await page.keyboard.press('Enter');
await Promise.all([
page.once('load', () => console.log('meeseek results page loaded'))
]);
await page.screenshot({path: 'meeseek.png'});
}
await page.tracing.stop();
await browser.close();
})();
Для этого теста мы пробираемся через наш поиск в Google 10 раз, но, что более важно, мы начинаем трассировку перед автоматизацией с линией:
await page.tracing.start({path: 'trace.json',screenshots:true});
С помощью этой строки кода мы будем создавать файл Trace.json всего автоматизированного сеанса, включая печатные издания. Оттуда мы можем загрузить этот файл в инструменты Chrome Dev и вручную не устранить неисправности, или автоматизировать дальнейшее аналитическое аналитическое значение, программно и активно определяя проблемы с производительностью.
Вот как выглядит файл трассировки, когда я вручную загружаю его в Chrome:
Вывод
Хотя кукольник предоставляет функциональность, аналогичную селене, он не предназначен для замены. Selenium предоставляет один общий API для выполнения автоматизации браузеров во всех основных браузерах. Кукольник нацелен только на хром и хром, и его сильные стороны включают более широкий набор услуг и архитектуру, управляемую событиями, которая позволяет меньше тестовых хлопьев и неудач.
Не стесняйтесь взглянуть на мой GitHub Project Это содержит все эти примеры. Дайте кукловоду тестируемое драйв и сделайте хромированный танец!
Оригинал: «https://dev.to/leading-edje/pulling-strings-with-puppeteer-2ho»