В этой статье всего 1451 слово, а время чтения составляет около 4 минут.
Puppeteer — это библиотека nodejs (безголовый браузер) от команды Chrome, одна из ее функций — парсинг веб-страниц (которую можно использовать как краулер).
Подробнее см.gayhub, Цикл обновления около месяца, данная статья написана на базе v1.4.0, грубо говоря апи общий. В этой статье кратко описаны основные способы использования сканера Puppeteer. Моя цель состоит в том, чтобы с помощью этой статьи ежедневное использование поискового робота не требовало чтения.официальная документация.
1. Установка и использование
1.1 Установка
cnpm i -S puppeteerЯ не пытался сообщить об ошибке при установке с помощью cnpm.По умолчанию будет загружена версия puppeteer для Chromium.
1.2 Использование
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({
headless: false, //默认为true（无头），不显示浏览器界面
slowMo :200, //减速显示，有时会作为模拟人操作特意减速
devtools: true //显示开发者工具。页面宽高默认800*600,把开发者工具显示再隐藏页面会占满屏幕，有没有大佬解释下？
});
//生成Page对象
//const page = await browser.newPage();//官网写法：一打开浏览器会打开两个tab，第二个才是你正在操作的tab
const page = (await browser.pages())[0]; //这是我的写法，只有一个tab
await page.goto('https://www.juejin.com'); //跳转到掘金
//请开始你的表演...
await browser.close(); //关闭浏览器
})();
По сути, каждая операция puppeteer возвращает обещание, не забудьте использовать ожидание для получения следующей операции.
Некоторые демо-версии сканера, написанные третьими лицами, также доступны на puppeteer., но он кажется немного более упакованным, поэтому я не буду играть в него первым.
2. Основное использование
2.1 Настройка страницы
Ширина и высота страницы по умолчанию 800*600, что я считаю слишком маленьким. Я обычно сначала инициализирую размер страницы.
Как было сказано выше, это только размер инициализации.Когда инструменты разработчика открываются, а затем скрываются, страница заполняется на весь экран.Не знаю, баг ли это.
await page.setViewport({
width: 1280,
height: 800
});
2.2 Аналоговый вход и нажмите
Визуально нижний слой должен использовать document.querySelector()
await page.type(selector, 'Hello puppeteer'); //找到对应的选择器然后填充值。如果之前设置了slowMo会看到像人打字一样，值是一个一个填进<input/>
await page.click(selector); //模拟点击，这对传统异步分页（url没有分页参数）很有用，selector定在下一页的标签上
2.3 обработка фреймов
Если на веб-странице есть теги, такие как iframe, объект страницы не может быть прочитан в это время.<iframe>Содержимое внутри должно быть использованоpage.frames(). Возвращает массив объектов Frame.
Обычно у iframe есть атрибут имени, и, оценивая атрибут имени, можно быстро получить содержимое одного объекта Frame.
let iframe = await page.frames();
iframe.find(f => f.name() === 'name')
2.4 функция ожидания
Функция waitFor является сокращением для объектов Page и Frame. Я буду использовать только следующие два метода, остальные, пожалуйста, дайте указатели.
Для упрощения API, которые есть и у объектов Page, и у Frame, я не буду их специально объяснять, но они будут напрямую отражены в коде.
await iframe.waitFor（'.contain .item'） //在<iframe>中等待'.contain .item'的节点出现，阻塞结束（ps:优先使用，有时200ms我是等不起的）
await page.waitFor（200）//页面等待200ms
2.5 селектор и эмуляция
Зачем писать вместе? Потому что действительно есть составной API, называемыйeval
Поговорим отдельно.
2.5.1 selector
Визуально нижний слой должен использовать document.querySelector() и document.querySelectorAll(). Для тех, кто знаком с обоими API, должно быть легко начать работу.
//ps:较少用
page.$(selector) // document.querySelector()
iframe.?(selector) // document.querySelectorAll()， ?是All的意思
2.5.2 emulate
Во-первых, здесь есть концепция: краулер puppeteer парсит dom в браузере, а собственно параметры этого апи находятся в браузере. Таким образом, вы можете выполнять операции dom в этой функции, в то время как API локального узла не может работать здесь, запуститеconsole.log(global)сообщит об ошибке.
Например: в функции естьconsole.log('按f12,我出现在浏览器的console中，并不在node命令行')
Вы обнаружите, что не можете увидеть это предложение в командной строке узла, но вы можете увидеть его в консоли Chromium. Поэтому вы должны понимать, что его рабочая среда — это текущий веб-сайт, а не ваш локальный узел.
//ps:更少用
await page.evaluate(el => {
//喜闻乐见的dom操作
})
await iframe.evaluate(el => {
//请开始你的表演
console.log('按f12,我出现在浏览器的console中，并不在node命令行')
})
2.5.3 Настоящий главный герой$evalа также?eval
Вышеупомянутые два API используются вместе, чтобы стать eval, одним из моих наиболее часто используемых API. Один API превосходит два вышеперечисленных, и его удобно писать вместе.
const result = await page.$eval(selector, el => {
//如果需要赋值要返回Promise
return new Promise(resolve => {
//...一波骚操作
//可以用Dom api啦
reslove(obj)
})
});
await iframe.$$eval(selector, el => {...});
2.6 Прослушивание событий
сказано выше вpage.evaluateкитайское использованиеconsoleЕго нельзя вывести в командной строке узла, но это правило можно изменить с помощью событий прослушивания. Вы также можете выполнять отказоустойчивую обработку в событии прослушивателя.
page.on('console', msg => {
console.log(msg);
});
Лично я считаю, если печатать дом, то лучше смотреть в консоль браузера, она интуитивно понятна.
//监听浏览器报错
page.on('pageerror', pageErr => {
console.log(pageErr);
});
//监听node报错
page.on('error', err => {
console.log(err);
});
3. Замаскируйте мобильный терминал
const devices = require("puppeteer/DeviceDescriptors");
const iPhone = devices["iPhone 6"];
...
await page.emulate(iPhone);
Больше устройств можетпроверить здесь
Выше приведен API-интерфейс сканера кукловодов, который я хочу представить.
У Amway есть две книги, одна из нихРегулярные выражения Лао Яо pdf версияОн очень подробный и действительно полезный, хотя я забыл о половине из него (╯﹏╰); другойРуководство по веб-интервью и буклет с анализом часто задаваемых вопросов на экзаменах, содержание является основным и богатым, я надеюсь, что смогу найти возможность попрактиковаться.
Далее я скажубизнес.
Младший брат бездарный, 17-летний выпускник программной инженерии, знаком с vue и написал два проекта компании. В настоящее время он уволился с работы, находится в Гуанчжоу и просит больших парней взять его к себе.