@applitools/eyes-storybook 3.25.3 → 3.27.1

package/CHANGELOG.md

@@ -2,9 +2,38 @@
 
 ## Unreleased
 
+
+## 3.27.1 - 2021/12/21
+
+- add support for storybook api 6.4
+- updated to @applitools/driver@1.4.5 (from 1.3.5)
+- updated to @applitools/eyes-sdk-core@12.24.7 (from 12.24.5)
+- updated to @applitools/logger@1.0.7 (from 1.0.6)
+- updated to @applitools/test-server@1.0.8 (from 1.0.7)
+- updated to @applitools/visual-grid-client@15.8.53 (from 15.8.49)
+
+## 3.27.0 - 2021/12/6
+
+- support custom properties and query params
+- remove `queryParams` api from story and global config
+
+## 3.26.1 - 2021/11/28
+
+- add custom test properties to stories with query params
+
+## 3.26.0 - 2021/11/26
+
+- add support for `queryParams` config property
+- updated to @applitools/driver@1.3.5 (from 1.2.7)
+- updated to @applitools/eyes-puppeteer@1.9.0 (from 1.8.5)
+- updated to @applitools/eyes-sdk-core@12.24.5 (from 12.23.24)
+- updated to @applitools/logger@1.0.6 (from 1.0.5)
+- updated to @applitools/test-server@1.0.7 (from 1.0.6)
+- updated to @applitools/visual-grid-client@15.8.49 (from 15.8.43)
+
  ## 3.25.3 - 2021/11/1
 
- - add a retry machanisem for cases we get 0 stories
+- add a retry mechanism for cases we get 0 stories
 
 ## 3.25.2 - 2021/10/30
 

package/README.md

@@ -423,10 +423,9 @@ storiesOf('Some kind', module)
 
 ### `variations`
 
-An array of string values, which specifies which variations to add for this story. For each value, an additional visual test will be executed for the component. It will have the same name only with a `[<variation name>]` suffix, and when the component is loaded, the URL will have an additional param: `eyes-variation=<variation name>`.
+An array of object values, which specifies which variations to add for this story. For each value, an additional visual test will be executed for the component. Each variation could contain `queryParams` and `properties` fields to specifies custom query parameters and eyes properties respectfully. Variation tests will have the same name.
 
-This can accommodate many use cases, for example RTL (right to left).
-It's now possible for the component to render its variation version when the relevant URL param is present. For Example, here's a storybook that handles an RTL variation:
+This can accommodate many use cases, for example `@storybook/addon-contexts`. With addons like this it is possible to render components in a different way depends on query parameters in URL. For Example, here's a storybook that handles an RTL variation:
 
 ```js
 const isRTL = new URL(window.location).searchParams.get('eyes-variation') === 'RTL';
@@ -443,7 +442,7 @@ storiesOf('Components that support RTL', module)
         <span>I am visually perfect!</span>
         <span>{isRTL ? ' and rendered right to left as well :)' : ''}</span>
       </div>,
-    {eyes: {variations: ['RTL']}}
+    {eyes: {variations: [{queryParams: {'eyes-variation': 'RTL'}, properties: {name: 'isRTL', value: 'true'}, {properties: {name: 'isRTL', value: 'false'}}]}}
   )
 ```
 

package/dist/getClientAPI.js

@@ -7,6 +7,7 @@ function __getClientAPI(...args) {
     v4: 'v4',
     v5: 'v5',
     v5_2: 'v5_2',
+    v6_4: 'v6_4',
   };
 
   function getClientAPI() {
@@ -19,7 +20,9 @@ function __getClientAPI(...args) {
     function getStorybookVersion() {
       const addons = frameWindow.__STORYBOOK_ADDONS;
 
-      if (frameWindow.__STORYBOOK_STORY_STORE__) {
+      if (frameWindow.__STORYBOOK_PREVIEW__) {
+        return API_VERSIONS.v6_4;
+      } else if (frameWindow.__STORYBOOK_STORY_STORE__) {
         return API_VERSIONS.v5_2;
       } else if (frameWindow.__STORYBOOK_CLIENT_API__ && frameWindow.__STORYBOOK_CLIENT_API__.raw) {
         return API_VERSIONS.v5;
@@ -81,6 +84,21 @@ function __getClientAPI(...args) {
             };
             break;
           }
+
+          case API_VERSIONS.v6_4: {
+            api = {
+              getStories: () => {
+                return clientAPI.raw();
+              },
+              selectStory: async i => {
+                frameWindow.__STORYBOOK_PREVIEW__.urlStore.setSelection({
+                  storyId: clientAPI.raw()[i].id,
+                });
+                await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();
+              },
+            };
+            break;
+          }
         }
 
         return {version, ...api};

package/dist/getStories.js

@@ -7,6 +7,7 @@ function __getStories(...args) {
     v4: 'v4',
     v5: 'v5',
     v5_2: 'v5_2',
+    v6_4: 'v6_4',
   };
 
   function getClientAPI() {
@@ -19,7 +20,9 @@ function __getStories(...args) {
     function getStorybookVersion() {
       const addons = frameWindow.__STORYBOOK_ADDONS;
 
-      if (frameWindow.__STORYBOOK_STORY_STORE__) {
+      if (frameWindow.__STORYBOOK_PREVIEW__) {
+        return API_VERSIONS.v6_4;
+      } else if (frameWindow.__STORYBOOK_STORY_STORE__) {
         return API_VERSIONS.v5_2;
       } else if (frameWindow.__STORYBOOK_CLIENT_API__ && frameWindow.__STORYBOOK_CLIENT_API__.raw) {
         return API_VERSIONS.v5;
@@ -81,6 +84,21 @@ function __getStories(...args) {
             };
             break;
           }
+
+          case API_VERSIONS.v6_4: {
+            api = {
+              getStories: () => {
+                return clientAPI.raw();
+              },
+              selectStory: async i => {
+                frameWindow.__STORYBOOK_PREVIEW__.urlStore.setSelection({
+                  storyId: clientAPI.raw()[i].id,
+                });
+                await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();
+              },
+            };
+            break;
+          }
         }
 
         return {version, ...api};

package/dist/renderStoryWithClientAPI.js

@@ -7,6 +7,7 @@ function __renderStoryWithClientAPI(...args) {
     v4: 'v4',
     v5: 'v5',
     v5_2: 'v5_2',
+    v6_4: 'v6_4',
   };
 
   function getClientAPI() {
@@ -19,7 +20,9 @@ function __renderStoryWithClientAPI(...args) {
     function getStorybookVersion() {
       const addons = frameWindow.__STORYBOOK_ADDONS;
 
-      if (frameWindow.__STORYBOOK_STORY_STORE__) {
+      if (frameWindow.__STORYBOOK_PREVIEW__) {
+        return API_VERSIONS.v6_4;
+      } else if (frameWindow.__STORYBOOK_STORY_STORE__) {
         return API_VERSIONS.v5_2;
       } else if (frameWindow.__STORYBOOK_CLIENT_API__ && frameWindow.__STORYBOOK_CLIENT_API__.raw) {
         return API_VERSIONS.v5;
@@ -81,6 +84,21 @@ function __renderStoryWithClientAPI(...args) {
             };
             break;
           }
+
+          case API_VERSIONS.v6_4: {
+            api = {
+              getStories: () => {
+                return clientAPI.raw();
+              },
+              selectStory: async i => {
+                frameWindow.__STORYBOOK_PREVIEW__.urlStore.setSelection({
+                  storyId: clientAPI.raw()[i].id,
+                });
+                await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();
+              },
+            };
+            break;
+          }
         }
 
         return {version, ...api};
@@ -112,11 +130,11 @@ function __renderStoryWithClientAPI(...args) {
 
   var getClientAPI_1 = getClientAPI;
 
-  function renderStoryWithClientAPI(index) {
+  async function renderStoryWithClientAPI(index) {
     let api;
     try {
       api = getClientAPI_1();
-      api.selectStory(index);
+      await api.selectStory(index);
     } catch (ex) {
       return {message: ex.message, version: api ? api.version : undefined};
     }

package/dist/runRunAfterScript.js

@@ -7,6 +7,7 @@ function __runRunAfterScript(...args) {
     v4: 'v4',
     v5: 'v5',
     v5_2: 'v5_2',
+    v6_4: 'v6_4',
   };
 
   function getClientAPI() {
@@ -19,7 +20,9 @@ function __runRunAfterScript(...args) {
     function getStorybookVersion() {
       const addons = frameWindow.__STORYBOOK_ADDONS;
 
-      if (frameWindow.__STORYBOOK_STORY_STORE__) {
+      if (frameWindow.__STORYBOOK_PREVIEW__) {
+        return API_VERSIONS.v6_4;
+      } else if (frameWindow.__STORYBOOK_STORY_STORE__) {
         return API_VERSIONS.v5_2;
       } else if (frameWindow.__STORYBOOK_CLIENT_API__ && frameWindow.__STORYBOOK_CLIENT_API__.raw) {
         return API_VERSIONS.v5;
@@ -81,6 +84,21 @@ function __runRunAfterScript(...args) {
             };
             break;
           }
+
+          case API_VERSIONS.v6_4: {
+            api = {
+              getStories: () => {
+                return clientAPI.raw();
+              },
+              selectStory: async i => {
+                frameWindow.__STORYBOOK_PREVIEW__.urlStore.setSelection({
+                  storyId: clientAPI.raw()[i].id,
+                });
+                await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();
+              },
+            };
+            break;
+          }
         }
 
         return {version, ...api};

package/dist/runRunBeforeScript.js

@@ -7,6 +7,7 @@ function __runRunBeforeScript(...args) {
     v4: 'v4',
     v5: 'v5',
     v5_2: 'v5_2',
+    v6_4: 'v6_4',
   };
 
   function getClientAPI() {
@@ -19,7 +20,9 @@ function __runRunBeforeScript(...args) {
     function getStorybookVersion() {
       const addons = frameWindow.__STORYBOOK_ADDONS;
 
-      if (frameWindow.__STORYBOOK_STORY_STORE__) {
+      if (frameWindow.__STORYBOOK_PREVIEW__) {
+        return API_VERSIONS.v6_4;
+      } else if (frameWindow.__STORYBOOK_STORY_STORE__) {
         return API_VERSIONS.v5_2;
       } else if (frameWindow.__STORYBOOK_CLIENT_API__ && frameWindow.__STORYBOOK_CLIENT_API__.raw) {
         return API_VERSIONS.v5;
@@ -81,6 +84,21 @@ function __runRunBeforeScript(...args) {
             };
             break;
           }
+
+          case API_VERSIONS.v6_4: {
+            api = {
+              getStories: () => {
+                return clientAPI.raw();
+              },
+              selectStory: async i => {
+                frameWindow.__STORYBOOK_PREVIEW__.urlStore.setSelection({
+                  storyId: clientAPI.raw()[i].id,
+                });
+                await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();
+              },
+            };
+            break;
+          }
         }
 
         return {version, ...api};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.25.3",
+  "version": "3.27.1",
   "description": "",
   "engines": {
     "node": ">=8.6.0"
@@ -58,14 +58,14 @@
     "directory": "packages/eyes-storybook"
   },
   "dependencies": {
-    "@applitools/driver": "1.2.7",
-    "@applitools/eyes-puppeteer": "1.8.5",
-    "@applitools/eyes-sdk-core": "12.23.24",
+    "@applitools/driver": "1.4.5",
+    "@applitools/eyes-sdk-core": "12.24.7",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "1.0.5",
+    "@applitools/logger": "1.0.7",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/test-server": "1.0.6",
-    "@applitools/visual-grid-client": "15.8.43",
+    "@applitools/spec-driver-puppeteer": "1.1.0",
+    "@applitools/test-server": "1.0.8",
+    "@applitools/visual-grid-client": "15.8.53",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -79,11 +79,10 @@
   "devDependencies": {
     "@applitools/scripts": "^1.0.1",
     "@applitools/sdk-release-kit": "0.13.4",
-    "@applitools/sdk-shared": "0.9.7",
+    "@applitools/sdk-shared": "0.9.11",
     "@applitools/snaptdout": "^1.0.1",
     "@applitools/utils": "1.2.4",
-    "@storybook/addon-options": "^5.2.8",
-    "@storybook/react": "^5.2.8",
+    "@storybook/react": "^6.4.0",
     "@testing-library/dom": "^5.6.1",
     "babel-core": "^6.26.3",
     "babel-loader": "^8.0.6",

package/src/addVariationStories.js

@@ -1,54 +1,104 @@
 'use strict';
 
 function addVariationStories({stories, config}) {
-  const globalVariationFunc =
-    typeof config.variations === 'function' ? config.variations : undefined;
-  const globalVariationArray = Array.isArray(config.variations) ? config.variations : undefined;
-  const storiesToAddVariations = stories.filter(getStoryVariations);
+  const defaultStories = [];
+  const variationStories = {};
+  for (const story of stories) {
+    const variations = getStoryVariations(story, config);
+    if (variations) {
+      for (const variation of variations) {
+        const variationKey = stringifyVariation(variation);
+        const variationStoriesArray =
+          variationStories[variationKey] || (variationStories[variationKey] = []);
+        const variationStory = {...story};
+        if (variation.queryParams || variation.properties) {
+          variationStory.parameters = addVariation(story.parameters, variation);
+        }
+        variationStoriesArray.push(variationStory);
+      }
+    } else {
+      defaultStories.push(story);
+    }
+  }
 
-  const storiesByVariation = {};
+  return Object.values(variationStories).reduce((allStories, variationStories) => {
+    return allStories.concat(variationStories);
+  }, defaultStories);
+}
 
-  for (const story of storiesToAddVariations) {
-    const variations = getStoryVariations(story);
-    if (!Array.isArray(variations)) {
+function getStoryVariations(story, config) {
+  if (story.parameters && story.parameters.eyes && story.parameters.eyes.variations) {
+    if (!Array.isArray(story.parameters.eyes.variations)) {
       throw new Error('variations should be an array');
     }
+    return normalizeVariations(story.parameters.eyes.variations);
+  }
 
-    for (const variation of variations) {
-      const variationArr = storiesByVariation[variation] || (storiesByVariation[variation] = []);
-      variationArr.push({
-        ...story,
-        parameters: addFlagToParameters(story.parameters, variation),
-      });
+  if (config.variations) {
+    if (Array.isArray(config.variations)) {
+      return normalizeVariations(config.variations);
+    } else if (typeof config.variations === 'function') {
+      const variations = config.variations(story);
+      if (variations) {
+        if (!Array.isArray(variations)) {
+          throw new Error('global variations should be a function that returns array');
+        }
+        return normalizeVariations(variations);
+      }
+    } else {
+      throw new Error('global variations should be an array or a function that returns array');
     }
   }
+}
 
-  return Object.keys(storiesByVariation).reduce((storiesWithVariations, variation) => {
-    return storiesWithVariations.concat(storiesByVariation[variation]);
-  }, stories);
-
-  function getStoryVariations(story) {
-    if (story.parameters && story.parameters.eyes && story.parameters.eyes.variations) {
-      return story.parameters.eyes.variations;
+function normalizeVariations(variations) {
+  let shouldHasDefault = false; // default variation is one without query params
+  const normalizedVariations = variations.map(variation => {
+    if (typeof variation === 'string') {
+      shouldHasDefault = true;
+      return {
+        queryParams: {'eyes-variation': variation},
+        properties: [{name: 'eyes-variation', value: variation}],
+      };
     }
-
-    if (globalVariationFunc) {
-      return globalVariationFunc(story);
+    if (variation.queryParams && (!variation.properties || variation.properties.length === 0)) {
+      return {
+        ...variation,
+        properties: Object.entries(variation.queryParams).map(([name, value]) => ({name, value})),
+      };
     }
+    return variation;
+  });
 
-    if (globalVariationArray) return globalVariationArray;
+  // if it should has default variation and it is not already there
+  if (shouldHasDefault && !normalizedVariations.some(variation => !variation.queryParams)) {
+    normalizedVariations.unshift({});
   }
+
+  return normalizedVariations;
 }
 
-function addFlagToParameters(parameters, variation) {
-  return parameters
-    ? {
-        ...parameters,
-        eyes: parameters.eyes
-          ? {...parameters.eyes, variationUrlParam: variation}
-          : {variationUrlParam: variation},
-      }
-    : {eyes: {variationUrlParam: variation}};
+function stringifyVariation(variation) {
+  if (!variation.queryParams) return '';
+  return Object.keys(variation.queryParams)
+    .sort()
+    .map(name => `${name}=${variation.queryParams[name]}`)
+    .join('&');
+}
+
+function addVariation(parameters, variation) {
+  parameters = {...parameters};
+  parameters.eyes = {...parameters.eyes};
+  if (variation.queryParams) {
+    parameters.eyes.queryParams = variation.queryParams;
+  }
+  if (variation.properties) {
+    parameters.eyes.properties = [
+      ...(parameters.eyes.properties || []),
+      ...(variation.properties || []),
+    ];
+  }
+  return parameters;
 }
 
 module.exports = addVariationStories;

package/src/browser/getClientAPI.js

@@ -4,6 +4,7 @@ const API_VERSIONS = {
   v4: 'v4',
   v5: 'v5',
   v5_2: 'v5_2',
+  v6_4: 'v6_4',
 };
 
 function getClientAPI() {
@@ -16,7 +17,9 @@ function getClientAPI() {
   function getStorybookVersion() {
     const addons = frameWindow.__STORYBOOK_ADDONS;
 
-    if (frameWindow.__STORYBOOK_STORY_STORE__) {
+    if (frameWindow.__STORYBOOK_PREVIEW__) {
+      return API_VERSIONS.v6_4;
+    } else if (frameWindow.__STORYBOOK_STORY_STORE__) {
       return API_VERSIONS.v5_2;
     } else if (frameWindow.__STORYBOOK_CLIENT_API__ && frameWindow.__STORYBOOK_CLIENT_API__.raw) {
       return API_VERSIONS.v5;
@@ -78,6 +81,21 @@ function getClientAPI() {
           };
           break;
         }
+
+        case API_VERSIONS.v6_4: {
+          api = {
+            getStories: () => {
+              return clientAPI.raw();
+            },
+            selectStory: async i => {
+              frameWindow.__STORYBOOK_PREVIEW__.urlStore.setSelection({
+                storyId: clientAPI.raw()[i].id,
+              });
+              await frameWindow.__STORYBOOK_PREVIEW__.renderSelection();
+            },
+          };
+          break;
+        }
       }
 
       return {version, ...api};

package/src/browser/renderStoryWithClientAPI.js

@@ -1,10 +1,10 @@
 const getClientAPI = require('./getClientAPI');
 
-function renderStoryWithClientAPI(index) {
+async function renderStoryWithClientAPI(index) {
   let api;
   try {
     api = getClientAPI();
-    api.selectStory(index);
+    await api.selectStory(index);
   } catch (ex) {
     return {message: ex.message, version: api ? api.version : undefined};
   }

package/src/eyesStorybook.js

@@ -18,7 +18,7 @@ const createPagePool = require('./pagePool');
 const getClientAPI = require('../dist/getClientAPI');
 const {takeDomSnapshots} = require('@applitools/eyes-sdk-core');
 const {Driver} = require('@applitools/driver');
-const spec = require('@applitools/eyes-puppeteer/dist/spec-driver');
+const spec = require('@applitools/spec-driver-puppeteer');
 const {refineErrorMessage} = require('./errMessages');
 const {splitConfigsByBrowser} = require('./shouldRenderIE');
 const executeRenders = require('./executeRenders');
@@ -78,14 +78,14 @@ async function eyesStorybook({
   });
   const pagePool = createPagePool({initPage, logger});
 
-  const doTakeDomSnapshots = async ({page, layoutBreakpoints, waitBeforeCapture}) => {
-    const driver = new Driver({spec, driver: page, logger});
+  const doTakeDomSnapshots = async ({page, browser, layoutBreakpoints, waitBeforeCapture}) => {
+    const driver = await new Driver({spec, driver: page, logger}).init();
     const skipResources = getResourceUrlsInCache();
     const result = await takeDomSnapshots({
       logger,
       driver,
       breakpoints: layoutBreakpoints !== undefined ? layoutBreakpoints : config.layoutBreakpoints,
-      browsers: config.browser || [true], // this is a hack, since takeDomSnapshots expects an array. And VGC has a default in case browser is not specified. So we just need an array with length of 1 here.
+      browsers: browser || [true], // this is a hack, since takeDomSnapshots expects an array. And VGC has a default in case browser is not specified. So we just need an array with length of 1 here.
       skipResources,
       showLogs: !!config.showLogs,
       disableBrowserFetching: !!config.disableBrowserFetching,
@@ -116,7 +116,10 @@ async function eyesStorybook({
     );
 
     const filteredStories = filterStories({stories, config});
-    const storiesIncludingVariations = addVariationStories({stories: filteredStories, config});
+    const storiesIncludingVariations = addVariationStories({
+      stories: filteredStories,
+      config,
+    });
 
     logger.log(`starting to run ${storiesIncludingVariations.length} stories`);
 

package/src/getStoryBaselineName.js

@@ -0,0 +1,19 @@
+'use strict';
+const getStoryTitle = require('./getStoryTitle');
+
+function getStoryBaselineName({name, kind, parameters}) {
+  const storyTitle = getStoryTitle({name, kind, parameters});
+  const queryParams = parameters && parameters.eyes && parameters.eyes.queryParams;
+  if (!queryParams) return storyTitle;
+  const customQueryParams = {...queryParams};
+  delete customQueryParams['eyes-variation'];
+  if (Object.keys(customQueryParams).length === 0) return storyTitle;
+
+  const queryParamsString = Object.entries(customQueryParams)
+    .map(([name, value]) => `${name}=${value}`)
+    .join('&');
+
+  return `${storyTitle} [${queryParamsString}]`;
+}
+
+module.exports = getStoryBaselineName;

package/src/getStoryData.js

@@ -3,26 +3,21 @@ const {presult} = require('@applitools/functional-commons');
 const {ArgumentGuard} = require('@applitools/eyes-sdk-core');
 const renderStoryWithClientAPI = require('../dist/renderStoryWithClientAPI');
 const runRunBeforeScript = require('../dist/runRunBeforeScript');
-const getStoryTitle = require('./getStoryTitle');
+const getStoryBaselineName = require('./getStoryBaselineName');
 const {URL} = require('url');
 const runRunAfterScript = require('../dist/runRunAfterScript');
 const waitFor = require('./waitFor');
 
 function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPagePerStory}) {
-  return async function getStoryData({story, storyUrl, page, waitBeforeStory}) {
-    const title = getStoryTitle(story);
+  return async function getStoryData({story, storyUrl, page, browser, waitBeforeStory}) {
+    const title = getStoryBaselineName(story);
     logger.log(`getting data from story`, title);
 
     const eyesParameters = story.parameters && story.parameters.eyes;
     if (story.isApi && !reloadPagePerStory) {
-      const actualVariationParam = await getEyesVariationParam(page);
-      const expectedVariationUrlParam = eyesParameters
-        ? eyesParameters.variationUrlParam
-        : undefined;
-      if (
-        (!actualVariationParam && !expectedVariationUrlParam) ||
-        actualVariationParam === expectedVariationUrlParam
-      ) {
+      const currentUrl = page.url();
+      const expectedQueryParams = eyesParameters ? eyesParameters.queryParams : undefined;
+      if (urlQueryParamsEquals(currentUrl, expectedQueryParams)) {
         const err = await page.evaluate(renderStoryWithClientAPI, story.index);
         err && handleRenderStoryError(err);
       } else {
@@ -49,8 +44,9 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
 
     logger.log(`running takeDomSnapshot(s) for story ${title}`);
 
-    const snapshots = await takeDomSnapshots({
+    const result = await takeDomSnapshots({
       page,
+      browser,
       layoutBreakpoints: eyesParameters ? eyesParameters.layoutBreakpoints : undefined,
       waitBeforeCapture: wait
         ? async () => {
@@ -67,7 +63,7 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
     }
 
     logger.log(`done getting data from story`, title);
-    return snapshots;
+    return result;
 
     async function renderStoryLegacy() {
       logger.log(`getting data from story ${storyUrl}`);
@@ -78,12 +74,28 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
       }
     }
 
-    async function getEyesVariationParam() {
+    function urlQueryParamsEquals(url, expectedQueryParams) {
       try {
-        return new URL(await page.url()).searchParams.get('eyes-variation');
-      } catch (ex) {
-        logger.log('failed to get url from page (in need of eyes-variation param)');
+        url = new URL(url);
+      } catch (err) {
+        logger.error('Error during parsing page url', err);
+        return false;
       }
+
+      expectedQueryParams = expectedQueryParams || {};
+      const expectedQueryParamNames = Object.keys(expectedQueryParams);
+      const actualQueryParamNames = [];
+      for (const [name, value] of url.searchParams) {
+        if (['eyes-storybook', 'selectedKind', 'selectedStory'].includes(name)) continue;
+        if (!expectedQueryParams.hasOwnProperty(name) || !expectedQueryParams[name] === value) {
+          return false;
+        }
+        actualQueryParamNames.push(name);
+      }
+
+      if (actualQueryParamNames.length !== expectedQueryParamNames.length) return false;
+
+      return true;
     }
 
     // TODO (amit): handle this error in the caller (probably renderStories)

package/src/getStoryTitle.js

@@ -1,10 +1,10 @@
 'use strict';
 
 function getStoryTitle({name, kind, parameters}) {
-  const variationUrlParam = parameters && parameters.eyes && parameters.eyes.variationUrlParam;
-  const urlSuffix = variationUrlParam ? ` [${variationUrlParam}]` : '';
+  const queryParams = (parameters && parameters.eyes && parameters.eyes.queryParams) || {};
+  const eyesVariation = queryParams['eyes-variation'];
 
-  return `${kind}: ${name}${urlSuffix}`;
+  return `${kind}: ${name}${eyesVariation ? ` [${eyesVariation}]` : ''}`;
 }
 
 module.exports = getStoryTitle;

package/src/getStoryUrl.js

@@ -2,12 +2,15 @@
 const getIframeUrl = require('./getIframeUrl');
 
 function getStoryUrl({name, kind, parameters}, baseUrl) {
-  const variationUrlParam = parameters && parameters.eyes && parameters.eyes.variationUrlParam;
-  const variation = variationUrlParam ? `&eyes-variation=${variationUrlParam}` : '';
+  const queryParams = (parameters && parameters.eyes && parameters.eyes.queryParams) || {};
+  const queryString = Object.entries(queryParams).reduce(
+    (queryString, [name, value]) => queryString + `&${name}=${value}`,
+    '',
+  );
 
   return `${getIframeUrl(baseUrl)}&selectedKind=${encodeURIComponent(
     kind,
-  )}&selectedStory=${encodeURIComponent(name)}${variation}`;
+  )}&selectedStory=${encodeURIComponent(name)}${queryString}`;
 }
 
 module.exports = getStoryUrl;

package/src/renderStories.js

@@ -1,6 +1,6 @@
 'use strict';
 const getStoryUrl = require('./getStoryUrl');
-const getStoryTitle = require('./getStoryTitle');
+const getStoryBaselineName = require('./getStoryBaselineName');
 const ora = require('ora');
 const {presult} = require('@applitools/functional-commons');
 const {shouldRenderIE} = require('./shouldRenderIE');
@@ -61,7 +61,7 @@ function makeRenderStories({
       async function processStory() {
         const story = stories[currIndex++];
         const storyUrl = getStoryUrl(story, storybookUrl);
-        const title = getStoryTitle(story);
+        const title = getStoryBaselineName(story);
         const {waitBeforeCapture} = (story.parameters && story.parameters.eyes) || {};
 
         try {
@@ -69,6 +69,7 @@ function makeRenderStories({
             getStoryData({
               story,
               storyUrl,
+              browser: config.browser,
               page,
               waitBeforeStory: waitBeforeCapture,
             }),
@@ -89,6 +90,7 @@ function makeRenderStories({
               getStoryData({
                 story,
                 storyUrl,
+                browser: config.browser,
                 page: newPageObj.page,
                 waitBeforeStory: waitBeforeCapture,
               }),
@@ -107,7 +109,8 @@ function makeRenderStories({
           }
 
           const testResults = await renderStory({
-            snapshot: storyData,
+            snapshot: storyData.snapshots,
+            cookies: storyData.cookies,
             url: storyUrl,
             story,
             config,
@@ -139,7 +142,7 @@ function makeRenderStories({
 
     function onDoneStory(resultsOrErr, story) {
       spinner.text = updateSpinnerText(++doneStories, stories.length);
-      const title = getStoryTitle(story);
+      const title = getStoryBaselineName(story);
       allTestResults.push({title, resultsOrErr});
       return {title, resultsOrErr};
     }

package/src/renderStory.js

@@ -1,12 +1,19 @@
 'use strict';
 const getStoryTitle = require('./getStoryTitle');
+const getStoryBaselineName = require('./getStoryBaselineName');
 const {deprecationWarning} = require('@applitools/eyes-sdk-core').GeneralUtils;
 
 function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
   return function renderStory({config, story, snapshot, url}) {
     const {name, kind, parameters} = story;
+    const baselineName = getStoryBaselineName({name, kind, parameters});
     const title = getStoryTitle({name, kind, parameters});
-    const eyesOptions = Object.assign({}, config, (parameters && parameters.eyes) || {});
+    const eyesParameters = (parameters && parameters.eyes) || {};
+    const eyesOptions = {
+      ...config,
+      ...eyesParameters,
+      properties: [...(config.properties || []), ...(eyesParameters.properties || [])],
+    };
     const {
       ignoreDisplacements,
       ignoreRegions,
@@ -41,16 +48,19 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       ignoreRegionsBackCompat = ignore;
     }
 
-    logger.log('running story', title);
+    logger.log(`running story ${title} with baseline ${baselineName}`);
+
+    const storyProperties = [
+      {name: 'Component name', value: kind},
+      {name: 'State', value: name},
+      ...(properties || []),
+    ];
 
     const openParams = {
-      testName: title,
+      testName: baselineName,
+      displayName: title,
       browser: config.browser,
-      properties: [
-        {name: 'Component name', value: kind},
-        {name: 'State', value: name},
-        ...(properties || []),
-      ],
+      properties: storyProperties,
       accessibilitySettings: accessibilityValidation,
     };
 
@@ -77,12 +87,12 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       ignoreDisplacements,
     };
 
-    return timeItAsync(title, async () => {
+    return timeItAsync(baselineName, async () => {
       return testWindow({openParams, checkParams, throwEx: false});
     }).then(onDoneStory);
 
     function onDoneStory(results) {
-      logger.log('finished story', title, 'in', performance[title]);
+      logger.log('finished story', baselineName, 'in', performance[baselineName]);
       return results;
     }
   };

package/src/storybookConnector.js

@@ -72,7 +72,7 @@ class StorybookConnector extends EventEmitter {
 
       const successMessageListener = str => {
         const isReady = stripAnsi(str).match(
-          /Storybook \d{1,2}\.\d{1,2}\.\d{1,2}(-.+)? started|Storybook started on =>/,
+          /Storybook \d{1,2}\.\d{1,2}\.\d{1,2}(.+)? started|Storybook started on =>/,
         );
 
         if (isReady) {