search

ccpu / storybook-addon-playwright

An addon to visually test the stories in the multiple browser within storybook environment
MIT License
54 stars 13 forks source link

Cannot run the addon #1

Closed yannbf closed 3 years ago

yannbf commented 3 years ago

Hello! First of all, thanks for this addon, it looks incredible with a lot of potential!

I followed the docs and tried to run this addon in my Storybook 6 (with CSF components) but unfortunately didn't get it to work. I used the following versions:

"storybook-addon-playwright": "^3.2.0",
"playwright": "1.4.1",
"playwright-core": "1.4.1",

The issue I had when running yarn storybook was this:

yarn run v1.22.4
$ start-storybook -p 6006 -s public
info @storybook/react v6.0.21
info 
info => Loading static files from: /Users/yannbraga/Dev/open-source/cra-ts/public .
WARN Unable to close preview build!
ERR! Error: Cannot find module 'playwright-core/lib/deviceDescriptors'
ERR! Require stack:
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/node_modules/storybook-addon-playwright/dist/utils/get-device-info.js
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/node_modules/storybook-addon-playwright/dist/utils/index.js
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/node_modules/storybook-addon-playwright/dist/api/server/utils/execute-action.js
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/node_modules/storybook-addon-playwright/dist/api/server/utils/index.js
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/node_modules/storybook-addon-playwright/dist/api/server/migration/migration.js
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/node_modules/storybook-addon-playwright/dist/api/server/migration/index.js
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/node_modules/storybook-addon-playwright/dist/api/server/configs.js
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/node_modules/storybook-addon-playwright/configs.js
ERR! - /Users/yannbraga/Dev/open-source/cra-ts/.storybook/main.ts

then I downgraded to the following versions:

"storybook-addon-playwright": "^3.2.0",
"playwright": "1.3.1",
"playwright-core": "1.3.1",

And managed to load storybook correctly and even have the addon panels displayed, but the functionality itself was broken: image

Is there any tips to work around this issue? Is this a bug or am I just not using the addon properly?

Also, why is addon knobs necessary?

Thanks!

ccpu commented 3 years ago

Hi there,

Sorry for my late response.

I have just updated the addon to use playwright version 1.4.2, i have tested it with the latest storybook build, here is an example:

storybook-addon-playwright-example

Sometimes firefox takes too long to lunch if you received an error regarding timeout; comment out firefox and try, or set timeout to bigger value:

.storybook/main.js 

 let browser = {
    chromium: await playwright["chromium"].launch(),
   //  firefox: await playwright["firefox"].launch(),
   //  webkit: await playwright["webkit"].launch(),
  };

Regarding addon knobs; the way the addon works is; it will take a screenshot from the browser and display it in the storybook environment, so if the component has a prop that needs to be tested you have to set the knob and addon will pass the knob value as a QueryString to the browser and will take a screenshot, therefore addon knobs have been used in many places in add on to apply, rest or remove props from the component. hence it's necessary.

Apparently, storybook V6 introduced Controls for replacement of addon knob, unfortunately, I don't have enough time to change the addon to use Controls, so for now, I am stuck with addon knobs.

Please try the example and let me know if have a problem.

Thanks.

yannbf commented 3 years ago

Thanks a lot @ccpu! and thanks for the explanation. When I have some free time I might try to see how things are done with knobs and see if I can convert to controls (or add support for both!).

I think the problem I faced was because I installed playwright as well, instead of just relying on the peerdep of this addon. I tried your sample repo and it's great, however I can't set interactions because the app breaks. Here's a video showing what I mean: https://streamable.com/y3o2kr

ccpu commented 3 years ago

Sorry for that, i have fixed the problem, please try again, simply clone example or run yarn add storybook-addon-playwright.

When I have some free time I might try to see how things are done with knobs and see if I can convert to controls (or add support for both!).

That would be great, let me know if need any explanation 👍

ccpu commented 3 years ago

closing as i think the problem is solved, please open a new issue if you have experienced the same problem.