dimsum-e2e-tests 3.53.0-alpha.1 → 3.53.0-alpha.3

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

@@ -0,0 +1,25 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17227 - ComboboxMulti:: disabled - A disabled combobox should not receive focus - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: combobox multi disabled should not be focused - clicking Input', async () => {
+      const combobox = await DSComboboxMultiCO.getCombobox();
+      const input = await DSComboboxMultiCO.getComboboxInput();
+      const hiddenInput = await DSComboboxMultiCO.getComboboxHiddenInput();
+      await combobox.click();
+      await expect(input).not.toBeFocused();
+      await expect(hiddenInput).not.toBeFocused();
+    });
+    it('02: listbox should not be displayed when combobox is disabled', async () => {
+      await browser.keys(Key.ArrowDown);
+      const listbox = await DSComboboxMultiCO.getMenuList();
+      await expect(listbox).not.toBeDisplayed();
+    });
+  });
+}

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

@@ -0,0 +1,42 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17080 - ComboboxMulti:: Menu position - visual', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.floatingAfterFiltering.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.maximizeWindow();
+    });
+    it('01: should open menu correctly', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-floating-after-open-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display the menu correctly after filtering - existing option', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys('t');
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-floating-after-filtering-existing-option'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display the menu correctly after filtering - new option', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys('this is a test');
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxMultiCO.snapshotPath('combobox-multi-floating-after-filtering-new-option'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-multi/slots/DSComboboxMulti.slots.func.spec.js

@@ -0,0 +1,100 @@
+/* eslint-disable max-lines */
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-17260 - ComboboxMulti:: Slots - Controlled Menu and Sections -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.controlledMenuStateWithSectionsSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom aria-* for each slot', async () => {
+      const comboboxRootSlot = await DSComboboxMultiCO.getComboboxRootSlot();
+      const comboboxInputWrapperSlot = await DSComboboxMultiCO.getComboboxInputWrapperSlot();
+      const comboboxInputSlot = await DSComboboxMultiCO.getComboboxInputSlot();
+      const comboboxDropdownButtonSlot = await DSComboboxMultiCO.getComboboxDropDownMenuBtnSlot();
+      const comboboxFastlistWrapperList = await DSComboboxMultiCO.getFastListSlot();
+      const comboboxMenuItemLabel = await DSComboboxMultiCO.getComboboxMenuItemSlotByIndex(0);
+      const comboboxSectionLabel = await DSComboboxMultiCO.getComboboxSectionLabelByIndex(0);
+      const comboboxSectionWrapper = await DSComboboxMultiCO.getComboboxSectionWrapperSlotByIndex(0);
+      await expect(comboboxRootSlot).toHaveAttribute('aria-label', 'root aria');
+      await expect(comboboxInputWrapperSlot).toHaveAttribute('aria-label', 'inputwrapper aria');
+      await expect(comboboxInputSlot).toHaveAttribute('aria-label', 'input aria');
+      await expect(comboboxDropdownButtonSlot).toHaveAttribute('aria-label', 'ddbutton aria');
+      await expect(comboboxFastlistWrapperList).toHaveAttribute('aria-label', 'fastlist aria');
+      await expect(comboboxMenuItemLabel).toHaveAttribute('aria-label', 'multimenuitem aria');
+      await expect(comboboxSectionLabel).toHaveAttribute('aria-label', 'sectionlabel aria');
+      await expect(comboboxSectionWrapper).toHaveAttribute('aria-label', 'sectionwrapper aria');
+    });
+    it('02: should have custom data-* for each slot', async () => {
+      const comboboxRootSlot = await DSComboboxMultiCO.getComboboxRootSlot();
+      const comboboxInputWrapperSlot = await DSComboboxMultiCO.getComboboxInputWrapperSlot();
+      const comboboxInputSlot = await DSComboboxMultiCO.getComboboxInputSlot();
+      const comboboxDropdownButtonSlot = await DSComboboxMultiCO.getComboboxDropDownMenuBtnSlot();
+      const comboboxFastlistWrapperList = await DSComboboxMultiCO.getFastListSlot();
+      const comboboxMenuItemLabel = await DSComboboxMultiCO.getComboboxMenuItemSlotByIndex(0);
+      const comboboxSectionLabel = await DSComboboxMultiCO.getComboboxSectionLabelByIndex(0);
+      const comboboxSectionWrapper = await DSComboboxMultiCO.getComboboxSectionWrapperSlotByIndex(0);
+      await expect(comboboxRootSlot).toHaveAttribute('data-testid', 'root data');
+      await expect(comboboxInputWrapperSlot).toHaveAttribute('data-testid', 'inputwrapper data');
+      await expect(comboboxInputSlot).toHaveAttribute('data-testid', 'input data');
+      await expect(comboboxDropdownButtonSlot).toHaveAttribute('data-testid', 'ddbutton data');
+      await expect(comboboxFastlistWrapperList).toHaveAttribute('data-testid', 'fastlist data');
+      await expect(comboboxMenuItemLabel).toHaveAttribute('data-testid', 'multimenuitem data');
+      await expect(comboboxSectionLabel).toHaveAttribute('data-testid', 'sectionlabel data');
+      await expect(comboboxSectionWrapper).toHaveAttribute('data-testid', 'sectionwrapper data');
+    });
+    it('03: should have custom lang for each slot', async () => {
+      const comboboxRootSlot = await DSComboboxMultiCO.getComboboxRootSlot();
+      const comboboxInputWrapperSlot = await DSComboboxMultiCO.getComboboxInputWrapperSlot();
+      const comboboxInputSlot = await DSComboboxMultiCO.getComboboxInputSlot();
+      const comboboxDropdownButtonSlot = await DSComboboxMultiCO.getComboboxDropDownMenuBtnSlot();
+      const comboboxFastlistWrapperList = await DSComboboxMultiCO.getFastListSlot();
+      const comboboxMenuItemLabel = await DSComboboxMultiCO.getComboboxMenuItemSlotByIndex(0);
+      const comboboxSectionLabel = await DSComboboxMultiCO.getComboboxSectionLabelByIndex(0);
+      const comboboxSectionWrapper = await DSComboboxMultiCO.getComboboxSectionWrapperSlotByIndex(0);
+      await expect(comboboxRootSlot).toHaveAttribute('lang', 'pt');
+      await expect(comboboxInputWrapperSlot).toHaveAttribute('lang', 'es');
+      await expect(comboboxInputSlot).toHaveAttribute('lang', 'de');
+      await expect(comboboxDropdownButtonSlot).toHaveAttribute('lang', 'en');
+      await expect(comboboxFastlistWrapperList).toHaveAttribute('lang', 'fr');
+      await expect(comboboxMenuItemLabel).toHaveAttribute('lang', 'it');
+      await expect(comboboxSectionLabel).toHaveAttribute('lang', 'nl');
+      await expect(comboboxSectionWrapper).toHaveAttribute('lang', 'sv');
+    });
+  });
+
+  describe('PUI-17261 - ComboboxMulti:: Slots - Loading Indicator -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.loadingIndicatorSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom data-*, aria-* and lang for loading indicator specific slots', async () => {
+      const combobox = await DSComboboxMultiCO.getComboboxRootSlot();
+      await combobox.click();
+      const dsComboboxLoadingIndicator = await DSComboboxMultiCO.getComboboxLoadingIndicator();
+      await expect(dsComboboxLoadingIndicator).toHaveAttribute('aria-label', 'loadingindicator aria');
+      await expect(dsComboboxLoadingIndicator).toHaveAttribute('data-testid', 'loadingindicator data');
+      await expect(dsComboboxLoadingIndicator).toHaveAttribute('lang', 'it');
+    });
+  });
+
+  describe('PUI-17262 - ComboboxMulti:: Slots - Skeleton -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.skeletonSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom data-*, aria-* and lang for skeleton specific slots', async () => {
+      const combobox = await DSComboboxMultiCO.getComboboxRootSlot();
+      await combobox.click();
+      const comboboxSkeleton = await DSComboboxMultiCO.getComboboxSkeletonMenuItem();
+      await expect(comboboxSkeleton).toHaveAttribute('aria-label', 'skeletonmenuitem aria');
+      await expect(comboboxSkeleton).toHaveAttribute('data-testid', 'skeletonmenuitem data');
+      await expect(comboboxSkeleton).toHaveAttribute('lang', 'ja');
+    });
+  });
+}

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

@@ -0,0 +1,51 @@
+/* eslint-disable max-lines */
+import DSComboboxMultiCO from '../DSComboboxMultiCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet
+) {
+  describe('PUI-17269 - ComboboxMulti:: Slots - Controlled Menu and Sections -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.controlledMenuStateWithSectionsSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display basic combobox multi with customized slots', async () => {
+      await browser.eyesOpen();
+      const combobox = await DSComboboxMultiCO.getComboboxRootSlot();
+      await combobox.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxMultiCO.snapshotPath('combo-multi-slots-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-17268 - ComboboxMulti:: Slots - Loading Indicator -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.loadingIndicatorSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display combobox multi with loading indicator with customized slots', async () => {
+      await browser.eyesOpen();
+      const combobox = await DSComboboxMultiCO.getComboboxRootSlot();
+      await combobox.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxMultiCO.snapshotPath('combo-multi-slots-loading-indicator'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-17267 - ComboboxMulti:: Slots - Skeleton -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxMultiCO.skeletonSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display basic combobox multi with skeleton with customized slots', async () => {
+      await browser.eyesOpen();
+      const combobox = await DSComboboxMultiCO.getComboboxRootSlot();
+      await combobox.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxMultiCO.snapshotPath('combo-multi-slots-skeleton'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -1,5 +1,5 @@
 import { Key } from 'webdriverio';
-import { PATH_E2E_COMBOBOX_SINGLE } from '../paths';
+import { PATH_E2E_COMBOBOX_SINGLE, PATH_E2E_COMBOBOX_SINGLE_SLOTS } from '../paths';
 import { PageObject, Urlbuilder } from '../helpers';
 
 export default class DSComboboxSingleCO extends PageObject {
@@ -10,8 +10,25 @@ export default class DSComboboxSingleCO extends PageObject {
 
   static hundredAndOneOptions = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'hundred-and-one-options-test');
 
+  static skeletonFloating = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'skeleton-floating-after-filtering');
+
+  static loadingFloating = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'loading-floating-after-filtering');
+
   static readOnlyWithMenuOpenable = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'read-only-with-menu-openable-test');
 
+  static controlledMenuStateWithSectionsSlotsTest = new Urlbuilder(
+    PATH_E2E_COMBOBOX_SINGLE_SLOTS,
+    'controlled-menu-state-with-section-slots-test',
+  );
+
+  static loadingIndicatorSlotsTest = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE_SLOTS, 'loading-indicator-slots-test');
+
+  static skeletonSlotsTest = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE_SLOTS, 'skeleton-slots-test');
+
+  static floatingAfterFiltering = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'floating-after-filtering');
+
+  static disabled = new Urlbuilder(PATH_E2E_COMBOBOX_SINGLE, 'disabled-test');
+
   // COMBOBOX - INPUT
   static async getCombobox() {
     return $('[data-testid="combobox-container"]');
@@ -21,6 +38,10 @@ export default class DSComboboxSingleCO extends PageObject {
     return $('[data-testid="combobox-controls-wrapper"]');
   }
 
+  static async getComboboxWrapperByIndex(index) {
+    return $$('[data-testid="combobox-controls-wrapper"]')[index];
+  }
+
   static async getComboboxByIndex(index) {
     return $$('[data-testid="combobox-container"]')[index];
   }
@@ -41,6 +62,14 @@ export default class DSComboboxSingleCO extends PageObject {
     return $$('[data-testid="combobox-input"]')[index];
   }
 
+  static async getComboboxHiddenInput() {
+    return $('input[aria-hidden="true"]');
+  }
+
+  static async getComboboxHiddenInputByIndex(index) {
+    return $$('input[aria-hidden="true"]')[index];
+  }
+
   static async getSelectedValues() {
     return $('[data-testid="combobox-selected-values"]');
   }
@@ -152,6 +181,73 @@ export default class DSComboboxSingleCO extends PageObject {
     return $('[data-testid="popover-container"]');
   }
 
+  // Slots
+
+  static async getComboboxRootSlot() {
+    return $('[data-dimsum-slot="dsComboboxRoot"]');
+  }
+
+  static async getComboboxInputWrapperSlot() {
+    return $('[data-dimsum-slot="dsComboboxInputWrapper"]');
+  }
+
+  static async getComboboxInputSlot() {
+    return $('[data-dimsum-slot="dsComboboxInput"]');
+  }
+
+  static async getComboboxDropDownMenuBtnSlot() {
+    return $('[data-dimsum-parent-slot="dsComboboxDropdownButton"]');
+  }
+
+  static async getFloatingWrapperRootSlot() {
+    return $('[data-dimsum-slot="dsFloatingwrapperRoot"]');
+  }
+
+  static async getFloatingWrapperContentSlot() {
+    return $('[data-dimsum-slot="dsFloatingwrapperContent"]');
+  }
+
+  static async getFastListContainerSlot() {
+    return $('[data-dimsum-parent-slot="dsComboboxFastList"]');
+  }
+
+  static async getFastListSlot() {
+    return $('[data-dimsum-slot="dsFastlistContainer"]');
+  }
+
+  static async getFastListItemSlot() {
+    return $('[data-dimsum-slot="dsFastlistItem"]');
+  }
+
+  static async getMenuitemMenuItemWrapperSlot() {
+    return $('[data-dimsum-slot="dsMenuitemMenuItemWrapper"]');
+  }
+
+  static async getMenuitemMenuItemsContentWrapperSlotByIndex(index) {
+    return $$('[data-dimsum-slot="dsMenuitemMenuItemContentWrapper"]')[index];
+  }
+
+  static async getComboboxMenuItemSlotByIndex(index) {
+    return $$('[data-dimsum-parent-slot="dsComboboxSingleMenuItem"]')[index];
+  }
+
+  static async getComboboxLoadingIndicator() {
+    return $('[data-dimsum-parent-slot="dsComboboxLoadingIndicator"]');
+  }
+
+  static async getComboboxSkeletonMenuItem() {
+    return $('[data-dimsum-parent-slot="dsComboboxSkeletonMenuItem"]');
+  }
+
+  static async getComboboxSectionLabelByIndex(index) {
+    return $$('[data-dimsum-slot="dsComboboxSectionLabel"]')[index];
+  }
+
+  static async getComboboxSectionWrapperSlotByIndex(index) {
+    return $$('[data-dimsum-slot="dsComboboxSectionWrapper"]')[index];
+  }
+  // Slots end
+
   // actions
 
   static async openMenuUsingKeyboard() {

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

@@ -0,0 +1,25 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17226 - ComboboxSingle:: disabled - A disabled combobox should not receive focus - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: combobox single disabled should not be focused - clicking Input', async () => {
+      const combobox = await DSComboboxSingleCO.getComboboxByIndex(0);
+      const input = await DSComboboxSingleCO.getComboboxInputByIndex(0);
+      const hiddenInput = await DSComboboxSingleCO.getComboboxHiddenInputByIndex(0);
+      await combobox.click();
+      await expect(input).not.toBeFocused();
+      await expect(hiddenInput).not.toBeFocused();
+    });
+    it('02: listbox should not be displayed when combobox is disabled', async () => {
+      await browser.keys(Key.ArrowDown);
+      const listbox = await DSComboboxSingleCO.getMenuList();
+      await expect(listbox).not.toBeDisplayed();
+    });
+  });
+}

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

@@ -0,0 +1,93 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17081 - ComboboxSingle:: Menu position - visual', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.floatingAfterFiltering.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.maximizeWindow();
+    });
+    it('01: should open menu and display it correctly', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-floating-after-open-menu'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display the menu correctly after filtering - existing option', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys('t');
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-floating-after-filtering-existing-option'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display the menu correctly after filtering - no matches', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys('this is a test');
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-floating-after-filtering-no-matches'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: should display the menu correctly after erasing text - no matches', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys('f');
+      await browser.keys(Key.Backspace);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-floating-after-erase-letter'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-17169 - ComboboxSingle:: Menu position after Loading  - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.loadingFloating.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.maximizeWindow();
+    });
+    it('01: should filter, wait for options to load and be correctly placed', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys('t');
+      const options = await DSComboboxSingleCO.getOptionByIndex(0);
+      await options.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-floating-after-loading'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-17170 - ComboboxSingle:: Menu position after Skeleton - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.skeletonFloating.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.maximizeWindow();
+    });
+    it('01: should filter, wait for options to load and be correctly placed', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys('t');
+      const options = await DSComboboxSingleCO.getOptionByIndex(0);
+      await options.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combobox-single-floating-after-skeleton'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-form-combobox-single/slots/DSComboboxSingle.slots.func.spec.js

@@ -0,0 +1,100 @@
+/* eslint-disable max-lines */
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-16558 - ComboboxSingle:: Slots - Controlled Menu and Sections -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.controlledMenuStateWithSectionsSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom aria-* for each slot', async () => {
+      const comboboxRootSlot = await DSComboboxSingleCO.getComboboxRootSlot();
+      const comboboxInputWrapperSlot = await DSComboboxSingleCO.getComboboxInputWrapperSlot();
+      const comboboxInputSlot = await DSComboboxSingleCO.getComboboxInputSlot();
+      const comboboxDropdownButtonSlot = await DSComboboxSingleCO.getComboboxDropDownMenuBtnSlot();
+      const comboboxFastlistWrapperList = await DSComboboxSingleCO.getFastListSlot();
+      const comboboxMenuItemLabel = await DSComboboxSingleCO.getComboboxMenuItemSlotByIndex(0);
+      const comboboxSectionLabel = await DSComboboxSingleCO.getComboboxSectionLabelByIndex(0);
+      const comboboxSectionWrapper = await DSComboboxSingleCO.getComboboxSectionWrapperSlotByIndex(0);
+      await expect(comboboxRootSlot).toHaveAttribute('aria-label', 'root aria');
+      await expect(comboboxInputWrapperSlot).toHaveAttribute('aria-label', 'inputwrapper aria');
+      await expect(comboboxInputSlot).toHaveAttribute('aria-label', 'input aria');
+      await expect(comboboxDropdownButtonSlot).toHaveAttribute('aria-label', 'ddbutton aria');
+      await expect(comboboxFastlistWrapperList).toHaveAttribute('aria-label', 'fastlist aria');
+      await expect(comboboxMenuItemLabel).toHaveAttribute('aria-label', 'singlemenuitem aria');
+      await expect(comboboxSectionLabel).toHaveAttribute('aria-label', 'sectionlabel aria');
+      await expect(comboboxSectionWrapper).toHaveAttribute('aria-label', 'sectionwrapper aria');
+    });
+    it('02: should have custom data-* for each slot', async () => {
+      const comboboxRootSlot = await DSComboboxSingleCO.getComboboxRootSlot();
+      const comboboxInputWrapperSlot = await DSComboboxSingleCO.getComboboxInputWrapperSlot();
+      const comboboxInputSlot = await DSComboboxSingleCO.getComboboxInputSlot();
+      const comboboxDropdownButtonSlot = await DSComboboxSingleCO.getComboboxDropDownMenuBtnSlot();
+      const comboboxFastlistWrapperList = await DSComboboxSingleCO.getFastListSlot();
+      const comboboxMenuItemLabel = await DSComboboxSingleCO.getComboboxMenuItemSlotByIndex(0);
+      const comboboxSectionLabel = await DSComboboxSingleCO.getComboboxSectionLabelByIndex(0);
+      const comboboxSectionWrapper = await DSComboboxSingleCO.getComboboxSectionWrapperSlotByIndex(0);
+      await expect(comboboxRootSlot).toHaveAttribute('data-testid', 'root data');
+      await expect(comboboxInputWrapperSlot).toHaveAttribute('data-testid', 'inputwrapper data');
+      await expect(comboboxInputSlot).toHaveAttribute('data-testid', 'input data');
+      await expect(comboboxDropdownButtonSlot).toHaveAttribute('data-testid', 'ddbutton data');
+      await expect(comboboxFastlistWrapperList).toHaveAttribute('data-testid', 'fastlist data');
+      await expect(comboboxMenuItemLabel).toHaveAttribute('data-testid', 'singlemenuitem data');
+      await expect(comboboxSectionLabel).toHaveAttribute('data-testid', 'sectionlabel data');
+      await expect(comboboxSectionWrapper).toHaveAttribute('data-testid', 'sectionwrapper data');
+    });
+    it('03: should have custom lang for each slot', async () => {
+      const comboboxRootSlot = await DSComboboxSingleCO.getComboboxRootSlot();
+      const comboboxInputWrapperSlot = await DSComboboxSingleCO.getComboboxInputWrapperSlot();
+      const comboboxInputSlot = await DSComboboxSingleCO.getComboboxInputSlot();
+      const comboboxDropdownButtonSlot = await DSComboboxSingleCO.getComboboxDropDownMenuBtnSlot();
+      const comboboxFastlistWrapperList = await DSComboboxSingleCO.getFastListSlot();
+      const comboboxMenuItemLabel = await DSComboboxSingleCO.getComboboxMenuItemSlotByIndex(0);
+      const comboboxSectionLabel = await DSComboboxSingleCO.getComboboxSectionLabelByIndex(0);
+      const comboboxSectionWrapper = await DSComboboxSingleCO.getComboboxSectionWrapperSlotByIndex(0);
+      await expect(comboboxRootSlot).toHaveAttribute('lang', 'ja');
+      await expect(comboboxInputWrapperSlot).toHaveAttribute('lang', 'it');
+      await expect(comboboxInputSlot).toHaveAttribute('lang', 'de');
+      await expect(comboboxDropdownButtonSlot).toHaveAttribute('lang', 'fr');
+      await expect(comboboxFastlistWrapperList).toHaveAttribute('lang', 'es');
+      await expect(comboboxMenuItemLabel).toHaveAttribute('lang', 'pt');
+      await expect(comboboxSectionLabel).toHaveAttribute('lang', 'zh');
+      await expect(comboboxSectionWrapper).toHaveAttribute('lang', 'ru');
+    });
+  });
+
+  describe('PUI-16559 - ComboboxSingle:: Slots - Loading Indicator -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.loadingIndicatorSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom data-*, aria-* and lang for loading indicator specific slots', async () => {
+      const combobox = await DSComboboxSingleCO.getComboboxRootSlot();
+      await combobox.click();
+      const dsComboboxLoadingIndicator = await DSComboboxSingleCO.getComboboxLoadingIndicator();
+      await expect(dsComboboxLoadingIndicator).toHaveAttribute('aria-label', 'loadingindicator aria');
+      await expect(dsComboboxLoadingIndicator).toHaveAttribute('data-testid', 'loadingindicator data');
+      await expect(dsComboboxLoadingIndicator).toHaveAttribute('lang', 'it');
+    });
+  });
+
+  describe('PUI-16560 - ComboboxSingle:: Slots - Skeleton -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.skeletonSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have custom data-*, aria-* and lang for skeleton specific slots', async () => {
+      const combobox = await DSComboboxSingleCO.getComboboxRootSlot();
+      await combobox.click();
+      const comboboxSkeleton = await DSComboboxSingleCO.getComboboxSkeletonMenuItem();
+      await expect(comboboxSkeleton).toHaveAttribute('aria-label', 'skeleton aria');
+      await expect(comboboxSkeleton).toHaveAttribute('data-testid', 'skeleton data');
+      await expect(comboboxSkeleton).toHaveAttribute('lang', 'ja');
+    });
+  });
+}

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

@@ -0,0 +1,53 @@
+/* eslint-disable max-lines */
+import DSComboboxSingleCO from '../DSComboboxSingleCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-17270 - ComboboxSingle:: Slots - Controlled Menu and Sections -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.controlledMenuStateWithSectionsSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display basic combobox single with customized slots', async () => {
+      await browser.eyesOpen();
+      const combobox = await DSComboboxSingleCO.getComboboxRootSlot();
+      await combobox.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxSingleCO.snapshotPath('combo-single-slots-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-17271 - ComboboxSingle:: Slots - Loading Indicator -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.loadingIndicatorSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display combobox single with loading indicator with customized slots', async () => {
+      await browser.eyesOpen();
+      const combobox = await DSComboboxSingleCO.getComboboxRootSlot();
+      await combobox.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSComboboxSingleCO.snapshotPath('combo-single-slots-loading-indicator'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-17273 - ComboboxSingle:: Slots - Skeleton -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxSingleCO.skeletonSlotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display basic combobox single with skeleton with customized slots', async () => {
+      await browser.eyesOpen();
+      const combobox = await DSComboboxSingleCO.getComboboxRootSlot();
+      await combobox.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSComboboxSingleCO.snapshotPath('combo-single-slots-skeleton'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}