Applitools SDK for Storybook. This repository is deprecated. It has moved to https://github.com/applitools/eyes.sdk.javascript1/tree/master/packages/eyes-storybook
License: Other
This repository is deprecated. It has moved to eyes-sdk-javascript
Hi,
I was trying to write visual test cases for our storybook application for React.
I followed this page(https://applitools.com/tutorials/storybook-react.html).
After running command(npx eyes-storybook -u http://localhost:9001), I could see the Test result generated for all the stories but the Screenshots were blank.
Could you please let me know if I am missing any other step?
Hi,
I am trying to run storybook-eyes on a demo project I deployed to Azure blob storage. The exact same project worked fine when targeting a GitHub page, but it doesn't seem to work on a static website deployed to Azure. Is this a known issue?
The error I am getting is: Error when reading stories: could not determine storybook version in order to extract stories.
URL: https://frontendblobstore.blob.core.windows.net/$web/index.html
I am using Storybook v5.3.4 and eyes-storybook v3.2.5.
Any help would be greatly appreciated.
I want to import the results of the test run into my CI system (jenkins). To do this i would like the results results formatted as a junit file.
It looks like the rest results are stored in a structured way in https://github.com/applitools/Eyes.Sdk.JavaScript/blob/master/packages/eyes.sdk/src/TestResultsFormatter.js so this should be possible.
Even if you output the results in a structured json file i am happy to convert it to the junit format.
I am using storybook, but this issue may be better on the Eyes.Sdk.JavaScript repo, let me know if i should move it/link it
It appears that in 2.7.11 a call to the Node URL module was added.
When eyes-storybook runs, URL is not defined, so the script exits without running any tests.
Error is caused by this line of code:
Steps to reproduce:
Install the tutorial repo
On the command line, export APPLITOOLS_API_KEY=<Your valid key>
Run npx eyes-storybook once just to ensure that all is working as expected
Run npx @applitools/[email protected] --storybookUrl http://whatever
(Note, it does not matter what you set --storybookUrl to - any string will cause this)
Expected behavior:
If you have Storybook running in another command window, it runs your tests; otherwise it attempts to run your tests and says it couldn't find any.
Actual behavior:
Outputs URL is not defined
Log output - not that I think you will need it:
Downloading Chromium r672088 - 108 Mb [====================] 100% 0.0s
Using @applitools/eyes-storybook version 2.7.11.
2019-07-04T08:01:23Z Eyes: [LOG ] {} (): Running with the following config:
concurrency : 10
storybookPort : 9000
storybookHost : localhost
storybookConfigDir : .storybook
storybookUrl : http://whatever
storybookStaticDir : undefined
showStorybookOutput : false
waitBeforeScreenshots : 50
tapFilePath : undefined
showLogs : true
apiKey : secret!
appName : tutorial-storybook-react
batchName : tutorial-storybook-react
agentId : eyes-storybook/2.7.11
2019-07-04T08:01:23Z Eyes: [LOG ] {} (): eyesStorybook started
URL is not defined
After running eyes-storybook i want to generate a slack message that directs developers to the batch that was just run.
Ultimately ill follow this guide
https://applitools.com/blog/integrate-test-results-slack but i dont have access to the testresults object in js.
I have found the TAP output #20 and while i can get most of what i want from it, it doesn't seem the easiest way. I feel like im missing something obvious. Is there additional arguments that are present on the js sdk, that im not seeing as im using storybook?
I'm using the eyes-storybook in my build process, and I would like it to close with an error in case of eyes diff.
Currently, it shows an error message, but keeps running for the next command.
For example in my package.json:
test:eyes-storybook": "eyes-storybook -c ./.storybook-test && 'echo should not echo'",
⇒ npm run test:eyes-storybook
> [email protected] test:eyes-storybook /Users/shlomitc/Projects/wix-style-react
> eyes-storybook -c ./.storybook-test && echo 'should not echo'
Using @applitools/eyes-storybook version 2.5.2.
✔ Storybook was started
✔ Reading stories
✖ Done 42 stories out of 42
[EYES: TEST RESULTS]:
Accordion: simple [1024x768] - Passed
AddItem/disabled theme: image [1024x768] - Passed
MessageBox/Alert: FootNote [1024x768] - Passed
Accordion: withButton [1024x768] - Passed
AddItem/size: tiny [1024x768] - Passed
MessageBox/Alert: Actions [1024x768] - Passed
AddItem/size: small [1024x768] - Passed
MessageBox/AlertRTL: Actions [1024x768] - Passed
Accordion: multiple [1024x768] - Failed 1 of 1
AddItem/size: medium [1024x768] - Passed
MessageBox/Destructive: Standard [1024x768] - Passed
Accordion: inCard [1024x768] - Passed
AddItem/size: large [1024x768] - Passed
MessageBox/Destructive: Secondary [1024x768] - Passed
AddItem/alignItems: center [1024x768] - Passed
GooglePreview/basic: default render [1024x768] - Passed
MessageBox/Announcement: Standard [1024x768] - Passed
AddItem/alignItems: right [1024x768] - Passed
GooglePreview/description: no description [1024x768] - Passed
AddItem/alignItems: left [1024x768] - Passed
MessageBox/Announcement: Footnote [1024x768] - Passed
GooglePreview/description: multiline [1024x768] - Passed
AddItem/theme: dashes [1024x768] - Passed
MessageBox/Announcement: DisabledAction [1024x768] - Passed
MessageBox/Alert: EmptyState [1024x768] - Passed
AddItem/theme: plain [1024x768] - Passed
MessageBox/Announcement: PremiumAction [1024x768] - Passed
MessageBox/Alert: Standard [1024x768] - Passed
MessageBox/AnnouncementRTL: Standard [1024x768] - Passed
AddItem/theme: filled [1024x768] - Passed
MessageBox/Alert: Secondary [1024x768] - Passed
MessageBox/AnnouncementRTL: Footnote [1024x768] - Passed
AddItem/theme: image [1024x768] - Passed
MessageBox/Alert: ImageWithSideAction [1024x768] - Passed
AddItem/disabled theme: dashes [1024x768] - Passed
MessageBox/AnnouncementRTL: DisabledAction [1024x768] - Passed
MessageBox/Alert: Scrollable [1024x768] - Passed
AddItem/disabled theme: plain [1024x768] - Passed
MessageBox/AnnouncementRTL: PremiumAction [1024x768] - Passed
MessageBox/Alert: Image [1024x768] - Passed
AddItem/disabled theme: filled [1024x768] - Passed
SocialPreview/basic: default render [1024x768] - Passed
A total of 1 difference was found.
See details at ...
Total time: 34 seconds
Important notice: the Applitools visual tests are currently running with a concurrency value of 10.
This means that only up to 10 visual tests can run in parallel, and therefore the execution might be slow. This is the default behavior for free accounts.
If your account does support a higher level of concurrency, it's possible to pass a different value by specifying `concurrency:X` in the applitools.config.js file.
For more information on how to configure the concurrency level, visit the following link: https://www.npmjs.com/package/@applitools/eyes-storybook#concurrency.
If you are interested in speeding up your visual tests, contact [email protected] to get a trial account and a higher level of concurrency.
should not echo
as you can see should not echo is printted although there was an error
I am trying to use this package with newer version of storybook and it doesn't seem to work. Do you guys have plans to fix this?
Currenly unable to run storybook eyes due to
TypeError: Cannot convert undefined or null to object
version : "@applitools/eyes-storybook": "2.8.6",
this thanks to Object.values on AccessibilityRegionType which is null
use strict';
const { TypeUtils } = require('@applitools/eyes-common');
const { AccessibilityRegionType } = require('@applitools/eyes-common');
function isInvalidAccessibility(accessibility = []) {
console.log({ type: AccessibilityRegionType });
const accObjects = [].concat(accessibility);
const err = [];
const typeMsg = `Valid accessibilityType values are: ${Object.values(AccessibilityRegionType)}`;
for (const acc of accObjects) {
if (
acc.accessibilityType &&
!TypeUtils.has(AccessibilityRegionType, acc.accessibilityType)
) {
err.push(
`The region ${JSON.stringify(acc)} has an invalid accessibilityType of: ${
acc.accessibilityType
} `
);
!err.length && err.unshift(typeMsg);
}
}
return err.join('\n');
}
module.exports = isInvalidAccessibility;
results in the following log
✔ Storybook was started
✔ Reading stories
⠴ Done 0 stories out of 1{ type: undefined }
✖ Done 1 stories out of 1
undefined [ TypeError: Cannot convert undefined or null to object
at Function.values (<anonymous>)
at isInvalidAccessibility (/Users/matthewlowry/dev/bp/smp-carama-workshop-ui/node_modules/@applitools/eyes-storybook/node_modules/@applitools/visual-grid-client/src/sdk/isInvalidAccessibility.js:9:67)
at checkWindow (/Users/matthewlowry/dev/bp/smp-carama-workshop-ui/node_modules/@applitools/eyes-storybook/node_modules/@applitools/visual-grid-client/src/sdk/checkWindow.js:69:24)
at timeItAsync (/Users/matthewlowry/dev/bp/smp-carama-workshop-ui/node_modules/@applitools/eyes-storybook/src/renderStory.js:39:13)
at process._tickCallback (internal/process/next_tick.js:68:7) ]
Hey,
The runBefore property is really great.
However, sometimes the code in this part can get a bit long and complicated, and I wonder if there's a way to debug it.
Thanks
My eyes tests are running in CI but started to fail inconsistently.
I get Error: connect ETIMEDOUT and Error: failed to render screenshot messages, even though the tests are passing. It's either the passing indication is wrong, or something else is failing without any indication.
I wish I could provide you a reproducible example, but looks like it's network related issue, either on my side or applitools'.
any clue?
[23:13:13][npm run test] Using @applitools/eyes-storybook version 2.6.5.
[23:13:13][npm run test]
[23:13:13][npm run test] - Starting storybook server
[23:13:28][npm run test] ✔ Storybook was started
[23:13:28][npm run test] - Reading stories
[23:13:30][npm run test] ✔ Reading stories
[23:13:30][npm run test] - Done 0 stories out of 49
[23:16:22][npm run test] ✖ Done 49 stories out of 49
[23:16:22][npm run test]
[23:16:22][npm run test] [EYES: TEST RESULTS]:
[23:16:22][npm run test] Accordion: simple [1024x768] - Passed
[23:16:22][npm run test] AddItem/size: medium [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Announcement: Standard [1024x768] - Passed
[23:16:22][npm run test] Accordion: withButton [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Announcement: Footnote [1024x768] - Passed
[23:16:22][npm run test] AddItem/size: large [1024x768] - Passed
[23:16:22][npm run test] Accordion: multiple [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Announcement: DisabledAction [1024x768] - Passed
[23:16:22][npm run test] GooglePreview/basic: default render [1024x768] - Passed
[23:16:22][npm run test] Accordion: inCard [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Announcement: PremiumAction [1024x768] - Passed
[23:16:22][npm run test] GooglePreview/description: no description [1024x768] - Passed
[23:16:22][npm run test] AddItem/alignItems: center [1024x768] - Passed
[23:16:22][npm run test] MessageBox/AnnouncementRTL: Standard [1024x768] - Passed
[23:16:22][npm run test] GooglePreview/description: multiline [1024x768] - Passed
[23:16:22][npm run test] AddItem/alignItems: right [1024x768] - Passed
[23:16:22][npm run test] MessageBox/AnnouncementRTL: Footnote [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Alert: EmptyState [1024x768] - Passed
[23:16:22][npm run test] AddItem/alignItems: left [1024x768] - Passed
[23:16:22][npm run test] MessageBox/AnnouncementRTL: DisabledAction [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Alert: Standard [1024x768] - Passed
[23:16:22][npm run test] AddItem/theme: dashes [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Alert: Secondary [1024x768] - Passed
[23:16:22][npm run test] MessageBox/AnnouncementRTL: PremiumAction [1024x768] - Passed
[23:16:22][npm run test] RichTextInputArea/Editor: Bold [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Alert: Scrollable [1024x768] - Passed
[23:16:22][npm run test] RichTextInputArea/Editor: Italic [1024x768] - Passed
[23:16:22][npm run test] AddItem/theme: image [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Alert: Image [1024x768] - Passed
[23:16:22][npm run test] AddItem/disabled theme: dashes [1024x768] - Passed
[23:16:22][npm run test] MessageBox/Alert: FootNote [1024x768] - Passed
[23:16:22][npm run test] AddItem/disabled theme: plain [1024x768] - Passed
[23:16:22][npm run test]
[23:16:22][npm run test] The following errors were found:
[23:16:22][npm run test] Error: failed to render screenshot d429d961-b58f-4df5-b185-364da2d3e113
[23:16:22][npm run test] Error: connect ETIMEDOUT 104.196.248.157:443
[23:16:22][npm run test] Error: failed to render screenshot d190fc32-f0de-4fd5-86e3-30bf40c3787f
[23:16:22][npm run test] Error: failed to render screenshot ba6f8333-0f99-4bb8-9f3e-2b60ef336887
[23:16:22][npm run test] Error: failed to render screenshot 647f9988-e4f8-4f5c-b202-0806e58acd6b
[23:16:22][npm run test] Error: failed to render screenshot 0cdb8b00-9da6-4199-b482-15017fbf2f5f
[23:16:22][npm run test] Error: failed to render screenshot 0c1ac45f-da35-4c23-9fd2-772bc92588ac
[23:16:22][npm run test] Error: failed to render screenshot 99d87f66-e02e-47c9-afb4-6e08dda0927c
[23:16:22][npm run test] Error: failed to render screenshot 5bf5afd3-0118-47c6-b8cb-cf843c9e98d1
[23:16:22][npm run test] Error: failed to render screenshot ccf474a5-295f-4e12-8116-65ad0b53088c
[23:16:22][npm run test] Error: failed to render screenshot afc017fa-f2b9-4b15-88c5-8416fd3c2a68
[23:16:22][npm run test] Error: failed to render screenshot d2f29f28-dc99-429e-abeb-b97e910f0829
[23:16:22][npm run test] Error: failed to render screenshot d58f5443-f3c8-40ee-908e-037d5948ef47
[23:16:22][npm run test] Error: failed to render screenshot 529a4dd8-e033-4fc5-9cf0-9bbb4897804f
[23:16:22][npm run test] Error: failed to render screenshot fcd6f704-7bd7-41d4-ba2a-ad869c8dc31f
[23:16:22][npm run test] Error: failed to render screenshot 6a04626a-073e-4751-a0ce-cfc23e768e13
[23:16:22][npm run test] Error: failed to render screenshot e74ef5e0-e37a-46a7-9128-a9dba42251ef
[23:16:22][npm run test] No differences were found!
[23:16:22][npm run test]
[23:16:22][npm run test] See details at https://eyes.applitools.com/app/test-results/***********************
[23:16:22][npm run test] Total time: 174 seconds
[23:16:22][npm run test] Trying to run for the first time and receiving the following error:
Using @applitools/eyes-storybook version 2.6.18.
✔ Storybook was started
✔ Reading stories
⠼ Done 69 stories out of 70(node:19985) UnhandledPromiseRejectionWarning: TypeError: testResults.every is not a function
at didTestPass (/Users/8888/Sites/Company/App/node_modules/@applitools/eyes-storybook/src/renderStories.js:44:26)
at Array.every (<anonymous>)
at renderStoriesPromise.then.results (/Users/8888/Sites/Company/App/node_modules/@applitools/eyes-storybook/src/renderStories.js:39:15)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:189:7)
(node:19985) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 141)
(node:19985) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
⠴ Done 70 stories out of 70
The following errors were found:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Error: write EPROTO 4557878720:error:140770FC:SSL routines:SSL23_GET_SERVER_HELLO:unknown protocol:../deps/openssl/openssl/ssl/s23_clnt.c:827:
Important notice: the Applitools visual tests are currently running with a concurrency value of 10.
This means that only up to 10 visual tests can run in parallel, and therefore the execution might be slow. This is the default behavior for free accounts.
If your account does support a higher level of concurrency, it's possible to pass a different value by specifying `concurrency:X` in the applitools.config.js file.
For more information on how to configure the concurrency level, visit the following link: https://www.npmjs.com/package/@applitools/eyes-storybook#concurrency.
If you are interested in speeding up your visual tests, contact [email protected] to get a trial account and a higher level of concurrency.
This change to get the Storybook package version which was introduced recently ef1b4cd#diff-ffc54b688c373955b55f9c9dac675f52R9 relies on the presence of a package.json at the path \node_modules\@applitools\eyes.storybook\node_modules\@storybook\react\package.json
As a consumer of the eyes.storybook library running npm install from my app directory will not install these child modules under node_modules\@applitools\eyes.storybook so the package.json is not found and eyes.storybook fails with error:
Error: ENOENT: no such file or directory, open '<My App>\node_modules\@applitools\eyes.storybook\node_modules\@storybook\react\package.json'
To work around this i need to add a postinstall step to run npm install directly in the eyes.storybook module directory "postinstall": "cd node_modules\\@applitools\\eyes.storybook && npm install"
This adds another 60-70 secs of overhead to do a second npm install when doing a clean run.
As the code is trying to just find a package version number for display is there another way this could work or if not could it possibly be dropped altogether?
Note: I have also raised a PR to move this code from const to a function as this currently causes a failure even when using a storybookUrl and not the storybookServer Move getting the storybook package version from a const to a function
I'm pretty new to this stuff, but I added applitools-eyes to a package my team is using with storybook, and when I try to run it, I don't get very far:
Using @applitools/eyes-storybook version 2.7.21.
2019-08-01T18:19:56Z Eyes: [LOG ] {} (): Running with the following config:
concurrency : 60
storybookPort : 9000
storybookHost : localhost
storybookConfigDir : .storybook
storybookUrl : http://url-of-my-app.com
storybookStaticDir : undefined
showStorybookOutput : false
waitBeforeScreenshots : 700
tapFilePath : undefined
exitcode : true
appName : Project
showLogs : true
apiKey : MyApIKeyHere
matchLevel : Layout2
batchName : Testing
agentId : eyes-storybook/2.7.21
2019-08-01T18:19:56Z Eyes: [LOG ] {} (): eyesStorybook started
2019-08-01T18:19:56Z Eyes: [LOG ] {} (): browser launched
2019-08-01T18:19:56Z Eyes: [LOG ] {} (): 3 pages open
2019-08-01T18:19:56Z Eyes: [LOG ] {} (): got script for processPage
2019-08-01T18:19:56Z Eyes: [LOG ] {} (): finished creating functions
⠋ Reading stories2019-08-01T18:19:56Z Eyes: [LOG ] {} (): navigating to storybook url: http://url-of-my-app.com
⠦ Reading stories2019-08-01T18:20:00Z Eyes: [LOG ] {} (): Getting stories from storybook
⠏ Reading stories2019-08-01T18:20:10Z Eyes: [LOG ] {} (): Error: Evaluation failed: [object Object]
at ExecutionContext._evaluateInternal (/Users/me/project/node_modules/puppeteer/lib/ExecutionContext.js:122:13)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:189:7)
-- ASYNC --
at ExecutionContext.<anonymous> (/Users/me/project/node_modules/puppeteer/lib/helper.js:111:15)
at DOMWorld.evaluate (/Users/me/project/node_modules/puppeteer/lib/DOMWorld.js:112:20)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:189:7)
-- ASYNC --
at Frame.<anonymous> (/Users/me/project/node_modules/puppeteer/lib/helper.js:111:15)
at Page.evaluate (/Users/me/project/node_modules/puppeteer/lib/Page.js:827:43)
at Page.<anonymous> (/Users/me/project/node_modules/puppeteer/lib/helper.js:112:23)
at eyesStorybook (/Users/me/project/node_modules/@applitools/eyes-storybook/src/eyesStorybook.js:67:30)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:189:7)
2019-08-01T18:20:10Z Eyes: [LOG ] {} (): total time:
⠋ Reading stories
Test is finished but no results returned.
✨ Done in 14.71s.
I haven't made any changes to puppeteer, so I'm not sure what this could be related to.
npx eyes-storybook -u http://localhost:8000 --showStorybookOutput
Using @applitools/eyes-storybook version 3.2.3.
✔ Reading stories
✔ Done 0 stories out of 0
Test is finished but no results returned.
I have a simple storybook app with 1 story.
Contents of esds-button.stories.js:
import { EsdsButton } from '@eightshapes/esds-button';
customElements.define('esds-button', EsdsButton);
export default { title: 'EsdsButton' };
export const withText = () => "<esds-button size='large'>Hello World Large</esds-button><esds-button>Hello World</esds-button>";
I can run storybook locally and see everything on localhost:8000.
What am I missing?
Hello,
We're using eyes-storybook in our CI environment, and lately we've been getting this exception:
> eyes-storybook -c ./.storybook-test
[npm run test]
[npm run test] Using @applitools/eyes-storybook version 2.7.19.
[npm run test]
[npm run test] - Starting storybook server
[npm run test] ✔ Storybook was started
[npm run test] - Reading stories
[npm run test] ✔ Reading stories
[npm run test] - Done 0 stories out of 34
[npm run test] ✖ Done 34 stories out of 34
[npm run test] result.getName is not a function
[npm run test] npm ERR! code ELIFECYCLE
[npm run test] npm ERR! errno 1I'm trying to follow the documentation and creating a brand new angular project to test applitools storybook angular, but no story tests are being executed.
Applitools documentation that I'm following:
https://applitools.com/tutorials/storybook-angular.html#how-it-works
Node: v10.15.3
Steps to reproduce:
# Creating a new project
ng new bug-example
Routes: Y
Styles type: CSS
cd bug-example
# Adding storybooks
npx -p @storybook/cli sb init --type angular
# Adding and running
npm install --save-dev @applitools/eyes.storybook
export APPLITOOLS_API_KEY=xyz
npx eyes-storybook
Result:
bug-example git:(master) ✗ npx eyes-storybook
Using @applitools/eyes.storybook version 2.3.13.
✔ Storybook was started
⠦ Reading stories
Test is finished but no results returned.
Expected result:
At least one story (the button default one) should have been tested.
If I run it again with showLogs this is what I get:
bug-example git:(master) ✗ npx eyes-storybook --showLogs=true
Using @applitools/eyes.storybook version 2.3.13.
2019-04-28T17:16:35Z Eyes: [LOG ] {} (): /Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/.bin/start-storybook -p 9000 -h localhost -c .storybook --ci
✔ Storybook was started
2019-04-28T17:16:45Z Eyes: [LOG ] {} (): Running with the following config:
concurrency : 10
storybookPort : 9000
storybookHost : localhost
storybookConfigDir : .storybook
storybookUrl : http://localhost:9000
storybookStaticDir : undefined
showStorybookOutput : false
waitBeforeScreenshots : 50
apiKey : Ysaj7pBamTRv1GIHLvd101TAEDAW108txgbVCXZwL1Cs107lY110
showLogs : true
appName : bug-example
batchName : bug-example
agentId : eyes.storybook/2.3.13
2019-04-28T17:16:45Z Eyes: [LOG ] {} (): eyesStorybook started
2019-04-28T17:16:45Z Eyes: [LOG ] {} (): browser launched
2019-04-28T17:16:46Z Eyes: [LOG ] {} (): 3 pages open
2019-04-28T17:16:46Z Eyes: [LOG ] {} (): got script for processPage
2019-04-28T17:16:46Z Eyes: [LOG ] {} (): finished creating functions
⠋ Reading stories2019-04-28T17:16:46Z Eyes: [LOG ] {} (): navigating to storybook url: http://localhost:9000
⠴ Reading stories2019-04-28T17:16:46Z Eyes: [LOG ] {} (): JSHandle:%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools JSHandle:font-weight:bold
⠦ Reading stories2019-04-28T17:16:46Z Eyes: [LOG ] {} (): JSHandle:The above error occurred in the <ThemeProvider> component:
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in Location (created by QueryLocation)
in QueryLocation (created by Root)
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root
React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
2019-04-28T17:16:46Z Eyes: [LOG ] {} (): JSHandle:The above error occurred in the <LocationProvider> component:
in LocationProvider (created by Root)
in HelmetProvider (created by Root)
in Root
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
2019-04-28T17:16:46Z Eyes: [LOG ] {} (): Getting stories from storybook
2019-04-28T17:16:46Z Eyes: [LOG ] {} (): JSHandle:getting stories from storybook. isV2= JSHandle:true
2019-04-28T17:16:46Z Eyes: [LOG ] {} (): Error: Evaluation failed: TypeError: Cannot read property 'children' of null
at getCategories (__puppeteer_evaluation_script__:34:74)
at getStoriesV2 (__puppeteer_evaluation_script__:12:22)
at getStories (__puppeteer_evaluation_script__:6:12)
at ExecutionContext.evaluateHandle (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/puppeteer/lib/ExecutionContext.js:121:13)
at process._tickCallback (internal/process/next_tick.js:68:7)
-- ASYNC --
at ExecutionContext.<anonymous> (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/puppeteer/lib/helper.js:110:27)
at ExecutionContext.evaluate (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/puppeteer/lib/ExecutionContext.js:48:31)
at ExecutionContext.<anonymous> (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/puppeteer/lib/helper.js:111:23)
at DOMWorld.evaluate (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/puppeteer/lib/DOMWorld.js:112:20)
at process._tickCallback (internal/process/next_tick.js:68:7)
-- ASYNC --
at Frame.<anonymous> (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/puppeteer/lib/helper.js:110:27)
at Page.evaluate (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/puppeteer/lib/Page.js:782:43)
at Page.<anonymous> (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/puppeteer/lib/helper.js:111:23)
at eyesStorybook (/Users/lmoreira/workspace/mastercard/poc/storybook/bug/bug-example/node_modules/@applitools/eyes.storybook/src/eyesStorybook.js:55:30)
at process._tickCallback (internal/process/next_tick.js:68:7)
2019-04-28T17:16:46Z Eyes: [LOG ] {} (): total time:
Test is finished but no results returned.
Hello,
I was wondering if it was possible to add the waitBeforeScreenshots config property, to the per component configuration.
We have many tests where we need to wait for the component until it's ready for the snapshot to be taken.
However, it's usually not the case for all the tests.
And so we were wondering if it was possible to configure this for each test separately.
(and of course leaving the global configuration as well).
Thanks!
(related to #13)
I had the following test where undefinedStoryName was accidentally used but not defined.
import React from 'react';
import { storiesOf } from '@storybook/react';
storiesOf(`some test`, module).add(undefinedStoryName, () => (
<div style={{ height: '500px', color: 'white' }} />
));eyes-storybook fails with exit code 1.
> eyes-storybook
Using @applitools/eyes-storybook version 2.6.25.
✔ Storybook was started
⠦ Reading stories
Test is finished but no results returned.running with showLogs outputs the hidden error:
019-06-06T21:15:23Z Eyes: [LOG ] {} (): eyesStorybook started
2019-06-06T21:15:23Z Eyes: [LOG ] {} (): browser launched
2019-06-06T21:15:23Z Eyes: [LOG ] {} (): 3 pages open
2019-06-06T21:15:23Z Eyes: [LOG ] {} (): got script for processPage
2019-06-06T21:15:23Z Eyes: [LOG ] {} (): finished creating functions
⠋ Reading stories2019-06-06T21:15:23Z Eyes: [LOG ] {} (): navigating to storybook url: http://localhost:9000
⠹ Reading stories2019-06-06T21:15:23Z Eyes: [LOG ] {} Page.<init>(): JSHandle:%cDownload the React DevTools for a better development experience: https://fb.me/react-devtools JSHandle:font-weight:bold
⠦ Reading stories2019-06-06T21:15:24Z Eyes: [LOG ] {} Page.<init>(): JSHandle:ReferenceError: undefinedStoryName is not defined
at Module.<anonymous> (http://localhost:9000/main.f790ddba604d943393ce.bundle.js:251:93)
at Module../Sidebar/test/Sidebar.visuals.js (http://localhost:9000/main.f790ddba604d943393ce.bundle.js:264:30)
at __webpack_require__ (http://localhost:9000/runtime~main.f790ddba604d943393ce.bundle.js:782:30)
at fn (http://localhost:9000/runtime~main.f790ddba604d943393ce.bundle.js:150:20)
at webpackContext (http://localhost:9000/main.f790ddba604d943393ce.bundle.js:216:9)
at http://localhost:9000/main.f790ddba604d943393ce.bundle.js:29:12
at Array.forEach (<anonymous>)
at loadStories (http://localhost:9000/main.f790ddba604d943393ce.bundle.js:28:14)
at ConfigApi._renderMain (http://localhost:9000/vendors~main.f790ddba604d943393ce.bundle.js:1497:20)
at render (http://localhost:9000/vendors~main.f790ddba604d943393ce.bundle.js:1451:17)
2019-06-06T21:15:24Z Eyes: [LOG ] {} Page.<init>(): JSHandle:`setOptions(options)` is deprecated. Please use the `withOptions(options)` decorator globally.
2019-06-06T21:15:24Z Eyes: [LOG ] {} Page.<init>(): JSHandle:[HMR] connected
⠧ Reading stories2019-06-06T21:15:24Z Eyes: [LOG ] {} (): Getting stories from storybook
2019-06-06T21:15:24Z Eyes: [LOG ] {} Page.<init>(): JSHandle:getting stories from storybook. V2
2019-06-06T21:15:24Z Eyes: [LOG ] {} (): Error: Evaluation failed: TypeError: Cannot read property 'children' of null
...Pretty serious. I had my CI running without the visual tests without any error
The documentation says:
After completing the installation and defining the API key, you will be able to run Eyes.Storybook from the command line and let it take screenshots of all your stories
But I wish to load the story page, interact with it (using Protractor, Puppeteer or Selenium WebDriver directly),
and then call eyes.checkWindow.
This package can not currently be used with yarn workspaces, since it depends on finding files inside the project's node_modules directory. But with yarn workspaces all packages are hoisted to the root of the workspace. The folder structure is as follows:
root
node_modules
packages
storybook
This means that using process.cwd() here
Line 32 in 5df9259
will make it look in the wrong folder. I would guess the simplest solution would be to make packagePath configurable through the applitools.config.js file?
When I manually edited the code in cli.js to use process.cwd() + '/../../' everything worked fine, so this is the only thing stopping it from working.
I have a component which animates when rendered.
This means that it will render, animate for Xms and only then I want the test to run. This causes my test to be flaky...
Currently, only waitBeforeScreenshots configuration is possible, but this means that all of my tests will get slower, which is not a good idea.
I can suggest adding some predicate that checks for a condition in a page to happen.
For example, I can wrap a specific story page with <div data-eyes-storybook="loading">...</div> and remove it once I know the component is ready.
Then in the applitools configuration, I will have the predicate which returns a boolean
{
...
isStoryReadyPredicate: () => !!document.querySelector('[data-eyes-storybook="loading"]')
...
}what do you think?
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.