Библиотека Node.js Общий API Puppeteer и сводка операций

Node.js

Управляемое чтение

Эта статья в основном используется для сбора и сортировки часто используемыхPuppeteerНекоторые общие операции API, автоматизированные операции, тестирование сканера, базовое использование и т. д. Конечно, чтоPuppeteerЧто ж, давайте взглянем на официальное введение:PuppeteerЭто официальный продукт Google.DevToolsУправление протоколомheadless ChromeизNodeбиблиотека. Вы можете напрямую управлять Chrome для имитации большинства пользовательских операций через API, предоставляемый Puppeteer.UI TestИли посещайте страницы в качестве сканера для сбора данных.

在这里插入图片描述

Сначала обратите внимание на адрес документа китайского API:Нажмите, чтобы открыть API документации на китайском языке Puppeteer для просмотра URL-адреса доступа.Официальный адрес документа API:GitHub.com/Google CHROM…Относительно хорошая ссылка на документацию для новичков:«Вводный урок кукловода» молодого поколения пролетарских фермеров-кодовиков.

Окружающая среда и установка

cnpm i puppeteer -S

При установке нужно обратить внимание на деши,PuppeteerУстановка поставляется с последней версией Chromium, которую можно установить, установив переменные среды или в конфигурации npm.PUPPETEER_SKIP_CHROMIUM_DOWNLOADПропустить загрузку. Если вы не загружаете его, вы можете передать его в элементе конфигурации puppeteer.launch([options]) при запуске.executablePathУказывает расположение Chromium.

основное использование

Мы можем работатьBrowserЭкземпляры используются для управления браузером для выполнения соответствующих действий, таких как создание страниц, создание снимков экрана окон, создание файлов PDF (текст может быть скопирован), получение данных страницы и т. д. Это можно сделать.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');
  await page.screenshot({path: 'example.png'});
  await page.pdf({path: 'example.pdf', format: 'A4'});
  await browser.close();
})();

Конечно, мы также можем добавитьheadless:true, мы можем выполнять различные операции, не открывая браузер.Фоновая операция по умолчанию выглядит следующим образом:

const browser = await puppeteer.launch({headless:false})

new browser.newPage(): этот метод может открыть новую вкладку и вернуть страницу экземпляра вкладки.Обычные операции могут выполняться на странице с помощью различных методов на странице. Приведенный выше код делает снимки экрана и печатает PDF.

在这里插入图片描述
Конечно, чаще всего используется динамическая имплантация JS-скриптов, манипулирование элементами на странице и получение некоторой информации, так как же нам этого добиться? мы можем использоватьpage.evaluate(pageFunction, ...args)Для этого вставьте нашу пользовательскую функцию на страницу:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://rennaiqian.com');

  // Get the "viewport" of the page, as reported by the page.
  const dimensions = await page.evaluate(() => {
    // 在这里可以进行DOM操作
    return {
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight,
      deviceScaleFactor: window.devicePixelRatio
    };
  });
  console.log('Dimensions:', dimensions);
  await browser.close();
})();

реализация, связанная с поисковым роботом

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

1. Аналоговое коммутационное устройство

Эти операции в основном должны идентифицировать текущее устройство, так как же нам имитировать наше текущее устройство? мы можем пройтиpage.emulate(mobile)Для моделирования устройства нам понадобится следующее:

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors'); // puppeteer内置的一些常见设备的模拟参数
const iPhone = devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.example.com');
  // other actions...
  await browser.close();
});

2. Нажмите на аналоговый вход

использоватьpuppeteerБольшая часть детской обуви это бег, автоматизированное тестирование, использование скриптов для автоматического манипулирования содержимым страницы и обход динамически загружаемых веб-страниц, поэтому вся функция имитации ввода по клику очень важна и очень удобна, очень похожа наseleniumФреймворк, но он гораздо проще, чем этот фреймворк, его можно использовать сразу после установки, ну и давайте посмотрим, чем же завершается этот клик-ввод?

Прежде всего, нам нужно классифицировать ввод по клику на операции ==keyboard== и ==mouse==.Тогда давайте посмотрим, какие существуют операции с клавиатурой и мышью?

2-1. Работа с клавиатурой

Сначала мы перечислим некоторые часто используемые API, а затем перечислим некоторые часто используемые небольшие случаи:

  • keyboard.down(key[, options]): вызвать событие нажатия клавиши
  • keyboard.press(key[, options]): нажмите клавишу, клавиша представляет собой название клавиши, например «Стрелка влево», подробное сопоставление имени клавиши * нажмите здесь
  • keyboard.sendCharacter(char): введите символ
  • keyboard.type(text, options): введите строку
  • keyboard.up(key): вызвать событие keyup

Ниже показаны некоторые часто используемые малые случаи:

page.keyboard.press("Shift"); //按下 Shift 键
page.keyboard.sendCharacter('嗨'); // 输入一个字符
page.keyboard.type('Hello'); // 一次输入完成
page.keyboard.type('World', {delay: 100}); // 像用户一样慢慢输入

2-2. Работа с мышью
  • mouse.click(x, y, [options]): переместите указатель мыши в указанное положение, а затем нажмите кнопку мыши, на самом деле это операция быстрого доступа к командам mouse.move и mouse.down или mouse.up.
  • mouse.down([options]): запускать событие mousedown, параметры можно настроить:
    • options.button, какая клавиша нажата, необязательное значение [left, right, middle], по умолчанию — left, что означает левая кнопка мыши
    • options.clickCount количество нажатий, щелчков, двойных щелчков или других раз
    • кнопка задержки время задержки
  • mouse.move(x, y, [options]): Переместите мышь в указанную позицию, options.steps указывает размер шага перемещения.
  • mouse.up([options]): вызвать событие mouseup

3. Измените конфигурацию работы браузера.

В процессе работы нашего сканера мы часто сталкиваемся с различными проблемами заголовков запросов, и самая распространенная из них —user-agentДождитесь этих параметров, поэтому, если мы сможем напрямую изменить эти конфигурации, мы сможем обеспечить хорошую работу сканера.puppeteerТакже предоставляет нам некоторыеAPIДавайте изменим конфигурацию терминала браузера:

  • Page.setViewport(): изменить размер окна браузера.
  • Page.setUserAgent(): установить информацию UserAgent браузера
  • Page.emulateMedia(): Изменение типа СМИ CSS страницы для моделирования аналогового носителя. Дополнительное значение - «Экран», «Print», «NULL», если установлено значение NULL, укажите симуляцию носителя отключенного носителя.
  • Page.emulate(): Имитируйте устройство, параметры устройств, такие как iPhone, Mac, Android и т. д., поднимайтесь на страницу H5, это очень легко использовать для личного тестирования.

Далее, давайте взглянем на некоторые часто используемые малые случаи:

page.setViewport({width:1920, height:1080}); //设置视窗大小为 1920x1080
page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36');
page.emulateMedia('print'); //设置打印机媒体样式

Кроме того, мы также можем имитировать устройства, отличные от ПК, например, следующий код для имитацииiPhone 6Посетите Байду:

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

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.baidu.com');
  // other actions...
  await browser.close();
});

4. Получить элементы страницы

Здесь давайте обсудим, как использоватьpupeteerполучить элементы страницы, а также содержимое и атрибуты в элементах, потому что это тоже очень и очень часто используемая операция, но предполагается, что все с ней знакомы, поэтому я объясню ее позже;

4-1. Получить узел элемента страницы

(1) Page.$(selector)Чтобы получить один элемент, нижний слой называетсяdocument.querySelector(), поэтому селекторselectorформат для подражанияcssспецификация селектора

let inputElement = await page.$("#search", input => input);
//下面写法等价
let inputElement = await page.$('#search');

(2) Page.?(selector)Получите набор элементов, базовый вызовdocument.querySelectorAll(). вернутьPromise(Array(ElemetHandle))массив элементов.

const links = await page.?("a");
//下面写法等价
const links = await page.?("a", links => links);
4-1. Получить атрибуты элементов страницы

PuppeteerЛогика получения атрибутов элемента немного отличается от js, который мы обычно пишем в предыдущем абзаце, по обычной логике мы должны получить элемент сейчас, а потом получить атрибуты элемента. Но выше мы знаем, что API для получения элементов в итоге возвращает всеElemetHandleобъект, и если вы посмотрите на API ElemetHandle, вы обнаружите, что у него нет API для получения атрибутов элемента.

а такжеPuppeteerОн предоставляет набор API для получения свойств,Page.$eval()а такжеPage.?eval()

const value = await page.$eval('input[name=search]', input => input.value);
const href = await page.$eval('#a", ele => ele.href);
const content = await page.$eval('.content', ele => ele.outerHTML);

5. Выполните собственный JS-скрипт

Выполнение пользовательских скриптов также является одной из наиболее часто используемых функций в краулерах в настоящее время. Получение подписи интерфейса с помощью пользовательских скриптов и т. д. - очень хороший способ сканирования. Что ж, давайте посмотрим вместе. Как динамически имплантировать пользовательские скрипты на страницы?

PuppeteerизPageОбъект предоставляет ряд методов оценки, с помощью которых вы можете выполнить некоторый пользовательский код js, в основном предоставляя следующие три API.

5-1.page.evaluate(pageFunction, …args)

этоpage.evaluateВозвращает сериализуемый обычный объект, pageFunction представляет функцию, которая будет выполняться на странице,argsУказывает на входящийpageFunction, следующие pageFunction и args означают одно и то же.

const result = await page.evaluate(() => {
	return Promise.resolve(8 * 7);
});
console.log(result); // 56

5-2. Page.evaluateHandle(pageFunction, …args)

этоevaluateHandleВыполняет функцию pageFunction в контексте страницы, возвращая сущность JSHandle.

const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window));
aWindowHandle; // Handle for the window object. 

const aHandle = await page.evaluateHandle('document'); // Handle for the 'document'.

Следующий код реализует динамический HTML-код для получения страницы (включая элементы, динамически вставляемые с помощью js):

const aHandle = await page.evaluateHandle(() => document.body);
const resultHandle = await page.evaluateHandle(body => body.innerHTML, aHandle);
console.log(await resultHandle.jsonValue());
await resultHandle.dispose();

5-3. Page.exposeFunction

Page.exposeFunction, этот API используется для регистрации глобальных функций на странице, что очень полезно: Потому что иногда вам нужно использовать некоторые функции, когда страница обрабатывает некоторые операции, хотя вы можете передатьPage.evaluate()API определяет функции на странице. Например, следующий код реализует добавление функции md5 к объекту окна контекста страницы:

const puppeteer = require('puppeteer');
const crypto = require('crypto');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('console', msg => console.log(msg.text));
  await page.exposeFunction('md5', text =>
    crypto.createHash('md5').update(text).digest('hex')
  );
  await page.evaluate(async () => {
    // use window.md5 to compute hashes
    const myString = 'PUPPETEER';
    const myHash = await window.md5(myString);
    console.log(`md5 of ${myString} is ${myHash}`);
  });
  await browser.close();
});

Как можно заметить,Page.exposeFunction APIЭто очень удобно в использовании и очень полезно, например,windowрегистрация объектаreadfileГлобальная функция:

const puppeteer = require('puppeteer');
const fs = require('fs');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('console', msg => console.log(msg.text));
  await page.exposeFunction('readfile', async filePath => {
    return new Promise((resolve, reject) => {
      fs.readFile(filePath, 'utf8', (err, text) => {
        if (err)
          reject(err);
        else
          resolve(text);
      });
    });
  });
  await page.evaluate(async () => {
    // use window.readfile to read contents of a file
    const content = await window.readfile('/etc/hosts');
    console.log(content);
  });
  await browser.close();
});

6. Дождаться исполнения

Ожидание выполнения соответствующего API в основном состоит изPage.waitForПри условии

  • page.waitFor(selectorOrFunctionOrTimeout[, options[, …args]]), следующие три интегрированных API
  • page.waitForFunction(pageFunction[, options[, …args]]), после ожидания завершения выполнения pageFunction
  • page.waitForNavigation(options), дождитесь загрузки основных элементов страницы, таких как синхронный HTML, CSS, JS и другой код
  • page.waitForSelector(selector[, options]), ожидая загрузки элемента селектора, этот элемент может быть загружен асинхронно, этот API очень полезен, знаете ли.

Например, если я хочу получить элемент, который загружается асинхронно через js, получить его напрямую точно невозможно. В это время вы можете использоватьpage.waitForSelectorрешать:

await page.waitForSelector('.gl-item'); //等待元素加载之后，否则获取不到异步加载的元素
const links = await page.?eval('.gl-item > .gl-i-wrap > .p-img > a', links => {
	return links.map(a => {
		return {
			href: a.href.trim(),
			name: a.title
		}
	});
});

7. Автоматизированное веб-тестирование производительности

пройти черезpage.getMetrics()Доступны некоторые данные о производительности страницы, чтобы зафиксировать хронологию веб-сайта, чтобы помочь диагностировать проблемы с производительностью.

  • Временная метка Временная метка, в которую была выбрана метрика
  • Документы стр. количество документов
  • Номер кадра на странице кадров
  • JSEventListeners Количество прослушивателей событий на странице
  • Узлы Количество узлов DOM на странице.
  • LayoutCount Общее количество макетов страниц.
  • Счетчик пересчета стиля RecalcStyleCount
  • LayoutDuration Общая продолжительность всех макетов страниц.
  • RecalcStyleDuration Общая продолжительность всех перерасчетов стиля страницы.
  • ScriptDuration продолжительность выполнения всех скриптов
  • TaskDuration — продолжительность всех задач браузера.
  • JSHeapUsedSize Размер занятой кучи JavaScript
  • JSHeapTotalSize общая куча JavaScript

Суммировать

В основном,puppeteerэто очень хорошоheadlessИнструменты, простые в эксплуатации и мощные. Это очень хорошо для тестирования автоматизации пользовательского интерфейса и некоторых небольших инструментов.

Категории