Отзывчивый кошмар
примечание: если вы предпочитаете учиться с помощью видео, я загрузил одно из них — оно находится внизу этой статьи.
Вы должны извинить меня за «приманочное» название этой статьи, это действительно не было моим намерением, просто в этом было что-то более элегантное, чем «Делать отзывчивые скриншоты сайта с Phantom и Nightmare».
Давным-давно я написал туториал для net-tuts о написании скрипта для создания адаптивных скриншотов с помощью Casper и PhantomJS. Вскоре после того, как это было опубликовано, @paul_irish написал об этом в Твиттере, и я уволился с работы, потому что, давайте посмотрим правде в глаза, если вы делаете или пишете что-нибудь, а Пол Айриш пишет об этом в твиттере, это только вниз.
Я не знаю, когда он был выпущен или даже как я наткнулся на него сегодня, но я увидел Nightmare.js и подумал, что сейчас самое время вернуться к этому руководству и посмотреть, смогу ли я запустить обновленную версию. Почему? Я отвечу на этот вопрос в конце этого.
Для этого я протестировал его на одном из компьютеров Macintosh, я не тестировал его на Windows, но
поскольку сегодня день Windows 10, я обновлю эту статью, как только у меня будет возможность. :)
Давайте создадим новый каталог и запустим что-нибудь.
npm init
Заставит нас работать с Package.json.
Очевидно, у вас также должны быть установлены phantomjs глобально, поэтому
npm install -g phantomjs
а затем мы можем просто установить кошмар локально в проект
npm install --save nightmare
Круто, и мы почти готовы к работе.
Итак, в предыдущем уроке я использовал system.args для получения URL-адреса, переданного из командной строки, я не уверен, почему я сделал это именно так, но на этот раз давайте просто используем
process.argv
process.argv — это массив, содержащий аргументы командной строки, первый — это узел, второй — имя исполняемого JS-файла, а любые следующие элементы массива — это то, через что мы прошли. Итак, мы хотим
var url = process.argv[2] // the third item in the array
ОК, прежде чем я начну добавлять все элементы окна просмотра и углубляться
во что-то еще, для чего мы могли бы использовать Nightmare, я обычно просто хочу убедиться, что у меня работает базовый пример — взломайте свой любимый текстовый редактор (+2 интернет-очка, если вы используете emacs)
var Nightmare = require(‘nightmare’);
var url = process.argv[2];
new Nightmare()
.viewport(1440, 900) //sets up our viewport
.goto(url) // self explainitory
.wait() // You know the internets got weight issues,wait for a bit
.screenshot(‘test/weAreTesting.png’) // take a screenshot, save it here
.run(function(err, nightmare){
console.log(‘Screenshot taken of : ‘ + url);
});
Ладно, открывай свой терминал, давай запустим этого хулигана.
node index.js http://www.reddit.com
Надеюсь, у вас все прошло так же хорошо, как и у меня, и вы получили скриншот.
Таким образом, мы могли бы легко остановиться на этом, но давайте удостоверимся, что, как и раньше, у нас может быть ряд скриншотов с разных размеров области просмотра.
Сначала давайте добавим массив размеров области просмотра — я просто скопировал это из предыдущего урока и не стесняюсь добавлять/изменять там, где это необходимо для вашего проекта.
var viewportSizes = [ [320,480], [320,568], [600,1024], [1024,768], [1280,800], [1440,900] ]
а затем также, как и в предыдущем уроке, давайте возьмем URL-адрес, который мы делаем, и создадим каталог с соответствующим именем, используя магию RegEx.
var saveDir = url.replace(/[^a-zA-Z0–9]/gi, ‘-’).replace(/^https?-+/, ‘’);
Итак, теперь нам нужно пройтись по массиву окон просмотра и сделать скриншот каждого.
viewportSizes.forEach(function(viewport){
new Nightmare()
.viewport(viewport[0], viewport[1])
.goto(url)
.wait(2000)
.screenshot(saveDir + ‘/’ + viewport[0] + ‘-’ + viewport[1] + ‘.png’)
.run(function(err, nightmare){
console.log(‘Taken screenshot of’ + url + ‘at ‘ + viewport[0] + ‘x’ + viewport[1]);
});
});
Теперь при запуске скрипта у вас должна получиться целая куча скриншотов с разными размерами области просмотра.
Мне нравится Nightmare, и у него есть много других функций, которые могли бы сделать его чем-то, что я бы часто использовал для таких вещей, как тестирование пути пользователя, делая скриншоты каждого шага. У него есть несколько других функций, но он не перегружен вещами. Определенно инструмент, который не занял бы слишком много лишнего места в моем наборе инструментов.
Вот видео, если вам так больше нравится.
