logo

Automatizace Google Chrome pomocí Node.js

Věděli jste, že Chrome je nyní dodáván s možností spuštění v bezhlavém režimu? Tato funkce se nazývá Headless Chrome a vývojářům velmi usnadňuje konfiguraci prostředí prohlížeče bez hlavy a spouštění výkonných automatických testů.

V tomto tutoriálu budeme hovořit o jeho různých funkcích a spustíme několik skvělých příkladů. Začněme!

Co je Headless Chrome

Headless Chrome nám umožňuje spouštět prohlížeč z příkazového řádku, aniž bychom ve skutečnosti otevřeli okno Chrome. Prostředí simulovaného prohlížeče má stejné funkce jako běžný Chrome a může načíst jakýkoli web nebo aplikaci, kterou mu přikážeme.

Navíc tu máme velké množství ovládacích prvků pro interakci se stránkou. Můžeme klikat na prvky, simulovat vstup z klávesnice, měnit velikost prohlížeče a mnoho dalšího. Pomocí těchto ovládacích prvků můžeme psát různé užitečné skripty.

Zde je několik příkladů úkolů obvykle prováděných v bezhlavém prostředí:

  • Generujte snímky obrazovky a soubory PDF.
  • Navigace mezi odkazy a stavy aplikace.
  • Automatizujte uživatelské zadávání a testování ověřování formulářů.
  • Seškrabujte data z webových stránek a SPA.
  • Sledujte výkon.

Vzhledem k tomu, že Headless Chrome má spíše nízkoúrovňové API, je lepší k němu přistupovat prostřednictvím knihovny. Pro tento tutoriál použijeme Puppeteer. Projekt je spravován týmem Chrome DevTools a má vynikající API, se kterým se velmi snadno pracuje.

Instalace

Chcete-li používat Puppeteer, musíte mít nainstalovaný Node.js. Jak na to, se dozvíte zde. Všimněte si, že všechny příklady v tomto tutoriálu silně spoléhají na syntaxi async/away. Je k dispozici pouze v novějších verzích Node.js, takže se ujistěte, že používáte verzi vyšší než v7.6.0. 

node --version
v8.3.0

Přejděte do adresáře vašeho projektu, inicializujte npm a nainstalujte Puppeteer. Možná budete potřebovat přístup sudo.

npm init
npm i puppeteer

Instalace může trvat několik minut. Je to proto, že na rozdíl od většiny ostatních frameworků pro bezhlavé testování vám Puppeteer automaticky stáhne verzi Chromia (asi 100 MB). To je vlastně velmi příjemná funkce, protože nebudete muset ručně nastavovat a udržovat místní instanci prohlížeče Chrome.

Vytvořte index.js soubor, na kterém můžeme pracovat, a jsme připraveni jít!

Snímek obrazovky

Pořizování snímků obrazovky pomocí puppeteer je velmi snadné a existuje spousta možností, jak získat přesné výsledky, které potřebujeme. Začneme základním příkladem a na tom budeme stavět.

Níže jednoduše spustíme bezhlavý prohlížeč, otevřeme stránku a uděláme snímek obrazovky veškerého jejího obsahu. 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto('https://tutorialzine.com');
  await page.screenshot({
    path: 'landing-page.png',
    fullPage: true
  });

  browser.close();
})();

Abychom mohli spustit naši aplikaci Puppeteer, zavoláme index.js soubor s uzlem. Ve skutečném projektu budete pravděpodobně potřebovat nějaké skripty npm, které proces ještě více automatizují.

node index.js

Pokud by nebyly žádné chyby, měli bychom mít langing-page.png soubor v našem pracovním adresáři. Ve výchozím nastavení jsou rozměry snímku obrazovky 800 x 600 pixelů, ale protože jsme nastavili fullPage flag to true, náš obrázek má šířku 800px a výšku, která odpovídá veškerému obsahu na stránce.

Při pořizování snímku obrazovky bude Puppeteer simulovat okno prohlížeče s požadovanou šířkou. Pokud je stránka, kterou testujeme, responzivní, získáme snímek toho, jak v dané výřezu vypadá. Jeho rozměry můžeme změnit pomocí metody setViewport.

await page.setViewport({
  width: 1600, 
  height: 1000
});

Pomocí této metody můžeme upravit náš skript tak, aby pořídil více snímků obrazovky různých velikostí zařízení. To nám umožní rychle zjistit, zda odezva naší stránky funguje podle očekávání.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Ann array of viewport sizes for different devices.
  const viewports = [1600, 1000, 800, 600, 500];

  await page.goto('https://tutorialzine.com');

  for(let i=0; i < viewports.length; i++) {
    let vw = viewports[i];

    // The height doesn't matter since we are screenshotting the full page.
    await page.setViewport({
      width: vw,
      height: 1000
    });

    await page.screenshot({
      path: `screen-${vw}.png`,
      fullPage: true
    });
  }

  browser.close();
})();

Spuštěním tohoto skriptu se vygeneruje 5 obrázků, jeden pro každý výřez, který jsme definovali.

S screenshot() můžete dělat mnoho dalších věcí metoda. Můžete zachytit izolovanou část stránky, změnit kvalitu a formát obrázku a další. Podívejte se na dokumenty zde.

Interakce s uživatelským rozhraním

S Puppeteer máme přístup ke všem prvkům na stránce. To zahrnuje veškerý statický obsah, jako je text a obrázky, stejně jako interaktivní prvky, jako jsou odkazy, vstupní pole, tlačítka atd. Pomocí automatických ovládacích prvků můžeme sbírat webové stránky, testovat odkazy a ověřovat formuláře.

Zde je například skript, který načte naši vstupní stránku, otevře vyhledávací formulář a vyhledá výraz „JavaScript“. Tento příklad spustíme s vypnutým bezhlavým režimem, abychom viděli, co se děje.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: false
  });
  const page = await browser.newPage();

  // Open page.
  await page.goto('https://tutorialzine.com');

  // Show search form.
  await page.click('.search-trigger');

  // Focus input field.
  await page.focus('#search-form-top input');

  // Type in query.
  await page.type('JavaScript', {delay: 200});

  // Submit the form.
  const searchForm = await page.$('#search-form-top');
  await searchForm.evaluate(searchForm => searchForm.submit());

  // Keep the browser open.
  // browser.close();
})();

Protože používáme syntaxi async/await, všechny kroky se provedou ve správném pořadí a počkají, až se dokončí.

Závěr

Pokud hledáte způsob, jak automatizovat testy vašeho prohlížeče, Puppeteer je pravděpodobně uživatelsky nejpřívětivější nástroj. Má velmi dobře strukturované API a jasnou, pouze základní dokumentaci, kterou lze velmi snadno sledovat.

Vzhledem k tomu, že Puppeteer je založen na Headless Chrome, nebudete moci testovat žádné jiné prohlížeče než Chrome. Pro automatizaci jiných platforem možná budete chtít vyzkoušet rámec Selenium.