@applitools/eyes-storybook 3.25.0 → 3.26.0

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 ## Unreleased
 
 
+## 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 mechanism for cases we get 0 stories
+
+## 3.25.2 - 2021/10/30
+
+- replace legacy logger construction with new
+- deprecate `waitBeforeScreenshot` and introduce `waitBeforeCapture` instead
+- updated to @applitools/driver@1.2.7 (from 1.2.6)
+- updated to @applitools/eyes-puppeteer@1.8.5 (from 1.8.4)
+- updated to @applitools/eyes-sdk-core@12.23.24 (from 12.23.18)
+- updated to @applitools/test-server@1.0.6 (from 1.0.5)
+- updated to @applitools/visual-grid-client@15.8.43 (from 15.8.37)
+
+## 3.25.1 - 2021/10/20
+
+- updated to @applitools/eyes-puppeteer@1.8.4 (from 1.8.3)
+- updated to @applitools/eyes-sdk-core@12.23.18 (from 12.23.17)
+- updated to @applitools/visual-grid-client@15.8.37 (from 15.8.36)
+
 ## 3.25.0 - 2021/10/18
 
 - updated to @applitools/driver@1.2.6 (from 1.1.3)

package/README.md

@@ -4,43 +4,52 @@ Applitools Eyes SDK for [Storybook](http://storybook.js.org).
 
 ### Table of contents
 
-- [Installation](#installation)
-  * [Install npm package](#install-npm-package)
-  * [Applitools API key](#applitools-api-key)
-- [Usage](#usage)
-  * [Configuring local storybook server](#configuring-local-storybook-server)
-  * [Standalone server](#standalone-server)
-  * [Command line arguments](#command-line-arguments)
-- [Concurrency](#concurrency)
-- [Advanced configuration](#advanced-configuration)
-  * [Method 1: Environment variables](#method-1--environment-variables)
-  * [Method 2: The `applitools.config.js` file](#method-2--the--applitoolsconfigjs--file)
-- [Configuring the browser](#configuring-the-browser)
-  * [Previous browser versions](#previous-browser-versions)
-  * [Getting a screenshot of multiple browsers in parallel](#getting-a-screenshot-of-multiple-browsers-in-parallel)
-  * [Device emulation](#device-emulation)
-  * [Faking IE Browser](#faking-ie-browser)
-- [Per component configuration](#per-component-configuration)
-  * [`include`](#include)
-  * [`variations`](#variations)
-  * [`waitBeforeScreenshot`](#waitbeforescreenshot)
-  * [`properties`](#properties)
-  * [`ignoreRegions`](#ignoreregions)
-  * [`floatingRegions`](#floatingregions)
-  * [`layoutRegions`](#layoutregions)
-  * [`contentRegions`](#contentregions)
-  * [`strictRegions`](#strictregions)
-  * [`accessibilityRegions`](#accessibilityregions)
-  * [`accessibilityValidation`](#accessibilityvalidation)
-  * [Parameters that cannot be set as an Advanced configuration](#parameters-that-cannot-be-set-as-an-advanced-configuration)
-  * [`runBefore`](#runbefore)
-  * [`runAfter`](#runafter)
-  * [`scriptHooks`](#scripthooks)
-    + [beforeCaptureScreenshot](#beforecapturescreenshot)
-  * [`layoutBreakpoints`](#layoutBreakpoints)
-- [Running Eyes-Storybook in Docker](#running-eyes-storybook-in-docker)
-- [Dealing with dynamic data](#dealing-with-dynamic-data)
-- [Troubleshooting](#troubleshooting)
+- [Eyes-Storybook](#eyes-storybook)
+    - [Table of contents](#table-of-contents)
+  - [Installation](#installation)
+    - [Install npm package](#install-npm-package)
+    - [Applitools API key](#applitools-api-key)
+  - [Usage](#usage)
+    - [Configuring local storybook server](#configuring-local-storybook-server)
+    - [Standalone server](#standalone-server)
+    - [Command line arguments](#command-line-arguments)
+  - [Concurrency](#concurrency)
+  - [Advanced configuration](#advanced-configuration)
+    - [Method 1: Environment variables](#method-1-environment-variables)
+    - [Method 2: The `applitools.config.js` file](#method-2-the-applitoolsconfigjs-file)
+  - [Configuring the browser](#configuring-the-browser)
+    - [Previous browser versions](#previous-browser-versions)
+    - [Getting a screenshot of multiple browsers in parallel](#getting-a-screenshot-of-multiple-browsers-in-parallel)
+    - [Device emulation](#device-emulation)
+    - [iOS device](#ios-device)
+  - [Faking IE Browser](#faking-ie-browser)
+  - [Per component configuration](#per-component-configuration)
+    - [`include`](#include)
+      - [global](#global)
+      - [component](#component)
+    - [`variations`](#variations)
+    - [`queryParams`](#queryparams)
+    - [`waitBeforeCapture`](#waitbeforecapture)
+    - [`properties`](#properties)
+    - [`ignoreRegions`](#ignoreregions)
+    - [`floatingRegions`](#floatingregions)
+    - [`layoutRegions`](#layoutregions)
+    - [`contentRegions`](#contentregions)
+    - [`strictRegions`](#strictregions)
+    - [`accessibilityRegions`](#accessibilityregions)
+    - [`accessibilityValidation`](#accessibilityvalidation)
+    - [`ignoreDisplacements`](#ignoredisplacements)
+    - [`sendDom`](#senddom)
+    - [`visualGridOptions`](#visualgridoptions)
+    - [`scriptHooks`](#scripthooks)
+      - [beforeCaptureScreenshot](#beforecapturescreenshot)
+  - [Parameters that cannot be set as an advanced configuration](#parameters-that-cannot-be-set-as-an-advanced-configuration)
+    - [`runBefore` and `runAfter` functions](#runbefore-and-runafter-functions)
+      - [`runBefore`](#runbefore)
+      - [`runAfter`](#runafter)
+    - [`layoutBreakpoints`](#layoutbreakpoints)
+  - [Running Eyes-Storybook in Docker](#running-eyes-storybook-in-docker)
+  - [Dealing with dynamic data](#dealing-with-dynamic-data)
 
 ## Installation
 
@@ -169,9 +178,10 @@ In addition to command-line arguments, it's possible to define the following con
 | `jsonFilePath`            | undefined                   | Directory path of a results file. If set, then a [JSON](https://www.json.org/json-en.html) file is created in this directory, the file is created with the name eyes.json and contains the Eyes test results. |
 | `tapFilePath`             | undefined                   | Directory path of a results file. If set, then a [TAP](https://en.wikipedia.org/wiki/Test_Anything_Protocol#Specification) file is created in this directory, the file is created with the name eyes.tap and contains the Eyes test results. |
 | `xmlFilePath`             | undefined                   | Directory path of a results file. If set, then a [XUnit XML](https://google.github.io/rich-test-results/xunitxml) file is created in this directory, the file is created with the name eyes.xml and contains the Eyes test results. |
-| `waitBeforeScreenshot`    | 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 [waitBeforeScreenshot.](#waitBeforeScreenshot)<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. |
+| `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. |
@@ -439,20 +449,27 @@ storiesOf('Components that support RTL', module)
   )
 ```
 
-### `waitBeforeScreenshot`
+### `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.
 
 ```js
-storiesOf('Components with a waitBeforeScreenshot', module)
+storiesOf('Components with a waitBeforeCapture', module)
   .add(
     'Some story',
     () => <span id="container" class="loading"></span>,
-    {eyes: { waitBeforeScreenshot: '#container.ready' }}
+    {eyes: { waitBeforeCapture: '#container.ready' }}
   );
 ```
 
-_Note that the predicate option for `waitBeforeScreenshot` is currently not available in the per component configuration._
+_Note that the predicate option for `waitBeforeCapture` is currently not available in the per component configuration._
 
 ### `properties`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applitools/eyes-storybook",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "description": "",
   "engines": {
     "node": ">=8.6.0"
@@ -25,10 +25,12 @@
     "storybook": "start-storybook -c test/fixtures/appWithStorybook -p 9001 -s test/fixtures",
     "storybook:jslayout": "start-storybook -c test/fixtures/jsLayoutStorybookLocal -p 9001 -s test/fixtures",
     "storybook:heavy": "start-storybook -c test/fixtures/heavyStorybook -p 9002 -s test/fixtures",
+    "storybook:zeroStories": "start-storybook -c test/fixtures/zeroStoriesRetry -p 9003 -s test/fixtures",
     "eyes-storybook": "node bin/eyes-storybook.js -f test/fixtures/applitools.config.js",
     "eyes-storybook:jslayout": "node bin/eyes-storybook.js -f test/e2e/happy-config/layout-breakpoints-local.config.js",
     "eyes-storybook:heavy": "node bin/eyes-storybook.js -f test/fixtures/heavyStorybook/applitools.config.js",
     "eyes-storybook:configured": "node bin/eyes-storybook.js -f scripts/preconfigured.config.js",
+    "eyes-storybook:zeroStories": "node bin/eyes-storybook.js -f test/fixtures/zeroStoriesRetry/applitools.config.js",
     "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",
@@ -52,16 +54,18 @@
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
     "type": "git",
-    "url": "git://github.com/applitools/eyes.sdk.javascript1.git"
+    "url": "git://github.com/applitools/eyes.sdk.javascript1.git",
+    "directory": "packages/eyes-storybook"
   },
   "dependencies": {
-    "@applitools/driver": "1.2.6",
-    "@applitools/eyes-puppeteer": "1.8.3",
-    "@applitools/eyes-sdk-core": "12.23.17",
+    "@applitools/driver": "1.3.5",
+    "@applitools/eyes-sdk-core": "12.24.5",
     "@applitools/functional-commons": "1.6.0",
+    "@applitools/logger": "1.0.6",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/test-server": "1.0.5",
-    "@applitools/visual-grid-client": "15.8.36",
+    "@applitools/spec-driver-puppeteer": "1.1.0",
+    "@applitools/test-server": "1.0.7",
+    "@applitools/visual-grid-client": "15.8.49",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -74,10 +78,10 @@
   },
   "devDependencies": {
     "@applitools/scripts": "^1.0.1",
-    "@applitools/sdk-release-kit": "0.13.3",
-    "@applitools/sdk-shared": "0.9.6",
+    "@applitools/sdk-release-kit": "0.13.4",
+    "@applitools/sdk-shared": "0.9.9",
     "@applitools/snaptdout": "^1.0.1",
-    "@applitools/utils": "1.2.3",
+    "@applitools/utils": "1.2.4",
     "@storybook/addon-options": "^5.2.8",
     "@storybook/react": "^5.2.8",
     "@testing-library/dom": "^5.6.1",

package/src/addParametrizedStories.js

@@ -0,0 +1,81 @@
+'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;

package/src/cli.js

@@ -1,6 +1,6 @@
 'use strict';
 const yargs = require('yargs');
-const {Logger} = require('@applitools/eyes-sdk-core');
+const {makeLogger} = require('@applitools/logger');
 const {configParams: externalConfigParams} = require('@applitools/visual-grid-client');
 const VERSION = require('../package.json').version;
 const eyesStorybook = require('./eyesStorybook');
@@ -32,8 +32,7 @@ const {performance, timeItAsync} = makeTiming();
     console.log(`Using @applitools/eyes-storybook version ${VERSION}.\n`);
 
     const config = generateConfig({argv, defaultConfig, externalConfigParams});
-    const logger = new Logger(config.showLogs, 'eyes');
-    logger.setIncludeTime(true);
+    const logger = makeLogger({level: config.showLogs ? 'info' : 'silent', label: 'eyes'});
     await validateAndPopulateConfig({config, logger, packagePath: process.cwd()});
     logger.log(`Running with the following config:\n${configDigest(config)}`);
     const [err, results] = await presult(

package/src/defaultConfig.js

@@ -7,8 +7,9 @@ module.exports = {
   storybookUrl: undefined,
   storybookStaticDir: undefined,
   showStorybookOutput: false,
-  waitBeforeScreenshot: 50,
+  waitBeforeScreenshot: 50, // backward compatibility
   waitBeforeScreenshots: 50, // backward compatibility
+  waitBeforeCapture: 50,
   viewportSize: {width: 1024, height: 768},
   tapFilePath: undefined,
   xmlFilePath: undefined,

package/src/eyesStorybook.js

@@ -2,7 +2,7 @@
 const puppeteer = require('puppeteer');
 const getStories = require('../dist/getStories');
 const {makeVisualGridClient} = require('@applitools/visual-grid-client');
-const {presult} = require('@applitools/functional-commons');
+const {presult, delay} = require('@applitools/functional-commons');
 const chalk = require('./chalkify');
 const makeInitPage = require('./initPage');
 const makeRenderStory = require('./renderStory');
@@ -10,7 +10,7 @@ const makeRenderStories = require('./renderStories');
 const makeGetStoryData = require('./getStoryData');
 const ora = require('ora');
 const filterStories = require('./filterStories');
-const addVariationStories = require('./addVariationStories');
+const addParametrizedStories = require('./addParametrizedStories');
 const browserLog = require('./browserLog');
 const memoryLog = require('./memoryLog');
 const getIframeUrl = require('./getIframeUrl');
@@ -18,12 +18,14 @@ 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');
 
 const CONCURRENT_PAGES = 3;
+const MAX_RETRIES = 10;
+const RETRY_INTERVAL = 1000;
 
 async function eyesStorybook({
   config,
@@ -37,7 +39,7 @@ async function eyesStorybook({
   let transitioning = false;
   takeMemLoop();
   logger.log('eyesStorybook started');
-  const {storybookUrl, waitBeforeScreenshot, readStoriesTimeout, reloadPagePerStory} = config;
+  const {storybookUrl, waitBeforeCapture, readStoriesTimeout, reloadPagePerStory} = config;
 
   let iframeUrl;
   try {
@@ -76,20 +78,21 @@ async function eyesStorybook({
   });
   const pagePool = createPagePool({initPage, logger});
 
-  const doTakeDomSnapshots = async ({page, layoutBreakpoints}) => {
-    const driver = new Driver({spec, driver: page, logger: logger._getNewLogger()});
+  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,
       getViewportSize: () => config.viewportSize,
       getIosDevicesSizes,
       getEmulatedDevicesSizes,
+      waitBeforeCapture,
     });
     return result;
   };
@@ -113,14 +116,17 @@ async function eyesStorybook({
     );
 
     const filteredStories = filterStories({stories, config});
-    const storiesIncludingVariations = addVariationStories({stories: filteredStories, config});
+    const storiesIncludingParametrizedVariations = addParametrizedStories({
+      stories: filteredStories,
+      config,
+    });
 
-    logger.log(`starting to run ${storiesIncludingVariations.length} stories`);
+    logger.log(`starting to run ${storiesIncludingParametrizedVariations.length} stories`);
 
     const getStoryData = makeGetStoryData({
       logger,
       takeDomSnapshots: doTakeDomSnapshots,
-      waitBeforeScreenshot,
+      waitBeforeCapture,
     });
 
     const renderStory = makeRenderStory({
@@ -152,7 +158,7 @@ async function eyesStorybook({
         setRenderIE,
         setTransitioningIntoIE,
         configs,
-        stories: storiesIncludingVariations,
+        stories: storiesIncludingParametrizedVariations,
         pagePool,
         logger,
         timeItAsync,
@@ -202,9 +208,9 @@ async function eyesStorybook({
       spinner.fail(failMsg);
       throw new Error();
     }
-    const [getStoriesErr, stories] = await presult(
-      page.evaluate(getStories, {timeout: readStoriesTimeout}),
-    );
+
+    const [getStoriesErr, stories] = await readStoriesWithRetry(MAX_RETRIES);
+
     if (getStoriesErr) {
       logger.log('Error in getStories:', getStoriesErr);
       const failMsg = refineErrorMessage({
@@ -256,6 +262,19 @@ async function eyesStorybook({
   function getTransitiongIntoIE() {
     return transitioning;
   }
+
+  async function readStoriesWithRetry(remainingRetries) {
+    const [getStoriesErr, stories] = await presult(
+      page.evaluate(getStories, {timeout: readStoriesTimeout}),
+    );
+    if (getStoriesErr || stories.length > 0 || remainingRetries == 0) {
+      return [getStoriesErr, stories];
+    } else {
+      logger.log(`Got 0 stories, retrying to read stories... ${remainingRetries - 1} are left`);
+      await delay(RETRY_INTERVAL);
+      return await readStoriesWithRetry(remainingRetries - 1);
+    }
+  }
 }
 
 module.exports = eyesStorybook;

package/src/generateConfig.js

@@ -14,24 +14,29 @@ function generateConfig({argv = {}, defaultConfig = {}, externalConfigParams = [
   const result = Object.assign({}, defaultConfig, config, argvConfig);
 
   // backward compatibility
-  if (
-    result.waitBeforeScreenshots !== defaultConfig.waitBeforeScreenshots &&
-    result.waitBeforeScreenshot === defaultConfig.waitBeforeScreenshot
-  ) {
-    console.log(
-      deprecationWarning({
-        deprecatedThing: "'waitBeforeScreenshots'",
-        newThing: "'waitBeforeScreenshot' (no 's')",
-      }),
-    );
-    result.waitBeforeScreenshot = result.waitBeforeScreenshots;
+  if (result.waitBeforeCapture === defaultConfig.waitBeforeCapture) {
+    if (result.waitBeforeScreenshots !== defaultConfig.waitBeforeScreenshots) {
+      console.log(
+        deprecationWarning({
+          deprecatedThing: "'waitBeforeScreenshots'",
+          newThing: "'waitBeforeCapture'",
+        }),
+      );
+      result.waitBeforeCapture = result.waitBeforeScreenshots;
+    }
+    if (result.waitBeforeScreenshot !== defaultConfig.waitBeforeScreenshot) {
+      console.log(
+        deprecationWarning({
+          deprecatedThing: "'waitBeforeScreenshot'",
+          newThing: "'waitBeforeCapture'",
+        }),
+      );
+      result.waitBeforeCapture = result.waitBeforeScreenshot;
+    }
   }
 
-  if (
-    typeof result.waitBeforeScreenshot === 'string' &&
-    !isNaN(parseInt(result.waitBeforeScreenshot))
-  ) {
-    result.waitBeforeScreenshot = Number(result.waitBeforeScreenshot);
+  if (typeof result.waitBeforeCapture === 'string' && !isNaN(parseInt(result.waitBeforeCapture))) {
+    result.waitBeforeCapture = Number(result.waitBeforeCapture);
   }
 
   if (result.showLogs === '1') {

package/src/getStoryBaselineName.js

@@ -0,0 +1,13 @@
+'use strict';
+const getStoryTitle = require('./getStoryTitle');
+
+function getStoryBaselineName({name, kind, parameters}) {
+  const storyTitle = getStoryTitle({name, kind, parameters});
+  const queryParam = parameters && parameters.eyes && parameters.eyes.queryParam;
+
+  if (!queryParam || queryParam.name === 'eyes-variation') return storyTitle;
+
+  return `${storyTitle} [${queryParam.name}=${queryParam.value}]`;
+}
+
+module.exports = getStoryBaselineName;

package/src/getStoryData.js

@@ -3,25 +3,30 @@ 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, waitBeforeScreenshot, reloadPagePerStory}) {
-  return async function getStoryData({story, storyUrl, page, waitBeforeStory}) {
-    const title = getStoryTitle(story);
+function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPagePerStory}) {
+  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;
+      const expectedQueryParam = eyesParameters ? eyesParameters.queryParam : undefined;
+      const actualQueryParam = await getQueryParam(
+        eyesParameters && eyesParameters.queryParams
+          ? eyesParameters.queryParams.map(queryParam => queryParam.name)
+          : undefined,
+      );
       if (
-        (!actualVariationParam && !expectedVariationUrlParam) ||
-        actualVariationParam === expectedVariationUrlParam
+        (!actualQueryParam && !expectedQueryParam) ||
+        (actualQueryParam &&
+          expectedQueryParam &&
+          actualQueryParam.value === expectedQueryParam.name &&
+          actualQueryParam.value === expectedQueryParam.value)
       ) {
         const err = await page.evaluate(renderStoryWithClientAPI, story.index);
         err && handleRenderStoryError(err);
@@ -32,9 +37,9 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeScreenshot, reloa
       await renderStoryLegacy();
     }
 
-    const wait = waitBeforeStory || waitBeforeScreenshot;
+    const wait = waitBeforeStory || waitBeforeCapture;
     if (typeof wait === 'number') {
-      ArgumentGuard.greaterThanOrEqualToZero(wait, 'waitBeforeScreenshot', true);
+      ArgumentGuard.greaterThanOrEqualToZero(wait, 'waitBeforeCapture', true);
     }
     if (wait) {
       logger.log(`waiting before screenshot of ${title} ${wait}`);
@@ -49,9 +54,16 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeScreenshot, reloa
 
     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 () => {
+            logger.log(`waiting before screenshot of ${title} ${wait}`);
+            await waitFor(page, wait);
+          }
+        : undefined,
     });
 
     if (eyesParameters && eyesParameters.runAfter) {
@@ -61,7 +73,7 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeScreenshot, reloa
     }
 
     logger.log(`done getting data from story`, title);
-    return snapshots;
+    return result;
 
     async function renderStoryLegacy() {
       logger.log(`getting data from story ${storyUrl}`);
@@ -72,9 +84,16 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeScreenshot, reloa
       }
     }
 
-    async function getEyesVariationParam() {
+    async function getQueryParam(queryParamNames = []) {
       try {
-        return new URL(await page.url()).searchParams.get('eyes-variation');
+        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)};
+        }
       } catch (ex) {
         logger.log('failed to get url from page (in need of eyes-variation param)');
       }

package/src/getStoryTitle.js

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

package/src/getStoryUrl.js

@@ -2,12 +2,12 @@
 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 queryParam = parameters && parameters.eyes && parameters.eyes.queryParam;
+  const queryParamString = queryParam ? `&${queryParam.name}=${queryParam.value}` : '';
 
   return `${getIframeUrl(baseUrl)}&selectedKind=${encodeURIComponent(
     kind,
-  )}&selectedStory=${encodeURIComponent(name)}${variation}`;
+  )}&selectedStory=${encodeURIComponent(name)}${queryParamString}`;
 }
 
 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,16 +61,17 @@ function makeRenderStories({
       async function processStory() {
         const story = stories[currIndex++];
         const storyUrl = getStoryUrl(story, storybookUrl);
-        const title = getStoryTitle(story);
-        const {waitBeforeScreenshot} = (story.parameters && story.parameters.eyes) || {};
+        const title = getStoryBaselineName(story);
+        const {waitBeforeCapture} = (story.parameters && story.parameters.eyes) || {};
 
         try {
           let [error, storyData] = await presult(
             getStoryData({
               story,
               storyUrl,
+              browser: config.browser,
               page,
-              waitBeforeStory: waitBeforeScreenshot,
+              waitBeforeStory: waitBeforeCapture,
             }),
           );
 
@@ -89,8 +90,9 @@ function makeRenderStories({
               getStoryData({
                 story,
                 storyUrl,
+                browser: config.browser,
                 page: newPageObj.page,
-                waitBeforeStory: waitBeforeScreenshot,
+                waitBeforeStory: waitBeforeCapture,
               }),
             );
             error = newError;
@@ -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,10 +1,12 @@
 '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 {
@@ -41,10 +43,11 @@ function makeRenderStory({logger, testWindow, performance, timeItAsync}) {
       ignoreRegionsBackCompat = ignore;
     }
 
-    logger.log('running story', title);
+    logger.log(`running story ${title} with baseline ${baselineName}`);
 
     const openParams = {
-      testName: title,
+      testName: baselineName,
+      displayName: title,
       browser: config.browser,
       properties: [
         {name: 'Component name', value: kind},
@@ -77,12 +80,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/addVariationStories.js

@@ -1,54 +0,0 @@
-'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 storiesByVariation = {};
-
-  for (const story of storiesToAddVariations) {
-    const variations = getStoryVariations(story);
-    if (!Array.isArray(variations)) {
-      throw new Error('variations should be an array');
-    }
-
-    for (const variation of variations) {
-      const variationArr = storiesByVariation[variation] || (storiesByVariation[variation] = []);
-      variationArr.push({
-        ...story,
-        parameters: addFlagToParameters(story.parameters, variation),
-      });
-    }
-  }
-
-  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;
-    }
-
-    if (globalVariationFunc) {
-      return globalVariationFunc(story);
-    }
-
-    if (globalVariationArray) return globalVariationArray;
-  }
-}
-
-function addFlagToParameters(parameters, variation) {
-  return parameters
-    ? {
-        ...parameters,
-        eyes: parameters.eyes
-          ? {...parameters.eyes, variationUrlParam: variation}
-          : {variationUrlParam: variation},
-      }
-    : {eyes: {variationUrlParam: variation}};
-}
-
-module.exports = addVariationStories;