dimsum-e2e-tests 3.70.0-next.4 → 3.70.0-next.41

package/ds-form-combobox-multi/aria-busy-loading/DSComboboxMulti.aria-busy-loading.axe-core.func.spec.js

@@ -0,0 +1,55 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import { axeCoreCheck } from '../../helpers';
+
+// Tests for the fix introduced in PUI-18034
+// (busy listbox with aria-busy + aria-label so screen readers announce the
+// in-progress state via the input's aria-controls linkage; this spec verifies
+// the busy listbox surface passes axe-core).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18471 - ComboboxMulti:: busy listbox while isLoading - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: busy listbox while isLoading should pass axe-core scan', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxMultiCO.getComboListbox();
+      await listbox.waitForExist();
+
+      // `scrollable-region-focusable` is disabled here as a documented false positive:
+      // in the busy/isLoading state the fast-list container is empty, so the region is
+      // not authentically scrollable from a user's perspective — TanStack Virtual leaves
+      // a residual scrollHeight that triggers the rule. The container's tabindex=-1 is a
+      // long-standing Firefox scroll-prevention workaround. The rule remains active for
+      // all other states (open menu with items, read-only, etc.).
+      const result = await axeCoreCheck({ extraDisabledRules: ['scrollable-region-focusable'] });
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-18472 - ComboboxMulti:: busy listbox while isSkeleton - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: busy listbox while isSkeleton should pass axe-core scan', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxMultiCO.getComboListbox();
+      await listbox.waitForExist();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-form-combobox-multi/aria-busy-loading/DSComboboxMulti.aria-busy-loading.func.spec.js

@@ -0,0 +1,57 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests for the fix introduced in PUI-18034
+// (carries aria-busy + aria-label on the listbox during loading/skeleton so
+// screen readers announce the in-progress state via the input's aria-controls
+// linkage; replaces the prior racing assertive live region).
+// aria-multiselectable is preserved on the busy listbox.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18447 - ComboboxMulti:: busy listbox while isLoading - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: listbox is aria-busy + aria-multiselectable and aria-controls linked', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxMultiCO.getComboListbox();
+      await listbox.waitForExist();
+
+      await expect(listbox).toHaveAttribute('role', 'listbox');
+      await expect(listbox).toHaveAttribute('aria-busy', 'true');
+      await expect(listbox).toHaveAttribute('aria-label', 'Loading options please wait');
+      await expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+
+      const listboxId = await listbox.getAttribute('id');
+      const input = await DSComboboxMultiCO.getComboboxInput();
+      await expect(input).toHaveAttribute('aria-controls', listboxId);
+    });
+  });
+
+  describe('PUI-18448 - ComboboxMulti:: busy listbox while isSkeleton - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: listbox is aria-busy + aria-multiselectable with aria-label', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxMultiCO.getComboListbox();
+      await listbox.waitForExist();
+
+      await expect(listbox).toHaveAttribute('role', 'listbox');
+      await expect(listbox).toHaveAttribute('aria-busy', 'true');
+      await expect(listbox).toHaveAttribute('aria-label', 'Loading options please wait');
+      await expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+    });
+  });
+}

package/ds-form-combobox-multi/aria-disabled/DSComboboxMulti.aria-disabled.visual.spec.js

@@ -1,6 +1,7 @@
 /* eslint-disable max-lines */
 import { Key } from 'webdriverio';
 import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import { mouseOver } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-14364 - ComboboxMulti:: applyAriaDisabled prop - visual', () => {
@@ -43,5 +44,19 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
+    // PUI-15476: aria-disabled item text color must change to n600 on hover
+    it('04: listbox with aria-disabled item hovered should display n600 text color', async () => {
+      await browser.eyesOpen();
+      const secondCombobox = await DSComboboxMultiCO.getComboboxWrapperByIndex(1);
+      await secondCombobox.click();
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const ariaDisabledOption = await DSComboboxMultiCO.getOptionByIndex(1);
+      await mouseOver(ariaDisabledOption);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-aria-disabled-item-hovered'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
   });
 }

package/ds-form-combobox-multi/disabled/DSComboboxMulti.disabled.axe-core.func.spec.js

@@ -0,0 +1,24 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18473 - ComboboxMulti:: disabled - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: disabled combobox should pass axe-core scan', async () => {
+      const combobox = await DSComboboxMultiCO.getCombobox();
+      await combobox.waitForExist();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-form-combobox-multi/disabled/DSComboboxMulti.disabled.visual.spec.js

@@ -0,0 +1,22 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests for the fixes in PUI-15502 (disabled input hint/value + pill font color =
+// neutral-600) and PUI-15578 (dropdown chevron fill = neutral-400 in disabled state).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18573 - ComboboxMulti:: Disabled -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display disabled combobox with dimmed pill text and chevron', async () => {
+      const combobox = await DSComboboxMultiCO.getCombobox();
+      await combobox.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-disabled-input'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/grouped/DSComboboxMulti.grouped.visual.spec.js

@@ -0,0 +1,42 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests for the fixes introduced in PUI-15487 (group/section label styled per the
+// b3-strong spec — bold, neutral color, 32px row) and PUI-15473 (menu item idle
+// label color resolves to neutral-700; disabled options fall through to the muted
+// disabledOption color). The open grouped menu surfaces all of these at once.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18571 - ComboboxMulti:: Grouped -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.grouped.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display grouped menu with section labels, idle and disabled option text', async () => {
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+
+      const sectionLabel = await DSComboboxMultiCO.getComboboxSectionLabelByIndex(0);
+      await sectionLabel.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-grouped-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display grouped menu with a selected option checked', async () => {
+      const option = await DSComboboxMultiCO.getOptionByIndex(0);
+      await option.click();
+
+      // multi select keeps the menu open — the selected option renders its checked
+      // styling in place.
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-grouped-menu-selected'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/inline/DSComboboxMulti.inline.visual.spec.js

@@ -0,0 +1,21 @@
+/* eslint-disable max-lines */
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the fix introduced in PUI-15481 (inline padding 8px top/bottom — was 10px)
+  describe('PUI-18560 - ComboboxMulti:: inline config padding - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.inlineTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: inline combobox should render with the corrected 8px padding', async () => {
+      await browser.eyesOpen();
+      const pillDropdownBtn = await DSComboboxMultiCO.getPillDropDownBtn();
+      await pillDropdownBtn.click();
+      const menuList = await DSComboboxMultiCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxMultiCO.snapshotPath('combobox-multi-inline-padding'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/skeleton/DSComboboxMulti.skeleton.visual.spec.js

@@ -0,0 +1,25 @@
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+// Tests for the fix introduced in PUI-15485 (skeleton menu items render with the
+// correct region fill — neutral-080 — and a 1px corner radius per the menu spec).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18572 - ComboboxMulti:: Skeleton -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display skeleton menu items with region fill and corner radius', async () => {
+      const dropdownMenuBtn = await DSComboboxMultiCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const skeletonMenuItem = await DSComboboxMultiCO.getComboboxSkeletonMenuItem();
+      await skeletonMenuItem.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-skeleton-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-single/DSComboboxSingleCO.js

@@ -4,6 +4,10 @@ import { PageObject, Urlbuilder } from '../helpers';
 
 export default class DSComboboxSingleCO extends PageObject {
   // STORIES
+  static loadingTest = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'loading-test');
+
+  static skeletonTest = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'skeleton-test');
+
   static applyAriaDisabled = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'apply-aria-disabled-test');
 
   static readOnly = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'read-only-test');
@@ -33,6 +37,10 @@ export default class DSComboboxSingleCO extends PageObject {
 
   static disabled = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'disabled-test');
 
+  static grouped = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'grouped-test');
+
+  static inlineTest = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'inline-test');
+
   // COMBOBOX - INPUT
   static async getCombobox() {
     return $('[data-testid="combobox-container"]');
@@ -133,7 +141,7 @@ export default class DSComboboxSingleCO extends PageObject {
   }
 
   static async getSimpleTruncateText() {
-    return $('[data-testid="DS-SimpleTruncateText"]');
+    return $('[data-testid="combobox-selected-values"]');
   }
 
   static async getNumberOptions() {
@@ -182,7 +190,7 @@ export default class DSComboboxSingleCO extends PageObject {
   }
 
   static async getTooltip() {
-    return $('[data-testid="popover-container"]');
+    return $('[data-testid="ds-floating-wrapper-root"]');
   }
 
   // Slots
@@ -244,7 +252,7 @@ export default class DSComboboxSingleCO extends PageObject {
   }
 
   static async getComboboxSectionLabelByIndex(index) {
-    return $$('[data-dimsum-slot="dsComboboxSectionLabel"]')[index];
+    return $$('[data-dimsum-parent-slot="dsComboboxSectionLabel"]')[index];
   }
 
   static async getComboboxSectionWrapperSlotByIndex(index) {

package/ds-form-combobox-single/aria-busy-loading/DSComboboxSingle.aria-busy-loading.axe-core.func.spec.js

@@ -0,0 +1,49 @@
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+import { axeCoreCheck } from '../../helpers';
+
+// Tests for the fix introduced in PUI-18034
+// (busy listbox with aria-busy + aria-label so screen readers announce the
+// in-progress state via the input's aria-controls linkage; this spec verifies
+// the busy listbox surface passes axe-core).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18474 - ComboboxSingle:: busy listbox while isLoading - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: busy listbox while isLoading should pass axe-core scan', async () => {
+      const dropdownMenuBtn = await DSComboboxSingleCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxSingleCO.getComboListbox();
+      await listbox.waitForExist();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-18475 - ComboboxSingle:: busy listbox while isSkeleton - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: busy listbox while isSkeleton should pass axe-core scan', async () => {
+      const dropdownMenuBtn = await DSComboboxSingleCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxSingleCO.getComboListbox();
+      await listbox.waitForExist();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-form-combobox-single/aria-busy-loading/DSComboboxSingle.aria-busy-loading.func.spec.js

@@ -0,0 +1,54 @@
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+// Tests for the fix introduced in PUI-18034
+// (carries aria-busy + aria-label on the listbox during loading/skeleton so
+// screen readers announce the in-progress state via the input's aria-controls
+// linkage; replaces the prior racing assertive live region).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18445 - ComboboxSingle:: busy listbox while isLoading - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.loadingTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: listbox is aria-busy with aria-label and input aria-controls links to it', async () => {
+      const dropdownMenuBtn = await DSComboboxSingleCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxSingleCO.getComboListbox();
+      await listbox.waitForExist();
+
+      await expect(listbox).toHaveAttribute('role', 'listbox');
+      await expect(listbox).toHaveAttribute('aria-busy', 'true');
+      await expect(listbox).toHaveAttribute('aria-label', 'Loading options please wait');
+
+      const listboxId = await listbox.getAttribute('id');
+      const input = await DSComboboxSingleCO.getComboboxInput();
+      await expect(input).toHaveAttribute('aria-controls', listboxId);
+    });
+  });
+
+  describe('PUI-18446 - ComboboxSingle:: busy listbox while isSkeleton - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: listbox is aria-busy with aria-label', async () => {
+      const dropdownMenuBtn = await DSComboboxSingleCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const listbox = await DSComboboxSingleCO.getComboListbox();
+      await listbox.waitForExist();
+
+      await expect(listbox).toHaveAttribute('role', 'listbox');
+      await expect(listbox).toHaveAttribute('aria-busy', 'true');
+      await expect(listbox).toHaveAttribute('aria-label', 'Loading options please wait');
+    });
+  });
+}

package/ds-form-combobox-single/aria-disabled/DSComboboxSingle.aria-disabled.visual.spec.js

@@ -1,6 +1,8 @@
 /* eslint-disable max-lines */
 import { Key } from 'webdriverio';
 import DSComboboxSingleCO from '../DSComboboxSingleCO';
+import DSControlledCheckboxCO from '../../ds-controlled-form/ds-controlled-checkbox/DSControlledCheckboxCO';
+import { mouseOver } from '../../helpers';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-14367 - ComboboxSingle:: applyAriaDisabled prop - visual', () => {
@@ -16,5 +18,21 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
+    // PUI-15476: aria-disabled item text color must change to n600 on hover
+    it('02: listbox with aria-disabled item hovered should display n600 text color', async () => {
+      await browser.eyesOpen();
+      const checkbox = await DSControlledCheckboxCO.getCheckbox();
+      await checkbox.click();
+      const combobox = await DSComboboxSingleCO.getCombobox();
+      await combobox.click();
+      const menuList = await DSComboboxSingleCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const ariaDisabledOption = await DSComboboxSingleCO.getOptionByIndex(1);
+      await mouseOver(ariaDisabledOption);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-aria-disabled-item-hovered'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
   });
 }

package/ds-form-combobox-single/disabled/DSComboboxSingle.disabled.axe-core.func.spec.js

@@ -0,0 +1,24 @@
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+import { axeCoreCheck } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18476 - ComboboxSingle:: disabled - axe-core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: disabled combobox should pass axe-core scan', async () => {
+      const combobox = await DSComboboxSingleCO.getComboboxByIndex(0);
+      await combobox.waitForExist();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-form-combobox-single/disabled/DSComboboxSingle.disabled.visual.spec.js

@@ -0,0 +1,22 @@
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+// Tests for the fixes in PUI-15502 (disabled input hint/value font color = neutral-600)
+// and PUI-15578 (dropdown chevron fill = neutral-400 in the disabled state).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18570 - ComboboxSingle:: Disabled -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display disabled combobox with dimmed value text and chevron', async () => {
+      const combobox = await DSComboboxSingleCO.getCombobox();
+      await combobox.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-disabled-input'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-single/grouped/DSComboboxSingle.grouped.visual.spec.js

@@ -0,0 +1,45 @@
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+// Tests for the fixes introduced in PUI-15487 (group/section label styled per the
+// b3-strong spec — bold, neutral color, 32px row) and PUI-15473 (single menu item
+// idle label color set to neutral-700; disabled options fall through to the muted
+// disabledOption color). The open grouped menu surfaces all of these at once.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18568 - ComboboxSingle:: Grouped -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.grouped.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display grouped menu with section labels, idle and disabled option text', async () => {
+      const menuList = await DSComboboxSingleCO.getMenuList();
+      await menuList.waitForDisplayed();
+
+      const sectionLabel = await DSComboboxSingleCO.getComboboxSectionLabelByIndex(0);
+      await sectionLabel.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-grouped-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display grouped menu with a selected option highlighted', async () => {
+      const option = await DSComboboxSingleCO.getOptionByIndex(0);
+      await option.click();
+
+      // single select closes the controlled menu on selection — reopen to capture
+      // the selected option styling inside the open listbox.
+      const dropdownMenuBtn = await DSComboboxSingleCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const menuList = await DSComboboxSingleCO.getMenuList();
+      await menuList.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-grouped-menu-selected'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-single/inline/DSComboboxSingle.inline.visual.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable max-lines */
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  // Tests for the fix introduced in PUI-15481 (inline padding 8px top/bottom — was 10px)
+  describe('PUI-18559 - ComboboxSingle:: inline config padding - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.inlineTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: inline combobox should render with the corrected 8px padding', async () => {
+      await browser.eyesOpen();
+      const pillDropdownBtn = await DSComboboxSingleCO.getPillDropDownBtn();
+      await pillDropdownBtn.click();
+      const menuList = await DSComboboxSingleCO.getMenuList();
+      await menuList.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-inline-padding'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-single/skeleton/DSComboboxSingle.skeleton.visual.spec.js

@@ -0,0 +1,25 @@
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+// Tests for the fix introduced in PUI-15485 (skeleton menu items render with the
+// correct region fill — neutral-080 — and a 1px corner radius per the menu spec).
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18569 - ComboboxSingle:: Skeleton -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.skeletonTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display skeleton menu items with region fill and corner radius', async () => {
+      const dropdownMenuBtn = await DSComboboxSingleCO.getDropDownMenuBtn();
+      await dropdownMenuBtn.click();
+
+      const skeletonMenuItem = await DSComboboxSingleCO.getComboboxSkeletonMenuItem();
+      await skeletonMenuItem.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-skeleton-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}