@applitools/eyes-storybook - npm Package Compare versions

Comparing version 3.2.14 to 3.3.0

CHANGELOG.md

@@ -6,2 +6,6 @@ # Changelog
 
+## 3.3.0
+
+- Add `viewportSize` parameter to control the puppeteer browser size ([Trello](https://trello.com/c/lGEGpIZI/237-bad-rendering-of-element-storybook))
+
 ## 3.2.14
@@ -8,0 +12,0 @@

package.json

 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.2.14",
+  "version": "3.3.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "src/eyes-storybook.js",

README.md

@@ -139,2 +139,3 @@ # Eyes-Storybook
 | `showStorybookOutput`     | undefined                   | Whether or not you want to see Storybook output (also available as command-line argument). |
+| `viewportSize`            | { width: 1024, height: 600} | The size of the puppeteer browser's window. This is the browser window which renders the stories originally (and opens at the size provided in the `viewportSize` parameter), and then a DOM snapshot is uploaded to the server, which renders this snapshot on all the browsers and sizes provided in the `browser` parameter.|
 | `exitcode`                | false                       | If tests failed close with non-zero exit code (also available as command-line argument). |
@@ -141,0 +142,0 @@ | `browser`                 | { width: 800, height: 600, name: 'chrome' } | The size and browser of the generated screenshots. For more info and possible values, see the [browser section below](#configuring-the-browser).|

src/defaultConfig.js

@@ -13,2 +13,3 @@ 'use strict';
   waitBeforeScreenshots: 50, // backward compatibility
+  viewportSize: {width: 1024, height: 768},
   tapFilePath: undefined,
@@ -15,0 +16,0 @@ exitcode: true,

src/eyesStorybook.js

@@ -8,2 +8,3 @@ 'use strict';
 const chalk = require('chalk');
+const makeInitPage = require('./initPage');
 const makeRenderStory = require('./renderStory');
@@ -35,2 +36,11 @@ const makeRenderStories = require('./renderStories');
   const {storybookUrl, waitBeforeScreenshot, readStoriesTimeout, reloadPagePerStory} = config;
+
+  let iframeUrl;
+  try {
+    iframeUrl = getIframeUrl(storybookUrl);
+  } catch (ex) {
+    logger.log(ex);
+    throw new Error(`Storybook URL is not valid: ${storybookUrl}`);
+  }
+
   const browser = await puppeteer.launch(config.puppeteerOptions);
@@ -46,4 +56,6 @@ logger.log('browser launched');
 
-  const pagePool = createPagePool({logger, initPage});
+  const initPage = makeInitPage({iframeUrl, config, browser, logger});
 
+  const pagePool = createPagePool({initPage, logger});
+
   const processPageAndSerialize = `(${await getProcessPageAndSerialize()})(document, {useSessionCache: true, showLogs: ${
@@ -60,11 +72,3 @@ config.showLogs
 
-  let iframeUrl;
   try {
-    iframeUrl = getIframeUrl(storybookUrl);
-  } catch (ex) {
-    logger.log(ex);
-    throw new Error(`Storybook URL is not valid: ${storybookUrl}`);
-  }
-
-  try {
     const [stories] = await Promise.all(
@@ -131,41 +135,2 @@ [getStoriesWithSpinner()].concat(
 
-  async function initPage(pageId) {
-    logger.log('initializing puppeteer page number ', pageId);
-    const page = await browser.newPage();
-    if (config.showLogs) {
-      browserLog({
-        page,
-        onLog: text => {
-          if (text.match(/\[dom-snapshot\]/)) {
-            logger.log(`tab ${pageId}: ${text}`);
-          }
-        },
-      });
-    }
-    page.on('error', async err => {
-      logger.log(`Puppeteer error for page ${pageId}:`, err);
-      pagePool.removePage(pageId);
-      const {pageId} = await pagePool.createPage();
-      pagePool.addToPool(pageId);
-    });
-    page.on('close', async () => {
-      if (pagePool.isInPool(pageId)) {
-        logger.log(
-          `Puppeteer page closed [page ${pageId}] while still in page pool, creating a new one instead`,
-        );
-        pagePool.removePage(pageId);
-        const {pageId} = await pagePool.createPage();
-        pagePool.addToPool(pageId);
-      }
-    });
-    const [err] = await presult(page.goto(iframeUrl, {timeout: readStoriesTimeout}));
-    if (err) {
-      logger.log(`error navigating to iframe.html`, err);
-      if (pagePool.isInPool(pageId)) {
-        throw err;
-      }
-    }
-    return page;
-  }
-
   function takeMemLoop() {
@@ -172,0 +137,0 @@ logger.log(memoryLog(process.memoryUsage()));

src/pagePool.js

 'use strict';
 
-function createPagePool({logger, initPage}) {
+function createPagePool({initPage, logger}) {
   let counter = 0;
@@ -8,3 +8,3 @@ const fullPageObjs = [];
   let currWaitOnFreePage = Promise.resolve();
-  return {
+  const pagePool = {
     getFreePage,
@@ -34,2 +34,4 @@ createPage: async () => {
 
+  return pagePool;
+
   async function getFreePage() {
@@ -58,3 +60,3 @@ logger.log(`[page pool] waiting for free page`);
     let createdAt;
-    const page = await initPage(pageId);
+    const page = await initPage({pageId, pagePool});
     return {
@@ -61,0 +63,0 @@ page,

No alert changes

Improved metrics

Total package byte prevSize

234614

increased by0.45%

Number of package files

45

increased by2.27%

Lines of code

2362

increased by0.51%

Number of lines in readme file

455

increased by0.22%

No dependency changes