Первый взгляд Puppeteer на автоматизированное тестирование переднего плана

автор:Линь Конгюань

Введение:Большинство вещей, которые вы можете сделать вручную в браузере, можно сделать с помощью Puppeteer!

Знакомство с кукольником

Кукловод-переводчик — это кукловод, а с помощью этого инструмента мы можем быть манипулятором страницы. puppeteer — это библиотека nodejs, которая поддерживает вызов API Chrome для манипулирования сетью. По сравнению с Selenium или PhantomJs, ее самая большая особенность заключается в том, что ее работа Dom может быть полностью смоделирована в памяти, которая обрабатывается в движке V8 без открытия браузера. ключ в том, что это поддерживается командой Chrome и будет иметь лучшую совместимость и перспективы.

функция кукольника

1. Используйте веб-страницу для создания PDF и изображений
2. Просканируйте приложение SPA и сгенерируйте предварительно отрендеренный контент (т.е. рендеринг на стороне сервера "SSR").
3. Может собирать контент с веб-сайтов
4. Автоматизируйте отправку форм, тестирование пользовательского интерфейса, ввод с клавиатуры и т. д.
5. Помочь вам создать актуальную автоматизированную тестовую среду (chrome), в которой вы можете напрямую запускать тестовые случаи.
6. Запишите временные рамки сайта, чтобы отслеживать его и анализировать проблемы с производительностью сайта.

Установить кукловод

yarn add puppeteer
# or "npm i puppeteer"

Вы можете столкнуться с проблемой невозможности скачать Chromium

Это связано с тем, что в процессе установки необходимо выполнить install.js. Chromium будет загружен здесь. Официальный сайт рекомендует пропустить. Мы можем выполнить --ignore-scripts, чтобы игнорировать это выполнение js.

./node/npm i --save puppeteer --ignore-scripts

Далее нам нужно скачать Chromium, я уже скачал версию для Windows здесь, просто разархивируйте вложение и поместите его в node_modules/puppeteer.

Выполняем, создаем файл index.js, содержимое файла

const puppeteer = require('puppeteer');

(async () => {
      const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://y.qq.com');
    await page.screenshot({path: 'yqq.png'});
    browser.close();
})();

Этот код откроетy.qq.comи делаем скриншот, запускаем

node  index.js

Если вы видите сгенерированное изображение y.qq.png в каталоге, поздравляем, можно приступать к продолжению обучения кукловоду.

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

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

Сначала создаем устройство, в документе (GitHub.com/Google CHROM…)
Мы видим, что устройств, поддерживаемых по умолчанию, по-прежнему много.Помимо этих устройств по умолчанию, мы также можем настроить свои собственные устройства, о которых будет сказано позже при вызове метода emulate:

Здесь мы временно создаем устройство iphone6, предоставленное системой, а затем определяем функцию отложенного тайм-аута.

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];
let timeout = function (delay) {
     return new Promise((resolve, reject) => {   
           setTimeout(() => {   
                  try {
                      resolve(1)
                  } catch (e) {
                      reject(0)
                   }
           }, delay);
     })
 }

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

 const browser = await puppeteer.launch({
      headless:false //这里我设置成false主要是为了让大家看到效果，设置为true就不会打开浏览器
 });

 const page = await browser.newPage();

После создания экземпляра браузера нам нужно смоделировать страницу как iphone 6. Здесь также можно настроить параметры функции эмуляции.

await page.emulate(iPhone);
参数:
 {
    'name': 'Galaxy S5', //设备名
    'userAgent': 'Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36', //UA
    'viewport': {
      'width': 360,//屏幕宽度
      'height': 640,//屏幕高度
      'deviceScaleFactor': 3,//缩放比例
      'isMobile': true,//是否是移动设备
      'hasTouch': true,//是否支持touch事件
      'isLandscape': false//是否横屏
    }
  }

Что ж, тогда мы можем написать наши тестовые шаги.

Шаг 1: Открываем страницу, учитывая, что есть данные, которые нужно загрузить асинхронно, вызываем метод скриншота после задержки в 1000 мс и сохраняем скриншот для лога.

console.log("进入页面");
await page.goto('https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2210323&g_f=tuijiannewupload#index/fans');
await timeout(1000);
await page.screenshot({
     path: '1.png'
 });

Шаг 2: Смоделируйте триггер и нажмите кнопку «Купить сейчас».В это время будет открыт вход в QQ, поскольку нет состояния входа.

console.log("点击立即购买按钮");
await page.tap('.js_sale_buyalbum');
await page.screenshot({
    path: '2.png'
 });

Шаг 3: Введите пароль учетной записи в поле ввода. Чтобы имитировать ввод, нам нужно вызвать метод tap для имитации нажатия на поле ввода. Параметр tap — это селектор элемента, а затем используйте метод type для ввода. После ввод завершен, нажимаем кнопку входа для имитации входа.скриншоты задерживаем на некоторое время, и если все пройдет хорошо, то можем вернуться на предыдущую домашнюю страницу страницы продаж, а также отображается нижний usrbar из-за состояние входа.

console.log("登录");
await page.tap("#u"); //直接操作dom选择器，是不是很方便
await page.type("521017853");

await page.tap("#p");
await page.type("*********");//这里密码就不展示了哈

await page.tap("#go");

await timeout(3000);

await page.screenshot({
     path: '3.png'
});

console.log("登录成功");

Шаг 4: Как и в первом шаге, нажмите кнопку «Купить сейчас», появится плавающий слой с возможностью покупки, а затем нам нужно загрузить Master Mi после нажатия «Оплатить сейчас», поэтому здесь мы задержим 5000 мс.

//点击购买
console.log("点击立即购买按钮");
await page.tap('.js_sale_buyalbum');

await page.screenshot({
    path: '4.png'
});

console.log("点击支付浮层上的立即支付");
await page.tap(".js_buyalbum_pay");

await timeout(5000);

Шаг 5: После подтягивания Master Mi для оплаты плавающего слоя нам нужно нажать кнопку ОК в приглашении.Поскольку Master Mi открыт в iframe, нам нужно сначала получить наш текущий фрейм страницы, который можно назвать только что созданным .Метод mainFrame() страницы экземпляра страницы можно получить.Если нам нужно получить дочерний фрейм, нам нужно только вызвать childFrames для его получения. После получения кадра, соответствующего мастеру Ми, вы можете вызвать метод jquery midas_frame.$(selector) для получения элемента, а затем имитировать щелчок.

console.log("进入 米大师支付浮层")
await page.screenshot({
     path: '5.png'
});

let $frame = page.mainFrame();
let midas_frame = $frame.childFrames()[0];//获取到midas对应的frame

console.log("点击确定 米大师支付浮层测试环境提示 的确认按钮");
let $dom = await midas_frame.$(".fusion-pm-fl-wrapper .fpm-default");
await $dom.tap();

await page.screenshot({
    path: '6.png'
});

Шаг 6: Нажмите на монету Q, чтобы заплатить

console.log("点击 米大师支付浮层 确认支付按钮");
$dom = await midas_frame.$("#wrap .fpm-default");
await $dom.tap();

await timeout(5000);

await page.screenshot({
    path: '7.png'
});

Шаг 7: Нажмите «Готово», чтобы перейти на страницу с табличкой.После завершения теста закройте экземпляр браузера.

console.log("点击 米大师支付浮层 支付完成");
$dom = await midas_frame.$("#wrap .btn-primary");
await $dom.tap();

await timeout(2000);

console.log("已购铭牌页");
await page.screenshot({
     path: '8.png'
});
browser.close();

Наконец, в каталоге проекта мы видим, что скриншоты каждого шага созданы.

Испытайте вторую демонстрацию, определение производительности страницы Puppeteer Trace API

Trace API в основном использует Chrome Performance для создания файла trace.json для отслеживания производительности страницы и загрузки файла в инструмент разработчика Chrome для анализа графика пламени внутри.
Код дела:

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const iPhone = devices['iPhone 6'];

(async () => {
        const browser = await puppeteer.launch();

        const page = await browser.newPage();

        await page.emulate(iPhone);

        await page.tracing.start({path: './trace.json'});
        await page.goto('https://y.qq.com/m/digitalbum/gold/index.html?_video=true&id=2210323&g_f=tuijiannewupload#index/fans');
        await page.tracing.stop();

        browser.close();
    } catch (e) {
        console.log(e.message);
    }
})();

Прежде всего, этот код выполняет симуляцию iphone6, чтобы открыть цифровую страницу продаж «Danning Perseverance» Джей Джей Лина и анализирует производительность. В основном используйте tracing.start, остановитесь, чтобы сгенерировать файл trace.json

trace.json

Затем мы открываем инструмент разработчика Chrome, заходим в раздел «Производительность» и перетаскиваем TRACE.JSON, чтобы просмотреть данные.

Суммировать

Из приведенных выше двух примеров видно, что puppeteer может выполнять автоматизированное тестирование пользовательского интерфейса и тестирование производительности страницы.На самом деле, его функции намного шире.Например, он также может быть сканером для сканирования статей на github или блогов на Nuggets. .Короче, это моя первая попытка, и определенно будет больше функций, которые можно открыть.Я надеюсь, что вы можете общаться больше.

Связанное Чтение