`queryParams` setup for Percy is not working #711

emilie-t-ledn · 2023-01-12T16:44:54Z

emilie-t-ledn
Jan 12, 2023

queryParams setup for Percy is not passed to the story since v4.3.0.

We noticed the issue while trying to upgrade to the latest versions from the following (working there as well)

All the following versions were tested with React 17.0.2

Initial version (working)

  "@percy/cli": "1.0.0-beta.71",
  "@percy/storybook": "4.1.0",
  "@storybook/addon-a11y": "6.4.9",
  "@storybook/addon-essentials": "6.4.9",
  "@storybook/addon-links": "6.4.9",
  "@storybook/addon-queryparams": "6.2.9",
  "@storybook/addons": "6.4.9",
  "@storybook/react": "6.4.9",
  "@storybook/theming": "6.4.9",

Latest versions that are still working:

"@percy/cli": "1.2.1",
"@percy/storybook": "4.2.1",
"@storybook/addon-a11y": "6.4.22",
"@storybook/addon-essentials": "6.4.22",
"@storybook/addon-links": "6.4.22",
"@storybook/addons": "6.4.22",
"@storybook/react": "6.4.22",
"@storybook/theming": "6.4.22",

It stopped working at those versions:

"@percy/cli": "1.3.0",
"@percy/storybook": "4.3.0",
"@storybook/addon-a11y": "6.5.8",
"@storybook/addon-essentials": "6.5.8",
"@storybook/addon-links": "6.5.8",
"@storybook/addons": "6.5.8",
"@storybook/react": "6.5.8",
"@storybook/theming": "6.5.8",

Environment

Node version: 14.19.1
OS version: Can reproduce both on Github workflow CI and Mac

Details

Our goal of using a queryParams is to setup the story in specific ways for Percy snapshotting, i.e. opening Select dropdown
It is working when adding the params in Storybook in the browser

but not working in Percy anymore

Debug logs

Run at "@percy/cli": "1.17.0", "@percy/storybook": "4.3.4",
Also tried to add a big timeout without any success

➜ percy storybook http://localhost:9001 -i="Select" --debug -v

[percy] A new version of @percy/cli is available! 1.17.0 -> 1.19.0-alpha.0

[percy:config] Found config file: .percy.js (634ms)
[percy:config] Using config:
{
  version: 2,
  snapshot: {
    widths: [
      1280
    ],
    minHeight: 1024
  },
  storybook: {
    include: [
      'Select'
    ]
  }
} (42ms)
[percy:storybook] Requesting Storybook: http://localhost:9001 (29ms)
[percy:core:browser] Launching browser (12ms)
[percy:core:browser] Browser connected [35350]: HeadlessChrome/96.0.4664.0 (429ms)
[percy:core] Percy has started! (1ms)
[percy:core:page] Page created (10ms)
[percy:core:page] Page created (2ms)
[percy:core:page] Navigate to: http://localhost:9001/?path=/settings/about (252ms)
[percy:core:page] Navigate to: http://localhost:9001/iframe.html (0ms)
[percy:core:page] Page navigated (446ms)
[percy:core:page] Page navigated (186ms)
[percy:core:page] Page closed (17ms)
[percy:core:page] Page closed (50ms)
[percy:storybook:config] Skipping story: Components/Form/Tests: Helper With List (12ms)
[percy:storybook:config] Skipping story: Components/Form/Tests: Success And Error (0ms)
[percy:storybook:config] Skipping story: Features/Tests: Form (0ms)
[percy:core:page] Page created (3ms)
[percy:core:page] Navigate to: http://localhost:9001/iframe.html (68ms)
[percy:core:page] Page navigated (558ms)
[percy:core:page] Taking snapshot: Components/Form/Select: Regular (70ms)
[percy:core:page] Wait for 4000ms timeout (0ms)
[percy:core:discovery] Wait for 100ms idle (4002ms)
[percy:core:page] Inject @percy/dom (103ms)
[percy:core:page] Serialize DOM (4ms)
[percy:core:snapshot] --------- (14ms)
[percy:core:snapshot] Received snapshot: Components/Form/Select: Regular (0ms)
[percy:core:snapshot] - url: http://localhost:9001/iframe.html?id=components-form-select--regular&isPercy=true (0ms)
[percy:core:snapshot] - widths: 375px, 1280px (0ms)
[percy:core:snapshot] - minHeight: 1024px (0ms)
[percy:core:snapshot] - discovery.allowedHostnames: localhost (0ms)
[percy:core:snapshot] - domSnapshot: true (0ms)
[percy:core] Discovering resources: Components/Form/Select: Regular (1ms)
[percy:core:page] Page created (2ms)
[percy:core:page] Taking snapshot: Components/Form/Select: Option With Status And Icon (54ms)
[percy:core:page] Wait for 4000ms timeout (0ms)
[percy:core:page] Resize page to 375x1024 @1x (14ms)
[percy:core:page] Navigate to: http://localhost:9001/iframe.html?id=components-form-select--regular&isPercy=true (1ms)
[percy:core:discovery] Handling request: http://localhost:9001/iframe.html?id=components-form-select--regular&isPercy=true (2ms)
[percy:core:discovery] - Serving root resource (0ms)
[percy:core:discovery] Handling request: http://localhost:9001/static/media/.storybook/fonts/TWKLausannePan-500.woff2 (19ms)
[percy:core:discovery] Handling request: http://localhost:9001/static/media/.storybook/fonts/TWKLausannePan-400.woff2 (1ms)
[percy:core:discovery] Processing resource: http://localhost:9001/static/media/.storybook/fonts/TWKLausannePan-500.woff2 (21ms)
[percy:core:discovery] Processing resource: http://localhost:9001/static/media/.storybook/fonts/TWKLausannePan-400.woff2 (3ms)
[percy:core:discovery] - Requesting asset directly (5ms)
[percy:core:page] Page navigated (2ms)
[percy:core:discovery] Wait for 100ms idle (0ms)
[percy:core:discovery] - Requesting asset directly (2ms)
[percy:core:discovery] - sha: ba527e4dfe7237e60e7a804a2e13e71dae5e6fcbb46a3b152bc2dc8b6e3726f7 (3ms)
[percy:core:discovery] - mimetype: font/woff2 (0ms)
[percy:core:discovery] - sha: 19db5afa06fe7a1e6ded0664fac85fb6cb86248966a51778164ce29ab3fa7c2a (2ms)
[percy:core:discovery] - mimetype: font/woff2 (0ms)
[percy:core:page] Resize page to 1280x1024 @1x (103ms)
[percy:core:discovery] Wait for 100ms idle (3ms)
[percy:core:page] Page closed (102ms)
[percy:core:discovery] Wait for 100ms idle (3718ms)
[percy:core:page] Serialize DOM (102ms)
[percy:core:snapshot] --------- (5ms)
[percy:core:snapshot] Received snapshot: Components/Form/Select: Option With Status And Icon (0ms)
[percy:core:snapshot] - url: http://localhost:9001/iframe.html?id=components-form-select--option-with-status-and-icon&isPercy=true (0ms)
[percy:core:snapshot] - widths: 375px, 1280px (0ms)
[percy:core:snapshot] - minHeight: 1024px (0ms)
[percy:core:snapshot] - discovery.allowedHostnames: localhost (0ms)
[percy:core:snapshot] - domSnapshot: true (0ms)
[percy:core] Discovering resources: Components/Form/Select: Option With Status And Icon (0ms)
[percy:core:page] Page closed (3ms)
[percy:core:page] Page created (3ms)
[percy:core:page] Resize page to 375x1024 @1x (61ms)
[percy:core:page] Navigate to: http://localhost:9001/iframe.html?id=components-form-select--option-with-status-and-icon&isPercy=true (2ms)
[percy:core:discovery] Handling request: http://localhost:9001/iframe.html?id=components-form-select--option-with-status-and-icon&isPercy=true (1ms)
[percy:core:discovery] - Serving root resource (0ms)
[percy:core:discovery] Handling request: http://localhost:9001/static/media/.storybook/fonts/TWKLausannePan-500.woff2 (24ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:discovery] Handling request: http://localhost:9001/static/media/.storybook/fonts/TWKLausannePan-400.woff2 (1ms)
[percy:core:discovery] - Resource cache hit (0ms)
[percy:core:page] Page navigated (24ms)
[percy:core:discovery] Wait for 100ms idle (0ms)
[percy:core:page] Resize page to 1280x1024 @1x (100ms)
[percy:core:discovery] Wait for 100ms idle (3ms)
[percy:core:page] Page closed (101ms)
[percy:core:browser] Closing browser (13ms)
[percy:core:browser] Browser closed (25ms)
[percy:core] Build not created (0ms)

Code to reproduce issue

The story setup:

const getIsPercyContext = () => {
  const urlParams = new URLSearchParams(document.location.search);
  const isPercy = urlParams.get('isPercy');

  return Boolean(isPercy);
};

[...]

export default {
  title: 'Components/Form/Select',
  component: Select,
  argTypes: {
    ...argTypes,
  },
  args: {
    options: OPTIONS,
    helper: DEFAULT_STORY_HELPER,
    label: DEFAULT_STORY_LABEL,
    value: null,
    placeholder: 'Please select...',
    error: '',
    isDisabled: false,
    autoFocus: false,
  },
  parameters: {
    docs: {
      page: mdx,
    },
    query: {
      isSelectByValue: undefined,
    },
    percy: {
      queryParams: { isPercy: true },
      widths: PERCY_DEFAULT_WIDTHS,
    },
  },
} as Meta;

itsjwala · 2023-01-13T10:56:57Z

itsjwala
Jan 13, 2023

Hey @emilie-t-ledn 👋

Could you provide a reproducible example for us to debug?
Does the workaround suggested in Reset Global Page State #663 description work for you?

0 replies

emilie-t-ledn · 2023-01-13T22:06:04Z

emilie-t-ledn
Jan 13, 2023
Author

👋 I've tried #663 without any success. FYI, I have the same issue with the queryParams also for a story that is setting up a different timeout (no timeout when in a Percy context).

I need to validate with our security team the reproducible repository and will hopefully submit it to you next Monday.

Thanks

0 replies

emilie-t-ledn · 2023-01-17T14:20:38Z

emilie-t-ledn
Jan 17, 2023
Author

@itsjwala Here is the reproducible example https://github.com/emilie-t-ledn/percy-test

0 replies

emilie-t-ledn · 2023-01-23T14:13:08Z

emilie-t-ledn
Jan 23, 2023
Author

👋 Do you have an ETA when this bug should be fixed? Thanks

0 replies

itsjwala · 2023-02-06T11:27:28Z

itsjwala
Feb 6, 2023

Hey @emilie-t-ledn currently there is no ETA promised. we're yet to prioritize this issue.

0 replies

itsjwala · 2023-02-15T06:53:28Z

itsjwala
Feb 15, 2023

Hey @emilie-t-ledn 👋

we've prioritized this internally, it's in our pipeline expect some response by end of next week.

0 replies

emilie-t-ledn · 2023-02-15T13:45:31Z

emilie-t-ledn
Feb 15, 2023
Author

Awesome, thanks for the follow up!

0 replies

itsjwala · 2023-02-22T06:01:56Z

itsjwala
Feb 22, 2023

Hey @emilie-t-ledn,

We've investigated the issue, we've shipped performance related changes in v4.3.0 wherein we don't reload the story browser.

As far as I can see the reproducible sample which you provided requires the browser to reload and thus this will not work now.

You'll have to handle the state inside your component now, where if the URL updates you should remount your component - I hope this makes sense.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

`queryParams` setup for Percy is not working #711

{{title}}

Replies: 8 comments

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

queryParams setup for Percy is not working #711

emilie-t-ledn Jan 12, 2023

Environment

Details

Debug logs

Code to reproduce issue

Replies: 8 comments

itsjwala Jan 13, 2023

emilie-t-ledn Jan 13, 2023 Author

emilie-t-ledn Jan 17, 2023 Author

emilie-t-ledn Jan 23, 2023 Author

itsjwala Feb 6, 2023

itsjwala Feb 15, 2023

emilie-t-ledn Feb 15, 2023 Author

itsjwala Feb 22, 2023

`queryParams` setup for Percy is not working #711

emilie-t-ledn
Jan 12, 2023

itsjwala
Jan 13, 2023

emilie-t-ledn
Jan 13, 2023
Author

emilie-t-ledn
Jan 17, 2023
Author

emilie-t-ledn
Jan 23, 2023
Author

itsjwala
Feb 6, 2023

itsjwala
Feb 15, 2023

emilie-t-ledn
Feb 15, 2023
Author

itsjwala
Feb 22, 2023