GlobalMenu:Menu Open

Build 545 on VS-258-JavaScript-vs-menu-not-working
1200px
Reviewing disabled
View latest build
Build 545 on VS-258-JavaScript-vs-menu-not-working
View Storybook
ErrorBuild 545 on VS-258-JavaScript-vs-menu-not-working
View Storybook
The baseline is taller than the new snapshot (1168x254 to 1168x35).
  • Discussions
  • Interactions
Fail
GlobalMenu.stories.js
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 function

This 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)