Skip to content

[patch] Making sure that the popover container is ready #5004

[patch] Making sure that the popover container is ready

[patch] Making sure that the popover container is ready #5004

Triggered via pull request February 24, 2026 12:47
Status Failure
Total duration 3m 51s
Artifacts

chromatic.yml

on: pull_request
chromatic-deployment
1m 55s
chromatic-deployment
storybook-tests
3m 48s
storybook-tests
Fit to window
Zoom out
Zoom in

Annotations

9 errors
storybook-tests
Process completed with exit code 1.
src/dropdown/Dropdown.stories.tsx > Menu Tooltip: packages/lib/src/dropdown/Dropdown.stories.tsx#L369
TestingLibraryElementError: Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/dropdown--menu-tooltip&addonPanel=storybook/interactions/panel Unable to find role="button" Ignored nodes: comments, script, style <div> <div class="undefined-all css-1hv3gmm-DivContainer e1ko2gfr0" > <h3 class="css-1bd2r6e-SectionTitle epwpitw0" > Tooltip </h3> <div id=":rs:-portal" style="position: absolute;" /> </div> </div> Ignored nodes: comments, script, style <div> <div class="undefined-all css-1hv3gmm-DivContainer e1ko2gfr0" > <h3 class="css-1bd2r6e-SectionTitle epwpitw0" > Tooltip </h3> <div id=":rs:-portal" style="position: absolute;" /> </div> </div> ❯ waitForWrapper ../../node_modules/storybook/dist/test/index.js:27919:10 ❯ ../../node_modules/storybook/dist/test/index.js:27993:25 ❯ Instrumenter.invoke ../../node_modules/storybook/dist/instrumenter/index.js:2949:16 ❯ Instrumenter.intercept ../../node_modules/storybook/dist/instrumenter/index.js:2868:95 ❯ Instrumenter.track ../../node_modules/storybook/dist/instrumenter/index.js:2863:34 ❯ Object.findByRole ../../node_modules/storybook/dist/instrumenter/index.js:2845:60 ❯ findByRole src/dropdown/Dropdown.stories.tsx:369:39 ❯ t ../../node_modules/storybook/dist/preview-api/index.js:3523:12 ❯ node_modules/.cache/storybook/32948db58ae97b86fa0e633de49d806825c7024681ad5d8dec166b91529e3f12/sb-vitest/deps/@storybook_addon-vitest_internal_test-utils.js:59:109
src/dropdown/Dropdown.stories.tsx > Chromatic: packages/lib/src/dropdown/Dropdown.stories.tsx#L346
TestingLibraryElementError: Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/dropdown--chromatic&addonPanel=storybook/interactions/panel Unable to find role="button" Ignored nodes: comments, script, style <div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Default </h4> <div id=":r0:-portal" style="position: absolute;" /> </div> <div class="pseudo-hover-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Hovered </h4> <div id=":r1:-portal" style="position: absolute;" /> </div> <div class="pseudo-focus-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Focused </h4> <div id=":r2:-portal" style="position: absolute;" /> </div> <div class="pseudo-active-all pseudo-focus-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Active </h4> <div id=":r3:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Disabled </h4> <div id=":r4:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Caret hidden </h4> <div id=":r5:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > With icon before </h4> <div id=":r6:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > With icon after </h4> <div id=":r7:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Only icon </h4> <div id=":r8:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Only icon without caret </h4> <div id=":r9:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Large icon (SVG) </h4> <div id=":ra:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Large icon (image) </h4> <div id=":rb:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Disabled with icon </h4> <div id=":rc:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Ellipsis </h4> <div id=":rd:-portal" style="position: absolute;" /> </div> <h2 class="css-1bd2r6e-SectionTitle epwpitw0" > Margins </h2> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Xxsmall </h4> <div id=":re:-portal" style="position: absolute;" /> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" >
src/dialog/Dialog.stories.tsx > Dropdown Dialog: packages/lib/src/dialog/Dialog.stories.tsx#L438
TestingLibraryElementError: Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/dialog--dropdown-dialog&addonPanel=storybook/interactions/panel Unable to find role="button" Ignored nodes: comments, script, style <body> <div class="sb-preparing-story sb-wrapper" > <div class="sb-loader" /> </div> <div class="sb-preparing-docs sb-wrapper" > <div class="sb-previewBlock" > <div class="sb-previewBlock_header" > <div class="sb-previewBlock_icon" /> <div class="sb-previewBlock_icon" /> <div class="sb-previewBlock_icon" /> <div class="sb-previewBlock_icon" /> </div> <div class="sb-previewBlock_body" > <div class="sb-loader" /> </div> </div> <table aria-hidden="true" class="sb-argstableBlock" > <thead class="sb-argstableBlock-head" > <tr> <th> <span> Name </span> </th> <th> <span> Description </span> </th> <th> <span> Default </span> </th> <th> <span> Control </span> </th> </tr> </thead> <tbody class="sb-argstableBlock-body" > <tr> <td> <span> propertyName </span> <span title="Required" > * </span> </td> <td> <div> <span> This is a short description </span> </div> <div class="sb-argstableBlock-summary" > <div> <span class="sb-argstableBlock-code" > summary </span> </div> </div> </td> <td> <div> <span class="sb-argstableBlock-code" > defaultValue </span> </div> </td> <td> <button> Set string </button> </td> </tr> <tr> <td> <span> propertyName </span> <span> * </span> </td> <td> <div> <span> This is a short description </span> </div> <div class="sb-argstableBlock-summary" > <div> <span class="sb-argstableBlock-code" > summary </span> </div> </div> </td> <td> <div> <span class="sb-argstableBlock-code" > defaultValue </span> </div>
src/dialog/Dialog.stories.tsx > Date Input Dialog: packages/lib/src/dialog/Dialog.stories.tsx#L430
TestingLibraryElementError: Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/dialog--date-input-dialog&addonPanel=storybook/interactions/panel Unable to find role="combobox" Ignored nodes: comments, script, style <body> <div class="sb-preparing-story sb-wrapper" > <div class="sb-loader" /> </div> <div class="sb-preparing-docs sb-wrapper" > <div class="sb-previewBlock" > <div class="sb-previewBlock_header" > <div class="sb-previewBlock_icon" /> <div class="sb-previewBlock_icon" /> <div class="sb-previewBlock_icon" /> <div class="sb-previewBlock_icon" /> </div> <div class="sb-previewBlock_body" > <div class="sb-loader" /> </div> </div> <table aria-hidden="true" class="sb-argstableBlock" > <thead class="sb-argstableBlock-head" > <tr> <th> <span> Name </span> </th> <th> <span> Description </span> </th> <th> <span> Default </span> </th> <th> <span> Control </span> </th> </tr> </thead> <tbody class="sb-argstableBlock-body" > <tr> <td> <span> propertyName </span> <span title="Required" > * </span> </td> <td> <div> <span> This is a short description </span> </div> <div class="sb-argstableBlock-summary" > <div> <span class="sb-argstableBlock-code" > summary </span> </div> </div> </td> <td> <div> <span class="sb-argstableBlock-code" > defaultValue </span> </div> </td> <td> <button> Set string </button> </td> </tr> <tr> <td> <span> propertyName </span> <span> * </span> </td> <td> <div> <span> This is a short description </span> </div> <div class="sb-argstableBlock-summary" > <div> <span class="sb-argstableBlock-code" > summary </span> </div> </div> </td> <td> <div> <span class="sb-argstableBlock-code" > defaultValue </span> </div>
src/date-input/DateInput.stories.tsx > Date Picker States: packages/lib/src/date-input/DateInput.stories.tsx#L250
TestingLibraryElementError: Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/date-input--date-picker-states&addonPanel=storybook/interactions/panel Unable to find role="combobox" Ignored nodes: comments, script, style <div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Show date picker over another element with a certain z-index </h4> <div style="display: flex; flex-direction: column; gap: 20px; height: 200px; width: 500px; margin-bottom: 250px; padding: 20px; border: 1px solid black; border-radius: 4px; overflow: auto; z-index: 130; position: relative;" > <div class="css-bdeehe-DateInputContainer e13qgkf44" > <label class="css-rjiscs-Label e13qgkf43" > From </label> <div class="css-d83qck-TextInputContainer e142rxi3" > <div class="css-1iorwek-TextInput-inputStylesByState e142rxi2" > <input aria-invalid="false" aria-label="Date input" aria-required="true" autocomplete="nope" class="css-1ssiudq-Input e142rxi1" id="input-:r2k:" name="" placeholder="" tabindex="0" type="text" value="01-12-1995" /> <div class="css-kn6vjj-Flex e1ruen4x0" > <button aria-label="Select date" class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72" color="transparent" data-state="closed" role="button" shape="square" tabindex="0" type="button" > <div class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71" > <div class="css-13mo10g-IconContainer ejuqjh70" color="transparent" > <span aria-hidden="true" class="css-1n52w0c-IconContainer e1cuupo30" role="img" /> </div> </div> </button> </div> </div> </div> <div id="input-:r2k:-portal" style="position: absolute;" /> </div> <div id="date-picker-:r28:-portal" style="position: absolute;" /> <div class="css-bdeehe-DateInputContainer e13qgkf44" > <label class="css-rjiscs-Label e13qgkf43" > To </label> <div class="css-d83qck-TextInputContainer e142rxi3" > <div class="css-1iorwek-TextInput-inputStylesByState e142rxi2" > <input aria-invalid="false" aria-label="Date input" aria-required="true" autocomplete="nope" class="css-1ssiudq-Input e142rxi1" id="input-:r2m:" name="" placeholder="" tabindex="0" type="text" value="" /> <div class="css-kn6vjj-Flex e1ruen4x0" > <button aria-label="Select date" class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72" color="transparent" data-state="closed" role="button" shape="square" tabindex="0" type="button" > <div class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71" > <div class="css-13mo10g-IconContainer ejuqjh70"
src/date-input/DateInput.stories.tsx > Year Picker Chromatic: packages/lib/src/date-input/DateInput.stories.tsx#L241
TestingLibraryElementError: Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/date-input--year-picker-chromatic&addonPanel=storybook/interactions/panel Unable to find role="combobox" Ignored nodes: comments, script, style <div> <div class="undefined-all css-1hv3gmm-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Year picker </h4> <div class="css-bdeehe-DateInputContainer e13qgkf44" > <label class="css-rjiscs-Label e13qgkf43" > Date input </label> <div class="css-d83qck-TextInputContainer e142rxi3" > <div class="css-1iorwek-TextInput-inputStylesByState e142rxi2" > <input aria-invalid="false" aria-label="Date input" aria-required="true" autocomplete="nope" class="css-1ssiudq-Input e142rxi1" id="input-:r26:" name="" placeholder="" tabindex="0" type="text" value="06-04-1905" /> <div class="css-kn6vjj-Flex e1ruen4x0" > <button aria-label="Select date" class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72" color="transparent" data-state="closed" role="button" shape="square" tabindex="0" type="button" > <div class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71" > <div class="css-13mo10g-IconContainer ejuqjh70" color="transparent" > <span aria-hidden="true" class="css-1n52w0c-IconContainer e1cuupo30" role="img" /> </div> </div> </button> </div> </div> </div> <div id="input-:r26:-portal" style="position: absolute;" /> </div> <div id="date-picker-:r24:-portal" style="position: absolute;" /> </div> </div> Ignored nodes: comments, script, style <div> <div class="undefined-all css-1hv3gmm-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Year picker </h4> <div class="css-bdeehe-DateInputContainer e13qgkf44" > <label class="css-rjiscs-Label e13qgkf43" > Date input </label> <div class="css-d83qck-TextInputContainer e142rxi3" > <div class="css-1iorwek-TextInput-inputStylesByState e142rxi2" > <input aria-invalid="false" aria-label="Date input" aria-required="true" autocomplete="nope" class="css-1ssiudq-Input e142rxi1" id="input-:r26:" name="" placeholder="" tabindex="0" type="text" value="06-04-1905" /> <div class="css-kn6vjj-Flex e1ruen4x0" > <button aria-label="Select date" class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72" color="transparent" data-state="closed" role="button" shape="square" tabindex="0" type="button" > <div class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71" > <div class="css-13mo10g-IconContainer ejuqjh70" color="transparent" > <span aria-hidden="true" class="css-1n52w0c-IconContainer e1cuupo30" role="img" /> </div>
src/date-input/DateInput.stories.tsx > Chromatic: packages/lib/src/date-input/DateInput.stories.tsx#L229
TestingLibraryElementError: Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/date-input--chromatic&addonPanel=storybook/interactions/panel Unable to find role="combobox" Ignored nodes: comments, script, style <div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Year picker </h4> <div class="css-11oxx33-Container e1rnzm9u0" > <div class="css-bdeehe-DateInputContainer e13qgkf44" > <label class="css-rjiscs-Label e13qgkf43" > Date input </label> <div class="css-d83qck-TextInputContainer e142rxi3" > <div class="css-oah2gi-TextInput-inputStylesByState e142rxi2" > <input aria-errormessage="error-input-:ri:" aria-invalid="true" aria-label="Date input" aria-required="true" autocomplete="nope" class="css-1ssiudq-Input e142rxi1" id="input-:ri:" name="" placeholder="" tabindex="0" type="text" value="06-04-1905" /> <div class="css-kn6vjj-Flex e1ruen4x0" > <button aria-label="Select date" class="css-11hi6t5-ActionIconContainer-ActionIconContainer ejuqjh72" color="transparent" data-state="closed" role="button" shape="square" tabindex="0" type="button" > <div class="css-1b29hfr-IconContainerWrapper-IconContainerWrapper ejuqjh71" > <div class="css-13mo10g-IconContainer ejuqjh70" color="transparent" > <span aria-hidden="true" class="css-1n52w0c-IconContainer e1cuupo30" role="img" /> </div> </div> </button> </div> </div> <div aria-live="assertive" class="css-1q3cx1e-ErrorMessageContainer e1sr2iqb0" id="error-input-:ri:" role="alert" > <span aria-hidden="true" class="css-h813lc-IconContainer e1cuupo30" role="img" /> Error message </div> </div> <div id="input-:ri:-portal" style="position: absolute;" /> </div> <div id="date-picker-:r0:-portal" style="position: absolute;" /> </div> </div> <div class="undefined-all css-1c9n8t5-DivContainer e1ko2gfr0" > <h4 class="css-1bd2r6e-SectionTitle epwpitw0" > Complete date input </h4> <div class="css-bdeehe-DateInputContainer e13qgkf44" > <label class="css-tpnb1h-Label e13qgkf43" > Date input <span class="css-qsrw3q-OptionalLabel e13qgkf42" > (Optional) </span> </label> <span class="css-11o6zss-HelperText e13qgkf41" > Help message </span> <div class="css-d83qck-TextInputContainer e142rxi3" > <div class="css-1iorwek-TextInput-inputStylesByState e142rxi2" > <input aria-invalid="false" aria-label="Date input" aria-required="false" autocomplete="nope" class="css-1ssiudq-Input e142rxi1" id="input-:rk:" name="" placeholder="DD/MM/YY" tabindex="0" type="text" value="" /> <div class="css-kn6vjj-Flex e1ruen4x0" > <button
src/breadcrumbs/Breadcrumbs.stories.tsx > Chromatic: packages/lib/src/breadcrumbs/Breadcrumbs.stories.tsx#L161
TestingLibraryElementError: Click to debug the error directly in Storybook: http://localhost:6006/?path=/story/breadcrumbs--chromatic&addonPanel=storybook/interactions/panel Unable to find an accessible element with the role "button" Here are the accessible roles: heading: Name "Default": <h3 class="css-1bd2r6e-SectionTitle epwpitw0" /> --------------------------------------------------navigation: Name "Breadcrumbs": <nav aria-label="Breadcrumbs" /> -------------------------------------------------- list: Name "": <ol class="css-1wtnhv4-OrderedList e174y4xv0" /> -------------------------------------------------- listitem: Name "": <li class="css-30px5o-ListItem ewnmcim3" /> Name "": <li class="css-30px5o-ListItem ewnmcim3" /> Name "": <li class="css-30px5o-ListItem ewnmcim3" /> Name "": <li aria-current="page" class="css-1yfttu0-ListItem ewnmcim3" /> -------------------------------------------------- link: Name "Home": <a class="css-1izdso5-Link ewnmcim1" href="/" /> --------------------------------------------------heading: Name "Collapsed variant": <h3 class="css-1bd2r6e-SectionTitle epwpitw0" /> --------------------------------------------------navigation: Name "Breadcrumbs": <nav aria-label="Breadcrumbs" /> -------------------------------------------------- list: Name "": <ol class="css-1wtnhv4-OrderedList e174y4xv0" /> -------------------------------------------------- listitem: Name "": <li class="css-30px5o-ListItem ewnmcim3" /> Name "": <li class="css-17iat7h-Flex e1ruen4x0" /> Name "": <li aria-current="page" class="css-1yfttu0-ListItem ewnmcim3" /> -------------------------------------------------- link: Name "Home": <a class="css-1izdso5-Link ewnmcim1" href="/" /> --------------------------------------------------heading: Name "Collapsed variant without root": <h3 class="css-1bd2r6e-SectionTitle epwpitw0" /> --------------------------------------------------navigation: Name "Breadcrumbs": <nav aria-label="Breadcrumbs" /> -------------------------------------------------- list: Name "": <ol class="css-1wtnhv4-OrderedList e174y4xv0" /> -------------------------------------------------- listitem: Name "": <li class="css-17iat7h-Flex e1ruen4x0" /> Name "": <li aria-current="page" class="css-1yfttu0-ListItem ewnmcim3" /> --------------------------------------------------heading: Name "Collapsed variant with dropdown menu opened": <h3 class="css-1bd2r6e-SectionTitle epwpitw0" /> --------------------------------------------------navigation: Name "Breadcrumbs": <nav aria-label="Breadcrumbs" /> -------------------------------------------------- list: Name "": <ol class="css-1wtnhv4-OrderedList e174y4xv0" /> -------------------------------------------------- listitem: Name "": <li class="css-30px5o-ListItem ewnmcim3" /> Name "": <li class="css-17iat7h-Flex e1ruen4x0" /> Name "": <li aria-current="page" class="css-1yfttu0-ListItem ewnmcim3" /> -------------------------------------------------- link: Name "Home": <a class="css-1izdso5-Link ewnmcim1" href="/" /> --------------------------------------------------heading: Name "Focus state": <h3 class="css-1bd2r6e-SectionTitle epwpitw0" /> --------------------------------------------------navigation: Name "Breadcrumbs": <nav aria-label="Breadcrumbs" /> -------------------------------------------------- list: Name "": <ol class="css-1wtnhv4-OrderedList e174y4xv0" /> -------------------------------------------------- listitem: Name "": <li class="css-30px5o-ListItem ewnmcim3" /> Name "": <li class="css-17iat7h-Flex e1ruen4x0" /> Name "": <li aria-current="page" class="css-1yfttu0-ListItem ewnmci