The baseline is taller than the new snapshot (1168x294 to 1168x48).
Fail
Found multiple elements by: [data-testid="dropdown-btn"]
Here are the matching elements:
Ignored nodes: comments, script, style
<div
class="btn-group vs-dropdown"
data-testid="dropdown-btn"
>
<button
aria-expanded="false"
aria-haspopup="menu"
class="btn btn-md btn-primary dropdown-toggle"
id="__BVID__095940___BV_dropdown__"
type="button"
>
Language
</button>
<ul
aria-labelledby="__BVID__095940___BV_dropdown__"
class="dropdown-menu overflow-auto"
role="menu"
style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);"
>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
title=""
type="button"
>
English
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Deutsch
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Español
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Français
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Italiano
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Nederlands
</button>
</li>
</ul>
</div>
Ignored nodes: comments, script, style
<div
class="dropdown vs-dropdown"
data-testid="dropdown-btn"
>
<ul
class="dropdown-menu overflow-auto"
role="menu"
>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
title=""
type="button"
>
English
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Deutsch
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Español
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Français
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Italiano
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Nederlands
</button>
</li>
</ul>
</div>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<div
data-v-app=""
id="storybook-root"
>
<div
class="btn-group vs-dropdown"
data-testid="dropdown-btn"
>
<button
aria-expanded="false"
aria-haspopup="menu"
class="btn btn-md btn-primary dropdown-toggle"
id="__BVID__095940___BV_dropdown__"
type="button"
>
Language
</button>
<ul
aria-labelledby="__BVID__095940___BV_dropdown__"
class="dropdown-menu overflow-auto"
role="menu"
style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);"
>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
title=""
type="button"
>
English
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Deutsch
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Español
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Français
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Italiano
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Nederlands
</button>
</li>
</ul>
</div>
<div
class="dropdown vs-dropdown"
data-testid="dropdown-btn"
>
<ul
class="dropdown-menu overflow-auto"
role="menu"
>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
title=""
type="button"
>
English
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Deutsch
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Español
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Français
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Italiano
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Nederlands
</button>
</li>
</ul>
</div>
</div>View in Storybook
Chrome 1211168x48
Linux Linux Ubuntu 20.04.4
f97b00 on VS-258-JavaScript-vs-menu-not-working
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
TestingLibraryElementError: Found multiple elements by: [data-testid="dropdown-btn"]
Here are the matching elements:
Ignored nodes: comments, script, style
<div
class="btn-group vs-dropdown"
data-testid="dropdown-btn"
>
<button
aria-expanded="false"
aria-haspopup="menu"
class="btn btn-md btn-primary dropdown-toggle"
id="__BVID__095940___BV_dropdown__"
type="button"
>
Language
</button>
<ul
aria-labelledby="__BVID__095940___BV_dropdown__"
class="dropdown-menu overflow-auto"
role="menu"
style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);"
>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
title=""
type="button"
>
English
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Deutsch
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Español
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Français
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Italiano
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Nederlands
</button>
</li>
</ul>
</div>
Ignored nodes: comments, script, style
<div
class="dropdown vs-dropdown"
data-testid="dropdown-btn"
>
<ul
class="dropdown-menu overflow-auto"
role="menu"
>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
title=""
type="button"
>
English
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Deutsch
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Español
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Français
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Italiano
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Nederlands
</button>
</li>
</ul>
</div>
(If this is intentional, then use the `*AllBy*` variant of the query (like `queryAllByText`, `getAllByText`, or `findAllByText`)).
Ignored nodes: comments, script, style
<div
data-v-app=""
id="storybook-root"
>
<div
class="btn-group vs-dropdown"
data-testid="dropdown-btn"
>
<button
aria-expanded="false"
aria-haspopup="menu"
class="btn btn-md btn-primary dropdown-toggle"
id="__BVID__095940___BV_dropdown__"
type="button"
>
Language
</button>
<ul
aria-labelledby="__BVID__095940___BV_dropdown__"
class="dropdown-menu overflow-auto"
role="menu"
style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);"
>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
title=""
type="button"
>
English
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Deutsch
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Español
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Français
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Italiano
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Nederlands
</button>
</li>
</ul>
</div>
<div
class="dropdown vs-dropdown"
data-testid="dropdown-btn"
>
<ul
class="dropdown-menu overflow-auto"
role="menu"
>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
title=""
type="button"
>
English
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Deutsch
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Español
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Français
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Italiano
</button>
</li>
<li
role="presentation"
>
<button
class="dropdown-item"
role="menuitem"
type="button"
>
Nederlands
</button>
</li>
</ul>
</div>
</div>
at Object.getElementError (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:143:284)
at ro (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:157:3483)
at no (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:157:3528)
at https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:159:10
at https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:165:387
at Cp.invoke (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:27:9139)
at Cp.track (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:27:6400)
at Object.getByTestId (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/index-Yd5uyhb9.js:27:5672)
at n.play (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/Dropdown.stories-ab_cbp_A.js:24:132)
at playFunction (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/sb-preview/runtime.js:111:5723)