dimsum-e2e-tests 3.51.0-next.2 → 3.51.0-next.4

package/ds-menu-button/submenu/DSMenuButton.subMenuItem.func.spec.js

@@ -0,0 +1,42 @@
+/* eslint-disable max-statements */
+import DSMenuButtonCO from '../DSMenuButtonCO';
+import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
+import DSDialog from '../../ds-dialog/DSDialogCO';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14651 - DSMenuButton:: Submenu Menu Item - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSMenuButtonCO.withSubmenuMenuItem.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should trigger menu and have first option focused first submenu expanded', async () => {
+      const menuTrigger = await DSButtonV3CO.getButtonByLabel('Submenus example');
+      await menuTrigger.click();
+      const subMenuItem1 = await DSMenuButtonCO.getMenuItemOptByIndex('1.1');
+      const subMenuItem2 = await DSMenuButtonCO.getMenuItemOptByIndex('1.2');
+      const subMenuItem3 = await DSMenuButtonCO.getMenuItemOptByIndex('1.3');
+      await expect(subMenuItem1).toBeDisplayed();
+      await expect(subMenuItem2).toBeDisplayed();
+      await expect(subMenuItem3).toBeDisplayed();
+    });
+    it('02: should hover third option with MOUSE to have third submenu expanded', async () => {
+      const menuItem = await DSMenuButtonCO.getMenuItemOptByIndex('3');
+      await mouseOver(menuItem);
+      const subMenuItem1 = await DSMenuButtonCO.getMenuItemOptByIndex('3.1');
+      const subMenuItem2 = await DSMenuButtonCO.getMenuItemOptByIndex('3.2');
+      const subMenuItem3 = await DSMenuButtonCO.getMenuItemOptByIndex('3.3');
+      const subMenuItemPrevious = await DSMenuButtonCO.getMenuItemOptByIndex('1.1');
+      await expect(subMenuItemPrevious).not.toBeDisplayed();
+      await expect(subMenuItem1).toBeDisplayed();
+      await expect(subMenuItem2).toBeDisplayed();
+      await expect(subMenuItem3).toBeDisplayed();
+    });
+    it('03: should trigger a submenu action with mouse', async () => {
+      const subMenuItem2 = await DSMenuButtonCO.getMenuItemOptByIndex('3.1');
+      await subMenuItem2.click();
+      const triggeredDialog = DSDialog.getDialog();
+      await expect(triggeredDialog).toBeDisplayed();
+    });
+  });
+}

package/ds-menu-button/{basic/DSMenuButton.subMenuItem.func.spec.js → submenu/DSMenuButton.subMenuItem.keyboardnav.func.spec.js}

@@ -2,46 +2,9 @@
 import { Key } from 'webdriverio';
 import DSMenuButtonCO from '../DSMenuButtonCO';
 import DSButtonV3CO from '../../ds-button-v3/DSButtonV3CO';
-import DSDialog from '../../ds-dialog/DSDialogCO';
 import DSCardV3CO from '../../ds-card-v3/DSCardV3CO';
-import { mouseOver } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
-  describe('PUI-14651 - DSMenuButton:: Submenu Menu Item - Func', () => {
-    before('loading page', async () => {
-      const errorOnGo = await DSMenuButtonCO.withSubmenuMenuItem.go();
-      if (errorOnGo) throw errorOnGo;
-    });
-    it('01: should trigger menu and have first option focused first submenu expanded', async () => {
-      const menuTrigger = await DSButtonV3CO.getButton();
-      await menuTrigger.click();
-      const subMenuItem1 = await DSMenuButtonCO.getMenuItemOptByIndex('1.1');
-      const subMenuItem2 = await DSMenuButtonCO.getMenuItemOptByIndex('1.2');
-      const subMenuItem3 = await DSMenuButtonCO.getMenuItemOptByIndex('1.3');
-      await expect(subMenuItem1).toBeDisplayed();
-      await expect(subMenuItem2).toBeDisplayed();
-      await expect(subMenuItem3).toBeDisplayed();
-    });
-    it('02: should hover third option with MOUSE to have third submenu expanded', async () => {
-      const menuItem = await DSMenuButtonCO.getMenuItemOptByIndex('3');
-      await mouseOver(menuItem);
-      const subMenuItem1 = await DSMenuButtonCO.getMenuItemOptByIndex('3.1');
-      const subMenuItem2 = await DSMenuButtonCO.getMenuItemOptByIndex('3.2');
-      const subMenuItem3 = await DSMenuButtonCO.getMenuItemOptByIndex('3.3');
-      const subMenuItemPrevious = await DSMenuButtonCO.getMenuItemOptByIndex('1.1');
-      await expect(subMenuItemPrevious).not.toBeDisplayed();
-      await expect(subMenuItem1).toBeDisplayed();
-      await expect(subMenuItem2).toBeDisplayed();
-      await expect(subMenuItem3).toBeDisplayed();
-    });
-    it('03: should trigger a submenu action with mouse', async () => {
-      const subMenuItem2 = await DSMenuButtonCO.getMenuItemOptByIndex('3.1');
-      await subMenuItem2.click();
-      const triggeredDialog = DSDialog.getDialog();
-      await expect(triggeredDialog).toBeDisplayed();
-    });
-  });
-
   describe('PUI-14652 - DSMenuButton:: Submenu Menu Item: Keyboard - Func', () => {
     before('loading page', async () => {
       const errorOnGo = await DSMenuButtonCO.withSubmenuMenuItem.go();
@@ -80,7 +43,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     beforeEach('loading page', async () => {
       const errorOnGo = await DSMenuButtonCO.withSubmenuMenuItem.go();
       if (errorOnGo) throw errorOnGo;
-      const menuTrigger = await DSButtonV3CO.getButton();
+      const menuTrigger = await DSButtonV3CO.getButtonByLabel('Submenus example');
       await menuTrigger.waitForDisplayed();
       await browser.keys(Key.Tab);
       await browser.keys(Key.Return);

package/ds-pills-v2/DSPills.axe-core.func.spec.js

@@ -15,13 +15,13 @@ if (
       if (errorOnGo) throw errorOnGo;
     });
     it('01: Evaluate dropdown pills accessibility with axe-core', async () => {
-      const dropDownTrigger = await DSPillsV2CO.getChevronbyIndex(1);
+      const dropDownTrigger = await DSPillsV2CO.getDDChevronbyIndex(1);
       await dropDownTrigger.waitForDisplayed();
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });
     it('02: Evaluate dropdown pills accessibility with axe-core - dropdown menu opened', async () => {
-      const dropDownTrigger = await DSPillsV2CO.getChevronbyIndex(1);
+      const dropDownTrigger = await DSPillsV2CO.getDDChevronbyIndex(1);
       await dropDownTrigger.click();
       const dropDownMenu = await DSPillsV2CO.dropDownMenu();
       await dropDownMenu.waitForDisplayed();

package/ds-pills-v2/DSPills.func.spec.js

@@ -43,4 +43,30 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(howManyPills).toEqual(4);
     });
   });
+  describe('PUI-14923 - Pills v2:: Dropdown Pills, Basic -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.requiredSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have collapsed ddmenu by default (reflected on aria-expanded)', async () => {
+      const ddMenuChevron = await DSPillsV2CO.getMBChevronByIndex(0);
+      const menu = await DSPillsV2CO.getFloatingWrapper();
+      await expect(menu).not.toBeDisplayed();
+      await expect(ddMenuChevron).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('02: should have expanded ddmenu after trigger (reflected on aria-expanded)', async () => {
+      const ddMenuChevron = await DSPillsV2CO.getMBChevronByIndex(0);
+      await ddMenuChevron.click();
+      const menu = await DSPillsV2CO.getFloatingWrapper();
+      await expect(menu).toBeDisplayed();
+      await expect(ddMenuChevron).toHaveAttribute('aria-expanded', 'true');
+    });
+    it('03: should collapse dd menu and have it reflected on aria-expanded', async () => {
+      await browser.keys(Key.Escape);
+      const ddMenuChevron = await DSPillsV2CO.getMBChevronByIndex(0);
+      const menu = await DSPillsV2CO.getFloatingWrapper();
+      await expect(menu).not.toBeDisplayed();
+      await expect(ddMenuChevron).toHaveAttribute('aria-expanded', 'false');
+    });
+  });
 }

package/ds-pills-v2/DSPills.visual.spec.js

@@ -11,7 +11,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should correctly display the dropdown pills', async () => {
-      const dropDownTrigger = await DSPillsV2CO.getChevronbyIndex(1);
+      const dropDownTrigger = await DSPillsV2CO.getDDChevronbyIndex(1);
       await dropDownTrigger.click();
       const snapshot = await browser.checkSnapshot(DSPillsV2CO.snapshotPath('pills-v2-dropdown'));
       await expect(snapshot).toEqual(0);

package/ds-pills-v2/DSPillsV2CO.js

@@ -21,6 +21,12 @@ export default class DSPillsV2CO extends PageObject {
 
   static applyTooltipOverflowWrap = new Urlbuilder(PATH_E2E_PILLS_V2, 'pui-14447-tooltip-overflow');
 
+  static requiredSelectMB = new Urlbuilder(PATH_E2E_PILLS_V2, 'required-select-menu-button-test');
+
+  static singleSelectMB = new Urlbuilder(PATH_E2E_PILLS_V2, 'single-select-menu-button-test');
+
+  static multiSelectMB = new Urlbuilder(PATH_E2E_PILLS_V2, 'multi-select-menu-button-test');
+
   static getUrl(component = 'basic') {
     return PageObject.getUrl(PATH_E2E_PILLS_V2, component);
   }
@@ -35,7 +41,11 @@ export default class DSPillsV2CO extends PageObject {
     return $$('[data-testid="ds-pill-dropdown-chevron"]');
   }
 
-  static getChevronbyIndex = async (index) => getElementByIndex(this.getDDChevrons, index);
+  static getDDChevronbyIndex = async (index) => getElementByIndex(this.getDDChevrons, index);
+
+  static async getMBChevronByIndex(index = 0) {
+    return $$('[data-testid="ds-pill-menu-button-chevron"]')[index];
+  }
 
   static async getInputs() {
     return $$('[data-testid="ds-pill-input"]');
@@ -53,8 +63,16 @@ export default class DSPillsV2CO extends PageObject {
     return $$(' [data-testid="ds-pill-wrapper"]');
   }
 
+  static async getFloatingWrapper() {
+    return $('[data-testid="ds-floating-wrapper-root"]');
+  }
+
   static getPillByIndex = async (index) => getElementByIndex(this.getPills, index);
 
+  static async getPillsTextByIndex(index = 0) {
+    return $$('[data-testid="ds-pill-wrapper"] [data-testid="DS-SimpleTruncateText"]')[index];
+  }
+
   static async getResetBtn() {
     return $('[data-testid="ds-button"]');
   }

package/ds-pills-v2/selection/DSPills.axe-core.func.spec.js

@@ -0,0 +1,77 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSPillsV2CO from '../DSPillsV2CO';
+import { axeCoreCheck } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14708 - PillsV2 Selection: Single Select -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.singleSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a pill with expanded single select menu, unselected, and pass axe-core scan', async () => {
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(0);
+      await menuTrigger.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should have a pill with expanded single select menu, selected, and pass axe-core scan', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-14713 - PillsV2 Selection: Required Select -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.requiredSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a pill with one required option selected (single) and pass axe-core scan', async () => {
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(0);
+      await menuTrigger.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should have a pill with one required option selected (multi) and pass axe-core scan', async () => {
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(1);
+      await menuTrigger.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should have a pill with two optional options selected and pass axe-core scan', async () => {
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(1);
+      await menuTrigger.click();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-14710 - PillsV2 Selection: Multi Selec -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.multiSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a pill with multi select menu, unselected, and pass axe-core scan', async () => {
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(0);
+      await menuTrigger.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should have a pill with multi select menu, multi opts selected, and pass axe-core scan', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-pills-v2/selection/DSPills.func.spec.js

@@ -0,0 +1,155 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSPillsV2CO from '../DSPillsV2CO';
+import DSMenuButtonCO from '../../ds-menu-button/DSMenuButtonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14703 - Pills v2: Selection: KB, multi', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.multiSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have multi select expanded, no selection, no minipill', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(1); // The selection pill, no values pills displayed
+    });
+    it('02: should have multi select with two options selected, expanded, with two minipills', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      const minipillLabel1 = await (await DSPillsV2CO.getPillsTextByIndex(1)).getText();
+      const minipillLabel2 = await (await DSPillsV2CO.getPillsTextByIndex(2)).getText();
+      await expect(minipillLabel1).toEqual('Bold');
+      await expect(minipillLabel2).toEqual('Underlined');
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(3);
+    });
+  });
+
+  describe('PUI-14702 - Pills v2: Selection: MOUSE, single', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.singleSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have single select menu expanded, no options selected, no minipills', async () => {
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(0);
+      await menuTrigger.click();
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(1); //
+    });
+    it('02: should select one option, and get its minipill. Menu stays open', async () => {
+      const optionRed = await DSMenuButtonCO.getMenuItemWrapper(0);
+      await optionRed.click();
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      const minipillLabel1 = await (await DSPillsV2CO.getPillsTextByIndex(1)).getText();
+      await expect(optionRed).toHaveAttribute('aria-checked', 'true');
+      await expect(minipillLabel1).toEqual('Red');
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(2);
+    });
+  });
+
+  describe('PUI-14707 - Pills v2: Selection: REQUIRED, single', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.requiredSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should expand required single select and have one option select by default', async () => {
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(0);
+      await menuTrigger.click();
+      const optionBlack = await DSMenuButtonCO.getMenuItemWrapper(0);
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      const minipillLabel1 = await (await DSPillsV2CO.getPillsTextByIndex(1)).getText();
+      await expect(optionBlack).toHaveAttribute('aria-checked', 'true');
+      await expect(minipillLabel1).toEqual('Black');
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(4);
+    });
+    it('02: should select antoher option, unselecting the first one and changing the minipill', async () => {
+      const optionBlack = await DSMenuButtonCO.getMenuItemWrapper(0);
+      const optionRed = await DSMenuButtonCO.getMenuItemWrapper(1);
+      await optionRed.click();
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      const minipillLabel1 = await (await DSPillsV2CO.getPillsTextByIndex(1)).getText();
+      await expect(optionBlack).toHaveAttribute('aria-checked', 'false');
+      await expect(optionRed).toHaveAttribute('aria-checked', 'true');
+      await expect(minipillLabel1).toEqual('Red');
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(4);
+    });
+    it('03: should NOT be able to unselect an option without selecting another one', async () => {
+      const optionRed = await DSMenuButtonCO.getMenuItemWrapper(1);
+      await optionRed.click();
+      await expect(optionRed).toHaveAttribute('aria-checked', 'true');
+    });
+  });
+
+  describe('PUI-14705 - Pills v2: Selection: REQUIRED, multi', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.requiredSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should not be able to unselect the only selected option by default', async () => {
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(1);
+      await menuTrigger.click();
+      const optionItalic = await DSMenuButtonCO.getMenuItemWrapper(0);
+      await browser.keys(Key.Space); // tries to unselect
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      const minipillLabel1 = await (await DSPillsV2CO.getPillsTextByIndex(3)).getText();
+      await expect(optionItalic).toHaveAttribute('aria-checked', 'true');
+      await expect(minipillLabel1).toEqual('Italic');
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(4);
+    });
+    it('02: should be able to select another option keeping the first one selected', async () => {
+      const optionBold = await DSMenuButtonCO.getMenuItemWrapper(1);
+      await optionBold.click();
+      const optionItalic = await DSMenuButtonCO.getMenuItemWrapper(0);
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      const minipillLabel1 = await (await DSPillsV2CO.getPillsTextByIndex(3)).getText();
+      const minipillLabel2 = await (await DSPillsV2CO.getPillsTextByIndex(4)).getText();
+      await expect(optionItalic).toHaveAttribute('aria-checked', 'true');
+      await expect(optionBold).toHaveAttribute('aria-checked', 'true');
+      await expect(minipillLabel1).toEqual('Italic');
+      await expect(minipillLabel2).toEqual('Bold');
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(5);
+    });
+    it('03: should now be able to unselect the first option', async () => {
+      const optionBold = await DSMenuButtonCO.getMenuItemWrapper(1);
+      const optionItalic = await DSMenuButtonCO.getMenuItemWrapper(0);
+      await optionItalic.click();
+      const pills = await DSPillsV2CO.getPills();
+      const howManyPills = pills.length;
+      const menu = await DSMenuButtonCO.getMenuRoot();
+      const minipillLabel1 = await (await DSPillsV2CO.getPillsTextByIndex(3)).getText();
+      await expect(optionItalic).toHaveAttribute('aria-checked', 'false');
+      await expect(optionBold).toHaveAttribute('aria-checked', 'true');
+      await expect(minipillLabel1).toEqual('Bold');
+      await expect(menu).toBeDisplayedInViewport();
+      await expect(howManyPills).toEqual(4);
+    });
+  });
+}

package/ds-pills-v2/selection/DSPills.visual.spec.js

@@ -0,0 +1,72 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSPillsV2CO from '../DSPillsV2CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14709 - PillsV2 Selection: Single Select -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.singleSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a pill with expanded single select menu, unselected, matching baseline', async () => {
+      await browser.eyesOpen();
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(0);
+      await menuTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath('pillsv2-single-unsel'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should have a pill with expanded single select menu, selected, matching baseline', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath('pillsv2-single-sel'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-14712 - PillsV2 Selection: Required Select -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.requiredSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a pill with expanded single select menu, required, matching baseline', async () => {
+      await browser.eyesOpen();
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(0);
+      await menuTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath('pillsv2-req-single'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should have a pill with expanded multi select menu, required, matching baseline', async () => {
+      await browser.eyesOpen();
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(1);
+      await menuTrigger.click();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath('pillsv2-req-multi'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-14711 - PillsV2 Selection: Multi Select -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSPillsV2CO.multiSelectMB.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a pill with multi select menu, unselected, matching baseline', async () => {
+      await browser.eyesOpen();
+      const menuTrigger = await DSPillsV2CO.getMBChevronByIndex(0);
+      await menuTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath('pillsv2-multi-unsel'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should have a pill with multi select menu, multi opts selected, and pass axe-core scan', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(DSPillsV2CO.snapshotPath('pillsv2-multi-sel'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-query-builder/DSQueryBuilder.visual.spec.js

@@ -1,3 +1,4 @@
+import { Key } from 'webdriverio';
 import DSQueryBuilderCO from './DSQueryBuilderCO';
 import { mouseOver, type } from '../helpers';
 
@@ -57,7 +58,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('02: should display the combobox with all options selected properly opened', async () => {
       await DSQueryBuilderCO.openComboBox(0);
-      await DSQueryBuilderCO.selectAllMultiComboOptions();
+      await browser.keys([Key.Control, Key.Command, 'a']);
       const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-error-combo-multi-all-selected'));
       await expect(snapshot).toEqual(0);
     });

package/ds-query-builder/DSQueryBuilderCO.js

@@ -39,11 +39,6 @@ export default class DSQueryBuilderCO extends PageObject {
     return (await (await this.getComboBox(index)).$('[data-testid="combobox-dropdown-btn"]')).click();
   }
 
-  static async selectAllMultiComboOptions() {
-    // eslint-disable-next-line no-return-await
-    return $('[id="select-all-checkbox"]').click();
-  }
-
   static async getComboBoxes() {
     return $$('[data-testid="combobox"]');
   }

package/ds-shuttle-v2/DSShuttleV2CO.js

@@ -132,16 +132,14 @@ export default class DSShuttleV2CO extends PageObject {
 
   static getCheckboxByIndex = async (index = 0) => $$(`[data-testid="ds-checkbox"]`)[index];
 
+  static getBreadcrumbItemContByIndex = async (index = 0) => $$(`[data-testid="breadcrumb-item-content"]`)[index];
+
   static getBreadcrumbByIndex = async (index = 0) => $$(`[data-testid="breadcrumb-item-container"]`)[index];
 
   static getBreadcrumbs = async () => $$(`[data-testid="breadcrumb-item-container"]`);
 
-  static getFocuseableByBreadcrumb = async (breadcrumb) => breadcrumb.$(`[data-testid="ds-typography-element"]`);
-
   static getSubtitleByItem = async (item) => item.$$(`p`)[1];
 
-  static getTypographyByItem = async (item) => item.$(`[data-testid="ds-typography-element"]`);
-
   static getActionButtonByItemAndIndex = async (item, index = 0) =>
     item.$$(`[data-testid=${DSShuttleV2DataTestIds.ITEM_ACTION_BTN}]`)[index];
 

package/ds-shuttle-v2/Dnd/DSShuttleV2.DnD.visual.spec.js

@@ -12,7 +12,6 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.eyesOpen();
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowLeft);
       const snapshot = await browser.eyesCheckSnapshot(DSShuttleV2CO.snapshotPath('shuttle-v2-focus-dnd'));
@@ -22,7 +21,6 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.eyesOpen();
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.Space);
@@ -34,7 +32,6 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.eyesOpen();
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.Space);
@@ -60,7 +57,6 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.Return);
@@ -76,7 +72,6 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);
       await browser.keys(Key.Tab);
-      await browser.keys(Key.Tab);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.Return);