@applitools/eyes-storybook 3.25.1 → 3.25.2

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 ## Unreleased
 
 
+## 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)

package/README.md

@@ -4,43 +4,51 @@ 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)
+    - [`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,7 +177,7 @@ 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).|
 | `notifyOnCompletion`      | false                       | If `true` batch completion notifications are sent. |
@@ -439,20 +447,20 @@ storiesOf('Components that support RTL', module)
   )
 ```
 
-### `waitBeforeScreenshot`
+### `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.1",
+  "version": "3.25.2",
   "description": "",
   "engines": {
     "node": ">=8.6.0"
@@ -52,16 +52,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.4",
-    "@applitools/eyes-sdk-core": "12.23.18",
+    "@applitools/driver": "1.2.7",
+    "@applitools/eyes-puppeteer": "1.8.5",
+    "@applitools/eyes-sdk-core": "12.23.24",
     "@applitools/functional-commons": "1.6.0",
+    "@applitools/logger": "1.0.5",
     "@applitools/monitoring-commons": "1.0.19",
-    "@applitools/test-server": "1.0.5",
-    "@applitools/visual-grid-client": "15.8.37",
+    "@applitools/test-server": "1.0.6",
+    "@applitools/visual-grid-client": "15.8.43",
     "boxen": "4.2.0",
     "chalk": "3.0.0",
     "detect-port": "1.3.0",
@@ -74,10 +76,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.7",
     "@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/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

@@ -37,7 +37,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,8 +76,8 @@ 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, layoutBreakpoints, waitBeforeCapture}) => {
+    const driver = new Driver({spec, driver: page, logger});
     const skipResources = getResourceUrlsInCache();
     const result = await takeDomSnapshots({
       logger,
@@ -90,6 +90,7 @@ async function eyesStorybook({
       getViewportSize: () => config.viewportSize,
       getIosDevicesSizes,
       getEmulatedDevicesSizes,
+      waitBeforeCapture,
     });
     return result;
   };
@@ -120,7 +121,7 @@ async function eyesStorybook({
     const getStoryData = makeGetStoryData({
       logger,
       takeDomSnapshots: doTakeDomSnapshots,
-      waitBeforeScreenshot,
+      waitBeforeCapture,
     });
 
     const renderStory = makeRenderStory({

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/getStoryData.js

@@ -8,7 +8,7 @@ const {URL} = require('url');
 const runRunAfterScript = require('../dist/runRunAfterScript');
 const waitFor = require('./waitFor');
 
-function makeGetStoryData({logger, takeDomSnapshots, waitBeforeScreenshot, reloadPagePerStory}) {
+function makeGetStoryData({logger, takeDomSnapshots, waitBeforeCapture, reloadPagePerStory}) {
   return async function getStoryData({story, storyUrl, page, waitBeforeStory}) {
     const title = getStoryTitle(story);
     logger.log(`getting data from story`, title);
@@ -32,9 +32,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}`);
@@ -52,6 +52,12 @@ function makeGetStoryData({logger, takeDomSnapshots, waitBeforeScreenshot, reloa
     const snapshots = await takeDomSnapshots({
       page,
       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) {

package/src/renderStories.js

@@ -62,7 +62,7 @@ function makeRenderStories({
         const story = stories[currIndex++];
         const storyUrl = getStoryUrl(story, storybookUrl);
         const title = getStoryTitle(story);
-        const {waitBeforeScreenshot} = (story.parameters && story.parameters.eyes) || {};
+        const {waitBeforeCapture} = (story.parameters && story.parameters.eyes) || {};
 
         try {
           let [error, storyData] = await presult(
@@ -70,7 +70,7 @@ function makeRenderStories({
               story,
               storyUrl,
               page,
-              waitBeforeStory: waitBeforeScreenshot,
+              waitBeforeStory: waitBeforeCapture,
             }),
           );
 
@@ -90,7 +90,7 @@ function makeRenderStories({
                 story,
                 storyUrl,
                 page: newPageObj.page,
-                waitBeforeStory: waitBeforeScreenshot,
+                waitBeforeStory: waitBeforeCapture,
               }),
             );
             error = newError;