@applitools/eyes-storybook 3.26.1 → 3.27.3

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 ## Unreleased
 
 
+## 3.27.3 - 2022/1/26
+
+- avoid unwanted page reloading due to unknown query parameters
+- updated to @applitools/driver@1.4.9 (from 1.4.7)
+- updated to @applitools/eyes-sdk-core@13.0.0 (from 12.24.9)
+- updated to @applitools/logger@1.0.9 (from 1.0.8)
+- updated to @applitools/visual-grid-client@15.8.62 (from 15.8.55)
+
+## 3.27.2 - 2021/12/23
+
+- updated to @applitools/driver@1.4.7 (from 1.4.5)
+- updated to @applitools/eyes-sdk-core@12.24.9 (from 12.24.7)
+- updated to @applitools/logger@1.0.8 (from 1.0.7)
+- updated to @applitools/visual-grid-client@15.8.55 (from 15.8.53)
+
+## 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

package/README.md

@@ -28,7 +28,6 @@ Applitools Eyes SDK for [Storybook](http://storybook.js.org).
       - [global](#global)
       - [component](#component)
     - [`variations`](#variations)
-    - [`queryParams`](#queryparams)
     - [`waitBeforeCapture`](#waitbeforecapture)
     - [`properties`](#properties)
     - [`ignoreRegions`](#ignoreregions)
@@ -157,9 +156,12 @@ In addition to command-line arguments, it's possible to define the following con
 | `exitcode`                | false                       | If tests failed close with non-zero exit code (also available as command-line argument). |
 | `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).|
 | `showLogs`                | false                       | Whether or not you want to see logs of the Eyes-Storybook plugin. |
-| `batchId`                 | random                      | Provides ability to group tests into batches. Read more about batches [here](https://applitools.com/docs/topics/working-with-test-batches/how-to-group-tests-into-batches.html). |
-| `batchName`               | undefined                   | Provides a name to the batch. |
-| `batchSequenceName`       | undefined                   | Name for managing batch statistics. |
+| `batch`                     | undefined                   | An object which describes different aspects of the batch. The following lines in this table depict the various ways to configure the batch. |
+| `batch.id`                  | random                      | Provides ability to group tests into batches. Read more about batches [here](https://applitools.com/docs/topics/working-with-test-batches/how-to-group-tests-into-batches.html). |
+| `batch.name`                | The name of the first test in the batch                   | Provides a name to the batch (for display purpose only). |
+| `batch.sequenceName`        | undefined                   | Name for managing batch statistics. |
+| `batch.notifyOnCompletion`  | false                       | If `true` batch completion notifications are sent. |
+| `batch.properties`          | undefined                   | Custom properties for the entire batch. The format is an array of objects with name/value properties. For example: `[{name: 'My prop', value:'My value'}]`. |
 | `baselineEnvName`         | undefined                   | The name of the environment of the baseline. |
 | `envName`                 | undefined                   | A name for the environment in which the application under test is running. |
 | `ignoreCaret`             | false                       | Whether to ignore or the blinking caret or not when comparing images. |
@@ -181,8 +183,6 @@ In addition to command-line arguments, it's possible to define the following con
 | `waitBeforeCapture`    | undefined                   | Selector, function or timeout.<br/>If ```number``` then the argument is treated as time in milliseconds to wait before all screenshots.<br/>If ```string``` then the argument is treated as a selector for elements to wait for before all screenshots.<br/>If ```function```, then the argument is treated as a predicate to wait for before all screenshots.<br/><hr/>For per component configuration see [waitBeforeCapture.](#waitBeforeCapture)<br/>Note that we use Puppeteer's [page.waitForTimeout()](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitfortimeoutmilliseconds), [page.waitForSelector()](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitforselectorselector-options), [page.waitForXPath()](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitforxpathxpath-options) and [page.waitForFunction()](https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitforfunctionpagefunction-options-args), checkout it's API for more details. |
 | `include`                 | true                        | A predicate function, a string or a regular expression specifying which stories should be visually tested.<br/>Visual baselines will be created only for the components specified.<br/>The function receives an object with ```name```, ```kind```, ```storyTitle```  and ```parameters``` properties.<br/>For example (exclude all stories with a name that start with [SKIP]):<br/>```({name,  kind, storyTitle, parameters}) => !/^\[SKIP\]/.test(name)```<br/>For more information, see [per component configuration - include](#include). |
 | `variations`              | undefined                   | Specifies additional variations for all or some of the stories. For example, RTL. For more information, see [per component  configuration - variations](#variations).|
-| `queryParam`              | undefined                   | Specifies additional query parameters for all or some of the stories. For more information, see [per component  configuration - queryParams](#queryParams).|
-| `notifyOnCompletion`      | false                       | If `true` batch completion notifications are sent. |
 | `dontCloseBatches`        | false                       | If true, batches are not closed for notifyOnCompletion.|
 | `testConcurrency`             | 5                          | The maximum number of tests that can run concurrently. The default value is the allowed amount for free accounts. For paid accounts, set this number to the quota set for your account. |
 | `readStoriesTimeout`      | 60000                       | The amount of time (in milliseconds) Eyes-Storybook waits for storybook to load. For old storybook versions 2 and 3, this is also the time it takes for Eyes-Storybook to acknowledge it is working on those versions. So it is recommended to make this value small (e.g. 3000) when working with Storybook version 2 or 3. |
@@ -425,10 +425,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';
@@ -445,17 +444,10 @@ 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'}}]}}
   )
 ```
 
-### `queryParams`
-
-An array of object values, which specifies `name` and `value` of query parameter which will be added to the story. For each value, an additional visual test will be executed for the component. It will have the same name display name, but still generate a different baseline.
-
-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.
-
 ### `waitBeforeCapture`
 
 Selector or timeout, see [advanced configuration](#advanced-configuration) for more details.

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.26.1",
+  "version": "3.27.3",
   "description": "",
   "engines": {
     "node": ">=8.6.0"
@@ -34,6 +34,7 @@
     "changelog": "git changelog -x -p -f v$npm_package_version > History.md && git add ./History.md && git commit -am 'changelog'",
     "changelog:init": "git config changelog.format \"* %s [[%h]($(echo $npm_package_repository_url|cut -d+ -f2|cut -d. -f1-2)/commit/%H)]\"",
     "changelog:install": "sudo apt-get install git-extras",
+    "gh:publish": "gh workflow run publish-storybook.yml --ref $(git rev-parse --abbrev-ref HEAD)",
     "postinstall": "node src/postinstall",
     "preversion": "bongo preversion",
     "version": "bongo version",
@@ -58,14 +59,14 @@
     "directory": "packages/eyes-storybook"
   },
   "dependencies": {
-    "@applitools/driver": "1.3.5",
-    "@applitools/eyes-sdk-core": "12.24.5",
+    "@applitools/driver": "1.4.9",
+    "@applitools/eyes-sdk-core": "13.0.0",
     "@applitools/functional-commons": "1.6.0",
-    "@applitools/logger": "1.0.6",
+    "@applitools/logger": "1.0.9",
     "@applitools/monitoring-commons": "1.0.19",
     "@applitools/spec-driver-puppeteer": "1.1.0",
-    "@applitools/test-server": "1.0.7",
-    "@applitools/visual-grid-client": "15.8.49",
+    "@applitools/test-server": "1.0.8",
+    "@applitools/visual-grid-client": "15.8.62",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -77,13 +78,12 @@
     "yargs": "15.4.1"
   },
   "devDependencies": {
-    "@applitools/scripts": "^1.0.1",
-    "@applitools/sdk-release-kit": "0.13.4",
-    "@applitools/sdk-shared": "0.9.9",
+    "@applitools/scripts": "^1.1.0",
+    "@applitools/sdk-release-kit": "0.13.11",
+    "@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",
+    "@applitools/utils": "1.2.11",
+    "@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

@@ -0,0 +1,104 @@
+'use strict';
+
+function addVariationStories({stories, config}) {
+  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);
+    }
+  }
+
+  return Object.values(variationStories).reduce((allStories, variationStories) => {
+    return allStories.concat(variationStories);
+  }, defaultStories);
+}
+
+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);
+  }
+
+  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');
+    }
+  }
+}
+
+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 (variation.queryParams && (!variation.properties || variation.properties.length === 0)) {
+      return {
+        ...variation,
+        properties: Object.entries(variation.queryParams).map(([name, value]) => ({name, value})),
+      };
+    }
+    return variation;
+  });
+
+  // if it should has default variation and it is not already there
+  if (shouldHasDefault && !normalizedVariations.some(variation => !variation.queryParams)) {
+    normalizedVariations.unshift({});
+  }
+
+  return normalizedVariations;
+}
+
+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

@@ -10,7 +10,7 @@ const makeRenderStories = require('./renderStories');
 const makeGetStoryData = require('./getStoryData');
 const ora = require('ora');
 const filterStories = require('./filterStories');
-const addParametrizedStories = require('./addParametrizedStories');
+const addVariationStories = require('./addVariationStories');
 const browserLog = require('./browserLog');
 const memoryLog = require('./memoryLog');
 const getIframeUrl = require('./getIframeUrl');
@@ -116,12 +116,12 @@ async function eyesStorybook({
     );
 
     const filteredStories = filterStories({stories, config});
-    const storiesIncludingParametrizedVariations = addParametrizedStories({
+    const storiesIncludingVariations = addVariationStories({
       stories: filteredStories,
       config,
     });
 
-    logger.log(`starting to run ${storiesIncludingParametrizedVariations.length} stories`);
+    logger.log(`starting to run ${storiesIncludingVariations.length} stories`);
 
     const getStoryData = makeGetStoryData({
       logger,
@@ -158,7 +158,7 @@ async function eyesStorybook({
         setRenderIE,
         setTransitioningIntoIE,
         configs,
-        stories: storiesIncludingParametrizedVariations,
+        stories: storiesIncludingVariations,
         pagePool,
         logger,
         timeItAsync,

package/src/getStoryBaselineName.js

@@ -3,11 +3,17 @@ const getStoryTitle = require('./getStoryTitle');
 
 function getStoryBaselineName({name, kind, parameters}) {
   const storyTitle = getStoryTitle({name, kind, parameters});
-  const queryParam = parameters && parameters.eyes && parameters.eyes.queryParam;
+  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;
 
-  if (!queryParam || queryParam.name === 'eyes-variation') return storyTitle;
+  const queryParamsString = Object.entries(customQueryParams)
+    .map(([name, value]) => `${name}=${value}`)
+    .join('&');
 
-  return `${storyTitle} [${queryParam.name}=${queryParam.value}]`;
+  return `${storyTitle} [${queryParamsString}]`;
 }
 
 module.exports = getStoryBaselineName;

package/src/getStoryData.js

@@ -15,19 +15,9 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
 
     const eyesParameters = story.parameters && story.parameters.eyes;
     if (story.isApi && !reloadPagePerStory) {
-      const expectedQueryParam = eyesParameters ? eyesParameters.queryParam : undefined;
-      const actualQueryParam = await getQueryParam(
-        eyesParameters && eyesParameters.queryParams
-          ? eyesParameters.queryParams.map(queryParam => queryParam.name)
-          : undefined,
-      );
-      if (
-        (!actualQueryParam && !expectedQueryParam) ||
-        (actualQueryParam &&
-          expectedQueryParam &&
-          actualQueryParam.value === expectedQueryParam.name &&
-          actualQueryParam.value === expectedQueryParam.value)
-      ) {
+      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 {
@@ -84,19 +74,29 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPa
       }
     }
 
-    async function getQueryParam(queryParamNames = []) {
+    function urlQueryParamsEquals(url, expectedQueryParams) {
       try {
-        const url = new URL(await page.url());
-        queryParamNames = [...queryParamNames, 'eyes-variation'];
-        const queryParamName = queryParamNames.find(queryParamName =>
-          url.searchParams.has(queryParamName),
-        );
-        if (queryParamName) {
-          return {name: queryParamName, value: url.searchParams.get(queryParamName)};
+        url = new URL(url);
+      } catch (err) {
+        logger.error('Error during parsing page url', err);
+        return false;
+      }
+
+      const currentQueryParams = url.searchParams.get('eyes-query-params');
+      if (!currentQueryParams && !expectedQueryParams) return true;
+      if (!currentQueryParams || !expectedQueryParams) return false;
+
+      const expectedQueryParamNames = Object.keys(expectedQueryParams);
+      const currentQueryParamNames = currentQueryParams.split(',');
+
+      if (currentQueryParamNames.length !== expectedQueryParamNames.length) return false;
+
+      for (const queryParamName of currentQueryParamNames) {
+        if (url.searchParams.get(queryParamName) !== expectedQueryParams[queryParamName]) {
+          return false;
         }
-      } catch (ex) {
-        logger.log('failed to get url from page (in need of eyes-variation param)');
       }
+      return true;
     }
 
     // TODO (amit): handle this error in the caller (probably renderStories)

package/src/getStoryTitle.js

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

package/src/getStoryUrl.js

@@ -2,12 +2,19 @@
 const getIframeUrl = require('./getIframeUrl');
 
 function getStoryUrl({name, kind, parameters}, baseUrl) {
-  const queryParam = parameters && parameters.eyes && parameters.eyes.queryParam;
-  const queryParamString = queryParam ? `&${queryParam.name}=${queryParam.value}` : '';
+  let storyUrl = getIframeUrl(baseUrl);
+  storyUrl += `&selectedKind=${encodeURIComponent(kind)}`;
+  storyUrl += `&selectedStory=${encodeURIComponent(name)}`;
 
-  return `${getIframeUrl(baseUrl)}&selectedKind=${encodeURIComponent(
-    kind,
-  )}&selectedStory=${encodeURIComponent(name)}${queryParamString}`;
+  const queryParams = parameters && parameters.eyes && parameters.eyes.queryParams;
+  if (queryParams) {
+    storyUrl += `&eyes-query-params=${Object.keys(queryParams).join(',')}`;
+    for (const [name, value] of Object.entries(queryParams)) {
+      storyUrl += `&${name}=${encodeURIComponent(value)}`;
+    }
+  }
+
+  return storyUrl;
 }
 
 module.exports = getStoryUrl;

package/src/renderStory.js

@@ -8,7 +8,12 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
     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,
@@ -31,7 +36,6 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       visualGridOptions,
       useDom,
       enablePatterns,
-      queryParam,
     } = eyesOptions;
 
     if (sizeMode) {
@@ -52,10 +56,6 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       ...(properties || []),
     ];
 
-    if (queryParam) {
-      storyProperties.push(queryParam);
-    }
-
     const openParams = {
       testName: baselineName,
       displayName: title,

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) {

package/src/addParametrizedStories.js

@@ -1,81 +0,0 @@
-'use strict';
-
-function addParametrizedStories({stories, config}) {
-  const parametrizedStories = {};
-  for (const story of stories) {
-    const queryParams = getStoryQueryParams(story, config);
-    if (!queryParams) continue;
-    for (const queryParam of queryParams) {
-      const queryParamString = `${queryParam.name}=${queryParam.value}`;
-      const parametrizeStoriesArray =
-        parametrizedStories[queryParamString] || (parametrizedStories[queryParamString] = []);
-      parametrizeStoriesArray.push({
-        ...story,
-        parameters: addQueryParam(story.parameters, queryParam),
-      });
-    }
-  }
-
-  return Object.values(parametrizedStories).reduce((allStories, parametrizedStories) => {
-    return allStories.concat(parametrizedStories);
-  }, stories);
-}
-
-function getStoryQueryParams(story, config) {
-  let queryParams;
-  if (story.parameters && story.parameters.eyes && story.parameters.eyes.queryParams) {
-    if (!Array.isArray(story.parameters.eyes.queryParams)) {
-      throw new Error('queryParams should be an array');
-    }
-    queryParams = [...story.parameters.eyes.queryParams];
-  }
-  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');
-    }
-    queryParams = [
-      ...(queryParams || []),
-      ...variationsToQueryParams(story.parameters.eyes.variations),
-    ];
-  }
-
-  if (queryParams) return queryParams;
-
-  if (config.queryParams) {
-    if (!Array.isArray(config.queryParams)) {
-      throw new Error('global queryParams should be an array');
-    }
-    queryParams = [...config.queryParams];
-  }
-
-  if (config.variations) {
-    if (Array.isArray(config.variations)) {
-      queryParams = [...(queryParams || []), ...variationsToQueryParams(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');
-        }
-        queryParams = [...(queryParams || []), ...variationsToQueryParams(variations)];
-      }
-    } else {
-      throw new Error('global variations should be an array or a function that returns array');
-    }
-  }
-
-  if (queryParams) return queryParams;
-}
-
-function variationsToQueryParams(variations) {
-  return variations.map(variation => ({name: 'eyes-variation', value: variation}));
-}
-
-function addQueryParam(parameters, queryParam) {
-  parameters = {...parameters};
-  parameters.eyes = {...parameters.eyes};
-  parameters.eyes.queryParam = queryParam;
-  return parameters;
-}
-
-module.exports = addParametrizedStories;