The baseline is taller than the new snapshot (1168x254 to 1168x35).
Fail
Found multiple elements by: [data-testid="language-btn"] Here are the matching elements: Ignored nodes: comments, script, style <div class="btn-group vs-global-menu__languages vs-dropdown" data-testid="language-btn" > <button aria-expanded="false" aria-haspopup="menu" class="btn btn-md btn-primary dropdown-toggle" id="__BVID__323565___BV_dropdown__" type="button" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse vs-global-menu__languages__icon vs-global-menu__languages__icon" data-test="vs-icon" focusable="false" /> <span class="vs-global-menu__languages__text" > Language </span> <span class="vs-global-menu__languages__selected" > EN </span> </button> <ul aria-labelledby="__BVID__323565___BV_dropdown__" class="dropdown-menu overflow-auto" role="menu" style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);" > <li class="vs-global-menu__languages__label" role="menuitem" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse" data-test="vs-icon" focusable="false" /> Language </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > English </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Deutsch </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Español </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Français </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Italiano </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Nederlands </button> </li> </ul> </div> Ignored nodes: comments, script, style <div class="vs-global-menu__languages dropdown vs-dropdown" data-testid="language-btn" variant="primary" > <ul class="dropdown-menu overflow-auto" role="menu" > <li class="vs-global-menu__languages__label" role="menuitem" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse" data-test="vs-icon" focusable="false" /> Language </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > English </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Deutsch </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Español </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Français </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Italiano </button> </li> <li class="vs-global-menu__languages__item" 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="" > <nav class="vs-global-menu" jsdisabled="false" second-menu-item="" third-menu-item="" > <div class="container-lg px-1 px-sm-3" > <div class="row" > <div class="col-12 vs-global-menu__wrapper" > <div class="btn-group vs-global-menu__dropdown d-lg-none vs-dropdown" > <button aria-expanded="false" aria-haspopup="menu" class="btn btn-md btn-primary dropdown-toggle" id="__BVID__680517___BV_dropdown__" type="button" > Our websites </button> <ul aria-labelledby="__BVID__680517___BV_dropdown__" class="dropdown-menu overflow-auto" role="menu" style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);" > <li class="d-none" role="presentation" > <a class="dropdown-item" href="https://www.visitscotland.com/" role="menuitem" target="_self" > VisitScotland </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://businessevents.visitscotland.com/" rel="noopener" role="menuitem" target="_blank" > Business Events </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://traveltrade.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Travel Trade </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://toolkit.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Toolkit </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://www.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Corporate </a> </li> </ul> </div> <div class="vs-global-menu__dropdown d-lg-none dropdown vs-dropdown" variant="primary" > <ul class="dropdown-menu overflow-auto" role="menu" > <li class="d-none" role="presentation" > <a class="dropdown-item" href="https://www.visitscotland.com/" role="menuitem" target="_self" > VisitScotland </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://businessevents.visitscotland.com/" rel="noopener" role="menuitem" target="_blank" > Business Events </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://traveltrade.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Travel Trade </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://toolkit.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Toolkit </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://www.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Corporate </a> </li> </ul> </div> <ul class="vs-list vs-list--unstyled vs-list--inline vs-global-menu__list d-none d-lg-flex vs-global-menu__list d-none d-lg-flex" > <li class="vs-global-menu__list_item vs-global-menu__list_item--active d-none d-lg-block" > <a href="https://www.visitscotland.com/" target="_self" > VisitScotland </a> </li> <li class="vs-global-menu__list_item" > <a href="https://businessevents.visitscotland.com/" target="_blank" > Business Events </a> </li> <li class="vs-global-menu__list_item" > <a href="https://traveltrade.visitscotland.org/" target="_blank" > Travel Trade </a> </li> <li class="vs-global-menu__list_item" > <a href="https://toolkit.visitscotland.org/" target="_blank" > Toolkit </a> </li> <li class="vs-global-menu__list_item" > <a href="https://www.visitscotland.org/" target="_blank" > Corporate </a> </li> </ul> <div class="btn-group vs-global-menu__languages vs-dropdown" data-testid="language-btn" > <button aria-expanded="false" aria-haspopup="menu" class="btn btn-md btn-primary dropdown-toggle" id="__BVID__323565___BV_dropdown__" type="button" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse vs-global-menu__languages__icon vs-global-menu__languages__icon" data-test="vs-icon" focusable="false" /> <span class="vs-global-menu__languages__text" > Language </span> <span class="vs-global-menu__languages__selected" > EN </span> </button> <ul aria-labelledby="__BVID__323565___BV_dropdown__" class="dropdown-menu overflow-auto" role="menu" style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);" > <li class="vs-global-menu__languages__label" role="menuitem" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse" data-test="vs-icon" focusable="false" /> Language </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > English </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Deutsch </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Español </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Français </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Italiano </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Nederlands </button> </li> </ul> </div> <div class="vs-global-menu__languages dropdown vs-dropdown" data-testid="language-btn" variant="primary" > <ul class="dropdown-menu overflow-auto" role="menu" > <li class="vs-global-menu__languages__label" role="menuitem" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse" data-test="vs-icon" focusable="false" /> Language </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > English </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Deutsch </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Español </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Français </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Italiano </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Nederlands </button> </li> </ul> </div> </div> </div> </div> </nav> </div> </div>View in Storybook
Chrome 121
1168x35
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="language-btn"] Here are the matching elements: Ignored nodes: comments, script, style <div class="btn-group vs-global-menu__languages vs-dropdown" data-testid="language-btn" > <button aria-expanded="false" aria-haspopup="menu" class="btn btn-md btn-primary dropdown-toggle" id="__BVID__323565___BV_dropdown__" type="button" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse vs-global-menu__languages__icon vs-global-menu__languages__icon" data-test="vs-icon" focusable="false" /> <span class="vs-global-menu__languages__text" > Language </span> <span class="vs-global-menu__languages__selected" > EN </span> </button> <ul aria-labelledby="__BVID__323565___BV_dropdown__" class="dropdown-menu overflow-auto" role="menu" style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);" > <li class="vs-global-menu__languages__label" role="menuitem" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse" data-test="vs-icon" focusable="false" /> Language </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > English </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Deutsch </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Español </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Français </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Italiano </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Nederlands </button> </li> </ul> </div> Ignored nodes: comments, script, style <div class="vs-global-menu__languages dropdown vs-dropdown" data-testid="language-btn" variant="primary" > <ul class="dropdown-menu overflow-auto" role="menu" > <li class="vs-global-menu__languages__label" role="menuitem" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse" data-test="vs-icon" focusable="false" /> Language </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > English </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Deutsch </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Español </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Français </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Italiano </button> </li> <li class="vs-global-menu__languages__item" 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="" > <nav class="vs-global-menu" jsdisabled="false" second-menu-item="" third-menu-item="" > <div class="container-lg px-1 px-sm-3" > <div class="row" > <div class="col-12 vs-global-menu__wrapper" > <div class="btn-group vs-global-menu__dropdown d-lg-none vs-dropdown" > <button aria-expanded="false" aria-haspopup="menu" class="btn btn-md btn-primary dropdown-toggle" id="__BVID__680517___BV_dropdown__" type="button" > Our websites </button> <ul aria-labelledby="__BVID__680517___BV_dropdown__" class="dropdown-menu overflow-auto" role="menu" style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);" > <li class="d-none" role="presentation" > <a class="dropdown-item" href="https://www.visitscotland.com/" role="menuitem" target="_self" > VisitScotland </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://businessevents.visitscotland.com/" rel="noopener" role="menuitem" target="_blank" > Business Events </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://traveltrade.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Travel Trade </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://toolkit.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Toolkit </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://www.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Corporate </a> </li> </ul> </div> <div class="vs-global-menu__dropdown d-lg-none dropdown vs-dropdown" variant="primary" > <ul class="dropdown-menu overflow-auto" role="menu" > <li class="d-none" role="presentation" > <a class="dropdown-item" href="https://www.visitscotland.com/" role="menuitem" target="_self" > VisitScotland </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://businessevents.visitscotland.com/" rel="noopener" role="menuitem" target="_blank" > Business Events </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://traveltrade.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Travel Trade </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://toolkit.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Toolkit </a> </li> <li class="" role="presentation" > <a class="dropdown-item" href="https://www.visitscotland.org/" rel="noopener" role="menuitem" target="_blank" > Corporate </a> </li> </ul> </div> <ul class="vs-list vs-list--unstyled vs-list--inline vs-global-menu__list d-none d-lg-flex vs-global-menu__list d-none d-lg-flex" > <li class="vs-global-menu__list_item vs-global-menu__list_item--active d-none d-lg-block" > <a href="https://www.visitscotland.com/" target="_self" > VisitScotland </a> </li> <li class="vs-global-menu__list_item" > <a href="https://businessevents.visitscotland.com/" target="_blank" > Business Events </a> </li> <li class="vs-global-menu__list_item" > <a href="https://traveltrade.visitscotland.org/" target="_blank" > Travel Trade </a> </li> <li class="vs-global-menu__list_item" > <a href="https://toolkit.visitscotland.org/" target="_blank" > Toolkit </a> </li> <li class="vs-global-menu__list_item" > <a href="https://www.visitscotland.org/" target="_blank" > Corporate </a> </li> </ul> <div class="btn-group vs-global-menu__languages vs-dropdown" data-testid="language-btn" > <button aria-expanded="false" aria-haspopup="menu" class="btn btn-md btn-primary dropdown-toggle" id="__BVID__323565___BV_dropdown__" type="button" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse vs-global-menu__languages__icon vs-global-menu__languages__icon" data-test="vs-icon" focusable="false" /> <span class="vs-global-menu__languages__text" > Language </span> <span class="vs-global-menu__languages__selected" > EN </span> </button> <ul aria-labelledby="__BVID__323565___BV_dropdown__" class="dropdown-menu overflow-auto" role="menu" style="position: absolute; left: 0px; top: 0px; display: none; transform: translate(0px, 0px);" > <li class="vs-global-menu__languages__label" role="menuitem" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse" data-test="vs-icon" focusable="false" /> Language </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > English </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Deutsch </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Español </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Français </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Italiano </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Nederlands </button> </li> </ul> </div> <div class="vs-global-menu__languages dropdown vs-dropdown" data-testid="language-btn" variant="primary" > <ul class="dropdown-menu overflow-auto" role="menu" > <li class="vs-global-menu__languages__label" role="menuitem" > <i class="fak fa-globe vs-icon vs-icon--size-xxs vs-icon--globe vs-icon--variant-inverse" data-test="vs-icon" focusable="false" /> Language </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > English </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Deutsch </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Español </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Français </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Italiano </button> </li> <li class="vs-global-menu__languages__item" role="presentation" > <button class="dropdown-item" role="menuitem" type="button" > Nederlands </button> </li> </ul> </div> </div> </div> </div> </nav> </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 m.play (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/assets/GlobalMenu.stories-BIcsoWUc.js:35:246) at playFunction (https://646df3398f07e38a95184dbb-wkmtajfotb.capture-loopback.chromatic.com/sb-preview/runtime.js:111:5723)