Vytvářejte snímky webových stránek pomocí Node.js a SlimerJS

Minulý týden jsem představil PhantomJS, bezhlavý nástroj WebKit, který umožňuje pořizovat snímky obrazovky, automatizovat události na stránce a tak dále. PhantomJS je vynikající nástroj, který toho umí tolik, ale pokud chcete otestovat jiné vykreslovací moduly, jako je Firefox, nepomůže vám být uzamčen v enginu WebKit. Mo motory, mo problémy.

Naštěstí SlimerJS existuje. SlimerJS je velmi podobný PhantomJS: automatizační systém založený na slibech, který místo WebKitu používá vykreslovací modul Gecko od Firefoxu. Pojďme se podívat na to, jak automatizovat vytváření snímků obrazovky pomocí SlimerJS!

Vytvoření snímku obrazovky

SlimerJS je založen na Node.js, takže kód pro zachycení snímku obrazovky napíšete pomocí JavaScriptu:

var webpage = require('webpage').create();
webpage
  .open('https://davidwalsh.name')
  .then(function(){
    webpage.render('dwb.png', { onlyViewport: true });
    slimer.exit()
  });

S napsaným skriptem provedete:

slimerjs take-screenshot.js

SlimerJS má svůj vlastní nástroj příkazového řádku, který získáte během instalace.

Nastavení velikosti výřezu

SlimerJS, podobně jako PhatomJS, vám umožňuje nastavit výřez, abyste mohli pořizovat snímky obrazovky v jakékoli velikosti:

var webpage = require('webpage').create();
webpage
    .open('https://davidwalsh.name')
    .then(function(){
      webpage.viewportSize = { width: 1042, height: 768 };
      webpage.render('dwb.png', { onlyViewport: true });
      slimer.exit()
    });

... což je důležité i pro testování mobilního Firefoxu. Doporučuji nastavit skript pro pořizování snímků obrazovky ve všech oblíbených velikostech, když předáváte návrhy klientovi nebo chcete jednoduše zkontrolovat integritu svého webu!