Full Page Screenshot of a Website

Teljes képernyő mentése weboldalról

Siralmak

A Selenium Webdriver képernyőmentési interface-nek megváltozásával keresztbe húzták jó pár tesztelő számítását. Sajnos WebElement-eknek hiába van képernyőmentési interface-e, gyakorlatilag nem működik. Jó pár hajszálam ment rá mire egy kolléga rájött a megoldásra.

Környezet és megoldás

Idén úgy döntöttünk, hogy a QA csapat által használt nyelv JavaScript lesz és kihasználjuk a Node.js futtatási környezet előnyeit (illetve hátrányait). Ezért el kezdtük használni a Puppeteer megoldását. Ott is a képernyőmentés teljesen esetlegesen működött, míg nem találtunk egy workaroud-ot. Hosszan ecsetelhetném, hogy miket próbáltunk ki (pl. figyeltük, hogy a document.images mind betöltődött-e, stb.), de aztán a megoldás az lett, hogy 2x egymás után kell csinálni képernyőmentést, és a második az esetek 99%-ban jó lesz...

Korlátok

A webelement-ek esetén ez a móka sajnos nem működik, de egy kis képmetszés és már a webelement-ekről is vannak szép képernyőmentéseink. Fontos korláta a dolognak, hogy a setViewport metódusnak olyan beállítást adunk, amely triggerelné a chromium készülék emulációját, akkor ez a workaround sem működik...

Példa Kód

const puppeteer = require("puppeteer");
const url = "http://index.hu";

const viewport = { width: 250 };

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

  await page.goto(url, {
    waitUntil: "networkidle2"
  });

  await page.setViewport(Object.assign(page.viewport(), viewport));

  await page.screenshot({
    path: `./scnapshot-${Date.now()}-${viewport.width}x${
      viewport.height
    }.jpeg`,
    type: "jpeg",
    fullPage: true
  });

  await page.screenshot({
    path: `./scnapshot-${Date.now()}-${viewport.width}x${
      viewport.height
    }.jpeg`,
    type: "jpeg",
    fullPage: true
  });

  await page.close();
  await browser.close();
})();

Remények

• Jó lenne, ha a Webelement-eken működne a képernyőmentési interface, mert jó lenne ha több böngészőn is tudnánk snapshot jellegű tesztelést végezni
• Én annak is örülnék, ha újra az összes böngésző a teljes képet renderelné ki képernyőmentés esetén...
• De ha a Yandex aShot megoldása is működne, annak is nagyon örülnék...