Скрипт для скриншотов на Puppeteur

  • Автор темы Автор темы Den1xxx
  • Дата начала Дата начала

Den1xxx

Разрушитель (V)
Сообщения
135
Реакции
71
Баллы
1 084
Недавно написал скрипт для тестирования сайта.
Суть в чем: взять ссылки из меню по селектору, и обойти их все, сохраняя скриншоты с выбранным разрешением (притом на всю страницу).
Сделано на 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);
node_make_screenshot.png
Результат у меня: 96 скриншотов за 3 минуты — руками делать вообще такое долго.
Кто не знает, как пользоваться Puppeteur, полный курс настройки скрипта.
1. Под Виндой ставим node куда-нибудь в папку, я поставил на E:\nodejs добавляем Puppeteur
Bash:
npm install --save puppeteer
2. Cоздаем папку проекта в этой же папке.
3. В папке проекта выполняем npm init для создания конфига package.json
4. Создаем js - файл, например index.js и папку для скринов screenshots в проекте
5. Всё, можно запускать из консоли «node index.js»
Погнали наши городских:
node_test_site.png
Так то вроде ничего сложного, но с нуля разобраться надо день потратить)
Если по приколу смотреть мультики, как реально браузер работает, поменяйте параметр headless: на false
 
Последнее редактирование:
Назад
Верх