Недавно написал скрипт для тестирования сайта.
Суть в чем: взять ссылки из меню по селектору, и обойти их все, сохраняя скриншоты с выбранным разрешением (притом на всю страницу).
Сделано на Puppeteur. Поскольку этим софтом пользуются обычные вебмастера редко, выложу рабочий вариант.
Результат у меня: 96 скриншотов за 3 минуты — руками делать вообще такое долго.
Кто не знает, как пользоваться Puppeteur, полный курс настройки скрипта.
1. Под Виндой ставим node куда-нибудь в папку, я поставил на E:\nodejs добавляем Puppeteur
2. Cоздаем папку проекта в этой же папке.
3. В папке проекта выполняем npm init для создания конфига package.json
4. Создаем js - файл, например index.js и папку для скринов screenshots в проекте
5. Всё, можно запускать из консоли «node index.js»
Погнали наши городских:
Так то вроде ничего сложного, но с нуля разобраться надо день потратить)
Если по приколу смотреть мультики, как реально браузер работает, поменяйте параметр headless: на false
Суть в чем: взять ссылки из меню по селектору, и обойти их все, сохраняя скриншоты с выбранным разрешением (притом на всю страницу).
Сделано на Puppeteur. Поскольку этим софтом пользуются обычные вебмастера редко, выложу рабочий вариант.
JavaScript:
const puppeteer = require('puppeteer');
const fs = require('fs');
function delay(time) {
return new Promise(function(resolve) {
setTimeout(resolve, time)
});
}
async function savePic(url,selector,w,h,dir) {
// Запустим браузер
const browser = await puppeteer.launch({
headless: true,
ignoreHTTPSErrors: true,
//args: [`--window-size=${viewport}`],
defaultViewport: {
width:w,
height:h
}
});
// Откроем новую страницу
const page = await browser.newPage();
const pageURL = url;
//var milliseconds = new Date().getTime();
//var dir = 'screenshots/';
try {
// Попробуем перейти по URL
console.log('Берём ссылки со страницы ',pageURL, ' с селектором ', selector);
await page.goto(pageURL);
} catch (error) {
console.log(`Не удалось открыть
страницу: ${pageURL} из-за ошибки: ${error}`);
} // Найдём все ссылки по селектору
const postsSelector = selector;
await page.waitForSelector(postsSelector, { timeout: 0 });
const postUrls = await page.$$eval(
postsSelector, postLinks => postLinks.map(link => link.href)
);
// Перейдём по каждой из них
for (let postUrl of postUrls) {
try {
console.log('Открываю страницу: ', postUrl);
await page.goto(postUrl,{"waitUntil" : "networkidle0"});
let pagePathname = await page.evaluate(() => location.pathname);
console.log('Перешел по пути:', pagePathname);
pagePathname = pagePathname.replace(/\//g, '_');
await page.screenshot({path: dir+w+'x'+h+pagePathname+'.png', fullPage: true});
} catch (error) {
console.log(error);
console.log('Не удалось открыть страницу: ', postUrl);
}
}
// Всё сделано, закроем браузер
await browser.close();
//process.exit()
};
//Новая папка для каждого теста
let dir = 'screenshots/' + new Date().toISOString().replace(/:/g, '_')+'/';
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir);
}
//Сделать скриншот каждой ссылки в верхнем меню
const siteurl = 'https://mysite.local/';
const selectors = '#menu-main-menu a';
//Старый телефон
savePic(siteurl,selectors,320,480,dir);
//Средний телефон
savePic(siteurl,selectors,480,800,dir);
//Компьютер
savePic(siteurl,selectors,1920,1080,dir);
delay(15000);
Результат у меня: 96 скриншотов за 3 минуты — руками делать вообще такое долго.
Кто не знает, как пользоваться Puppeteur, полный курс настройки скрипта.
1. Под Виндой ставим node куда-нибудь в папку, я поставил на E:\nodejs добавляем Puppeteur
Bash:
npm install --save puppeteer
3. В папке проекта выполняем npm init для создания конфига package.json
4. Создаем js - файл, например index.js и папку для скринов screenshots в проекте
5. Всё, можно запускать из консоли «node index.js»
Погнали наши городских:
Так то вроде ничего сложного, но с нуля разобраться надо день потратить)
Если по приколу смотреть мультики, как реально браузер работает, поменяйте параметр headless: на false
Последнее редактирование: