dimsum-e2e-tests 3.50.1-next.9 → 3.51.0-beta.2

package/ds-autocomplete/DSAutocompleteCO.js

@@ -29,7 +29,7 @@ export default class DSAutocompleteCO extends PageObject {
   }
 
   static async getAutocompleteOptionLabel() {
-    return $('[data-testid="ds-menu-item-menu-item-label"]');
+    return $('[data-testid="ds-menuitem-menu-item-label"]');
   }
 
   static async getAutocompleteOptions() {

package/ds-banner/DSBanner.func.spec.js

@@ -68,4 +68,59 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(closeButton).toBeFocused();
     });
   });
+
+  describe('PUI-15113 - Banner - Slots -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBannerCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should find the expected SLOTS for the component', async () => {
+      const bannerTitleSlot = await DSBannerCO.getTitleSlotByIndex();
+      const bannerSubtitleSlot = await DSBannerCO.getSubtitleSlotByIndex();
+      const bannerContainer = await DSBannerCO.getContainerSlotByIndex();
+      const bannerInnerContainer = await DSBannerCO.getInnerContainerSlotByIndex();
+      const bannerIconsSlots = await DSBannerCO.getIconContainerSlotByIndex();
+      const bannerButtonSlot = await DSBannerCO.getButtonRootSlotByIndex();
+      const bannerActionLinkSlot = await DSBannerCO.getActionLinkSlotByIndex();
+      await expect(bannerTitleSlot).toBeDisplayed();
+      await expect(bannerSubtitleSlot).toBeDisplayed();
+      await expect(bannerContainer).toBeDisplayed();
+      await expect(bannerInnerContainer).toBeDisplayed();
+      await expect(bannerIconsSlots).toBeDisplayed();
+      await expect(bannerButtonSlot).toBeDisplayed();
+      await expect(bannerActionLinkSlot).toBeDisplayed();
+    });
+    it('02: should find custom aria for each SLOT', async () => {
+      const bannerTitleSlot = await DSBannerCO.getTitleSlotByIndex();
+      const bannerSubtitleSlot = await DSBannerCO.getSubtitleSlotByIndex();
+      const bannerContainer = await DSBannerCO.getContainerSlotByIndex();
+      const bannerInnerContainer = await DSBannerCO.getInnerContainerSlotByIndex();
+      const bannerIconsSlots = await DSBannerCO.getIconContainerSlotByIndex();
+      const bannerButtonSlot = await DSBannerCO.getButtonRootSlotByIndex();
+      const bannerActionLinkSlot = await DSBannerCO.getActionLinkSlotByIndex();
+      await expect(bannerTitleSlot).toHaveAttribute('aria-label', 'im title aria');
+      await expect(bannerSubtitleSlot).toHaveAttribute('aria-label', 'im subtitle aria');
+      await expect(bannerContainer).toHaveAttribute('aria-label', 'im container aria');
+      await expect(bannerInnerContainer).toHaveAttribute('aria-label', 'im inner container aria');
+      await expect(bannerIconsSlots).toHaveAttribute('aria-label', 'im iconcontainer aria');
+      await expect(bannerButtonSlot).toHaveAttribute('aria-label', 'im closebutton aria');
+      await expect(bannerActionLinkSlot).toHaveAttribute('aria-label', 'im actionlink aria');
+    });
+    it('03: should find custom data for each SLOT', async () => {
+      const bannerTitleSlot = await DSBannerCO.getTitleSlotByIndex();
+      const bannerSubtitleSlot = await DSBannerCO.getSubtitleSlotByIndex();
+      const bannerContainer = await DSBannerCO.getContainerSlotByIndex();
+      const bannerInnerContainer = await DSBannerCO.getInnerContainerSlotByIndex();
+      const bannerIconsSlots = await DSBannerCO.getIconContainerSlotByIndex();
+      const bannerButtonSlot = await DSBannerCO.getButtonRootSlotByIndex();
+      const bannerActionLinkSlot = await DSBannerCO.getActionLinkSlotByIndex();
+      await expect(bannerTitleSlot).toHaveAttribute('data-testid', 'im title data');
+      await expect(bannerSubtitleSlot).toHaveAttribute('data-testid', 'im subtitle data');
+      await expect(bannerContainer).toHaveAttribute('data-testid', 'im container data');
+      await expect(bannerInnerContainer).toHaveAttribute('data-testid', 'im inner container data');
+      await expect(bannerIconsSlots).toHaveAttribute('data-testid', 'im iconcontainer data');
+      await expect(bannerButtonSlot).toHaveAttribute('data-testid', 'im closebutton data');
+      await expect(bannerActionLinkSlot).toHaveAttribute('data-testid', 'im actionlink data');
+    });
+  });
 }

package/ds-banner/DSBanner.visual.spec.js

@@ -113,4 +113,18 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
+
+  describe('PUI-15114 - DSBanner, Slots- Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBannerCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the banners customized using slots', async () => {
+      await browser.eyesOpen();
+      const banner = await DSBannerCO.getContainerSlotByIndex();
+      await banner.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSBannerCO.snapshotPath('banner-slots-test'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
 }

package/ds-banner/DSBannerCO.js

@@ -24,6 +24,8 @@ export default class DSBannerCO extends PageObject {
 
   static noActionLinkURL = new Urlbuilder(PATH_E2E_BANNER, 'no-action-link-test');
 
+  static slotsTest = new Urlbuilder(PATH_E2E_BANNER, 'slots-test');
+
   static async getButton() {
     return $('[data-testid="ds-button"]');
   }
@@ -54,6 +56,34 @@ export default class DSBannerCO extends PageObject {
     return $('div*=Danger');
   }
 
+  static async getActionLinkSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsBannerActionLink"]')[index];
+  }
+
+  static async getTitleSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsBannerTitle"]')[index];
+  }
+
+  static async getSubtitleSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsBannerSubtitle"]')[index];
+  }
+
+  static async getButtonRootSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsButtonRoot"]')[index];
+  }
+
+  static async getContainerSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsBannerContainer"]')[index];
+  }
+
+  static async getIconContainerSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsBannerIconContainer"]')[index];
+  }
+
+  static async getInnerContainerSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsBannerInnerContainer"]')[index];
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSBanner', example, 'ds-banner');

package/ds-breadcrumb/DSBreadcrumb.axe-core.func.spec.js

@@ -13,7 +13,7 @@ if (
       if (errorOnGo) throw errorOnGo;
     });
     it('should have actionable breadcrumb and pass axecore scan', async () => {
-      const actionBreadcrumb = await DSBreadcrumbCO.getBreadcrumbItems(1);
+      const actionBreadcrumb = await DSBreadcrumbCO.getBreadcrumbNavItems(1);
       await actionBreadcrumb.waitForDisplayed();
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
@@ -26,7 +26,7 @@ if (
       if (errorOnGo) throw errorOnGo;
     });
     it('should have HREF on the breadcrumb and pass axecore scan', async () => {
-      const breadcrumbWithHREF = await DSBreadcrumbCO.getBreadcrumbItems(1);
+      const breadcrumbWithHREF = await DSBreadcrumbCO.getBreadcrumbNavItems(1);
       await breadcrumbWithHREF.waitForDisplayed();
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
@@ -39,7 +39,7 @@ if (
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should have breadcrumb as footer and item as div and pass axecore scan', async () => {
-      const breadcrumbAsFooter = await DSBreadcrumbCO.getBreadcrumbItems(1);
+      const breadcrumbAsFooter = await DSBreadcrumbCO.getBreadcrumbNavItems(1);
       await breadcrumbAsFooter.waitForDisplayed();
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
@@ -52,7 +52,7 @@ if (
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should have actionable breadcrumb and pass axecore scan', async () => {
-      const titleBreadcrumb = await DSBreadcrumbCO.getBreadcrumbItems(1);
+      const titleBreadcrumb = await DSBreadcrumbCO.getBreadcrumbNavItems(1);
       await titleBreadcrumb.waitForDisplayed();
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
@@ -65,7 +65,7 @@ if (
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should have actionable breadcrumb and pass axecore scan', async () => {
-      const breadcrumb = await DSBreadcrumbCO.getBreadcrumbItems(1);
+      const breadcrumb = await DSBreadcrumbCO.getBreadcrumbNavItems(1);
       await breadcrumb.waitForDisplayed();
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
@@ -78,10 +78,25 @@ if (
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should have actionable breadcrumb and pass axecore scan', async () => {
-      const truncBreadcrumb = await DSBreadcrumbCO.getBreadcrumbItems(1);
+      const truncBreadcrumb = await DSBreadcrumbCO.getBreadcrumbNavItems(1);
       await truncBreadcrumb.waitForDisplayed();
       const result = await axeCoreCheck();
       expect(result.length).toBe(0);
     });
   });
+
+  describe('PUI-14920 - BreadCrumb, Arias (current + label) - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBreadcrumbCO.containerProps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have navigation breadcrumb with correct aria-current and custom container id', async () => {
+      const currentItem1 = await DSBreadcrumbCO.getBreadcrumbItems(6);
+      await currentItem1.click();
+      const currentItem2 = await DSBreadcrumbCO.getBreadcrumbItems(12);
+      await currentItem2.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
 }

package/ds-breadcrumb/DSBreadcrumb.func.spec.js

@@ -1,48 +1,77 @@
 import DSBreadcrumbCO from './DSBreadcrumbCO';
 
-describe('PUI-4233 - Breadcrumbs, actionable color - with title', () => {
-  before('loading page', async () => {
-    const errorOnGo = await DSBreadcrumbCO.titleURL.go();
-    if (errorOnGo) throw errorOnGo;
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-4233 - Breadcrumbs, actionable color - with title', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBreadcrumbCO.titleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display title in #353c46 color', async () => {
+      const itemColor = await DSBreadcrumbCO.getItemColor('Level 7');
+      await expect(itemColor).toEqual('#353c46');
+    });
   });
-  it('should display title in #353c46 color', async () => {
-    const itemColor = await DSBreadcrumbCO.getItemColor('Level 7');
-    await expect(itemColor).toEqual('#353c46');
+  describe('PUI-4233 - Breadcrumbs, actionable color - no title', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBreadcrumbCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display no title item in #1e79c2', async () => {
+      const itemColor = await DSBreadcrumbCO.getItemColor('Level 7');
+      await expect(itemColor).toEqual('#1e79c2');
+    });
   });
-});
-describe('PUI-4233 - Breadcrumbs, actionable color - no title', () => {
-  before('loading page', async () => {
-    const errorOnGo = await DSBreadcrumbCO.basicURL.go();
-    if (errorOnGo) throw errorOnGo;
+  describe('PUI-9457 - Breadcrumbs, Container props', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBreadcrumbCO.containerProps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should find breadcrumb by custom id', async () => {
+      const breadcrumb = await DSBreadcrumbCO.getBreadcrumbCustomId();
+      await expect(breadcrumb).toBeDisplayed();
+    });
   });
-  it('should display no title item in #1e79c2', async () => {
-    const itemColor = await DSBreadcrumbCO.getItemColor('Level 7');
-    await expect(itemColor).toEqual('#1e79c2');
-  });
-});
-describe('PUI-9457 - Breadcrumbs, Container props', () => {
-  before('loading page', async () => {
-    const errorOnGo = await DSBreadcrumbCO.containerProps.go();
-    if (errorOnGo) throw errorOnGo;
-  });
-  it('should find breadcrumb by custom id', async () => {
-    const breadcrumb = await DSBreadcrumbCO.getBreadcrumbCustomId();
-    await expect(breadcrumb).toBeDisplayed();
-  });
-});
 
-describe('PUI-9463 - BreadCrumb, Click - Firing Actions', () => {
-  before('loading page', async () => {
-    const errorOnGo = await DSBreadcrumbCO.onClickURL.go();
-    if (errorOnGo) throw errorOnGo;
+  describe('PUI-9463 - BreadCrumb, Click - Firing Actions', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBreadcrumbCO.onClickURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should fire the action with click two times', async () => {
+      const actionBreadcrumb = await DSBreadcrumbCO.getBreadcrumbNavItems(1);
+      const otherBreadcrumb = await DSBreadcrumbCO.getBreadcrumbNavItems(4);
+      await actionBreadcrumb.click();
+      await otherBreadcrumb.click(); // should ignore clicks on other items
+      await actionBreadcrumb.click();
+      const counter = await DSBreadcrumbCO.getCounter('2');
+      await expect(counter).toBeDisplayedInViewport();
+    });
   });
-  it('should fire the action with click two times', async () => {
-    const actionBreadcrumb = await DSBreadcrumbCO.getBreadcrumbItems(1);
-    const otherBreadcrumb = await DSBreadcrumbCO.getBreadcrumbItems(4);
-    await actionBreadcrumb.click();
-    await otherBreadcrumb.click(); // should ignore clicks on other items
-    await actionBreadcrumb.click();
-    const counter = await DSBreadcrumbCO.getCounter('2');
-    await expect(counter).toBeDisplayedInViewport();
+
+  describe('PUI-14919 - BreadCrumb, Arias (current + label) - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSBreadcrumbCO.containerProps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have navigation breadcrumb with correct aria-current and custom container id', async () => {
+      const breadcrumb = await DSBreadcrumbCO.getBreadcrumbsByIndex(0);
+      const currentItem = await DSBreadcrumbCO.getBreadcrumbItems(6);
+      await currentItem.click();
+      await expect(currentItem).toHaveAttribute('aria-current', 'page');
+      await expect(breadcrumb).toHaveAttribute('id', 'my-custom-id');
+    });
+    // eslint-disable-next-line max-len
+    it('02: should have with-buttons breadcrumb with correct aria-current and custom container aria-label', async () => {
+      const breadcrumb = await DSBreadcrumbCO.getBreadcrumbsByIndex(1);
+      const currentItem = await DSBreadcrumbCO.getBreadcrumbItems(12);
+      await currentItem.click();
+      await expect(currentItem).toHaveAttribute('aria-current', 'step');
+      await expect(breadcrumb).toHaveAttribute('aria-label', 'my-custom-aria-label');
+    });
   });
-});
+}

package/ds-breadcrumb/DSBreadcrumb.visual.spec.js

@@ -8,9 +8,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should display a title variant correctly', async () => {
+      await browser.eyesOpen();
       const breadcrumb = await DSBreadcrumbCO.getBreadcrumb();
       await breadcrumb.waitForDisplayed({ timeout: 5000 });
-      const snapshot = await browser.checkSnapshot(DSBreadcrumbCO.snapshotPath('title'));
+      const snapshot = await browser.eyesCheckSnapshot(DSBreadcrumbCO.snapshotPath('title'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -21,11 +22,12 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should display a trailing slash for non title variant', async () => {
+      await browser.eyesOpen();
       const breadcrumb = await DSBreadcrumbCO.getBreadcrumb();
       await breadcrumb.waitForDisplayed({ timeout: 5000 });
-      const otherBreadcrumb = await DSBreadcrumbCO.getBreadcrumbItems(2);
+      const otherBreadcrumb = await DSBreadcrumbCO.getBreadcrumbNavItems(2);
       await mouseOver(otherBreadcrumb);
-      const snapshot = await browser.checkSnapshot(DSBreadcrumbCO.snapshotPath('non-title'));
+      const snapshot = await browser.eyesCheckSnapshot(DSBreadcrumbCO.snapshotPath('non-title'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -36,21 +38,20 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should show every link truncated', async () => {
+      await browser.eyesOpen();
       const breadcrumb = await DSBreadcrumbCO.getBreadcrumb();
+      await mouseOver(breadcrumb, 200, 200);
       await breadcrumb.waitForDisplayed({ timeout: 5000 });
-      const snapshot = await browser.checkSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-all-truncated'));
+      const snapshot = await browser.eyesCheckSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-all-truncated'));
       await expect(snapshot).toEqual(0);
     });
     it('should show one the links not truncated after mouse hover', async () => {
+      await browser.eyesOpen();
       const breadcrumb = await DSBreadcrumbCO.getBreadcrumb();
       await breadcrumb.waitForDisplayed({ timeout: 5000 });
       const bcLink = await DSBreadcrumbCO.getBreadcrumbItem('Aenean non ante eu nunc volutpat');
-      if (browser.capabilities.browserName !== 'firefox') {
-        await mouseOver(bcLink);
-      } else {
-        await bcLink.moveTo();
-      }
-      const snapshot = await browser.checkSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-one-not-truncated'));
+      await mouseOver(bcLink);
+      const snapshot = await browser.eyesCheckSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-one-not-truncated'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -61,11 +62,12 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should breadcrumb of different custom colors', async () => {
+      await browser.eyesOpen();
       const breadcrumb = await DSBreadcrumbCO.getBreadcrumb();
       await breadcrumb.waitForDisplayed({ timeout: 5000 });
-      const otherBreadcrumb = await DSBreadcrumbCO.getBreadcrumbItems(2);
+      const otherBreadcrumb = await DSBreadcrumbCO.getBreadcrumbNavItems(2);
       await mouseOver(otherBreadcrumb);
-      const snapshot = await browser.checkSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-custom-colors'));
+      const snapshot = await browser.eyesCheckSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-custom-colors'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -76,15 +78,17 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should show breadcrumb above title', async () => {
+      await browser.eyesOpen();
       const breadcrumb = await DSBreadcrumbCO.getBreadcrumb();
       await breadcrumb.waitForDisplayed({ timeout: 5000 });
-      const snapshot = await browser.checkSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-above-title'));
+      const snapshot = await browser.eyesCheckSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-above-title'));
       await expect(snapshot).toEqual(0);
     });
     it('should show hovered editable title', async () => {
+      await browser.eyesOpen();
       const title = await DSBreadcrumbCO.getEditableTitle();
       await mouseOver(title);
-      const snapshot = await browser.checkSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-hovered-title'));
+      const snapshot = await browser.eyesCheckSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-hovered-title'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -95,9 +99,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('should display the breadcrumb item 7 as active by default', async () => {
+      await browser.eyesOpen();
       const breadcrumb = await DSBreadcrumbCO.getBreadcrumb();
       await breadcrumb.waitForDisplayed({ timeout: 5000 });
-      const snapshot = await browser.checkSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-active-7'));
+      const snapshot = await browser.eyesCheckSnapshot(DSBreadcrumbCO.snapshotPath('breadcrumb-active-7'));
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-breadcrumb/DSBreadcrumbCO.js

@@ -33,10 +33,26 @@ export default class DSBreadcrumbCO extends PageObject {
     return $('[data-testid="breadcrumb-nav-container"]');
   }
 
-  static async getBreadcrumbItems(index) {
+  static async getBreadcrumbs() {
+    return $$('[data-testid="breadcrumb-nav-container"]');
+  }
+
+  static async getBreadcrumbsByIndex(index = 0) {
+    return $$('[data-testid="breadcrumb-nav-container"]')[index];
+  }
+
+  static async getBreadcrumbNavItems(index) {
     return $$('//li[@data-testid="breadcrumb-item-container"]/a')[index];
   }
 
+  static async getBreadcrumbItems(index = 0) {
+    return $$('[data-testid="breadcrumb-item-container"]')[index];
+  }
+
+  static async getBreadcrumbButtonItems(index) {
+    return $$('//li[@data-testid="breadcrumb-item-container"]/button')[index];
+  }
+
   static async getBreadcrumbItem(text) {
     return $(`a*=${text}`);
   }

package/ds-button-v3/DSButtonV3.func.spec.js

@@ -0,0 +1,22 @@
+import DSButtonV3CO from './DSButtonV3CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-15109 - ButtonV3 - Slots -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSButtonV3CO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should find the expected SLOTS for all the present buttons', async () => {
+      const buttonSlots = (await DSButtonV3CO.getRootSlots()).length;
+      await expect(buttonSlots).toEqual(40);
+    });
+    it('02: should find custom aria for the SLOT', async () => {
+      const button = await DSButtonV3CO.getRootSlotByIdnex(1);
+      await expect(button).toHaveAttribute('aria-label', 'im root aria');
+    });
+    it('03: should find custom data for the SLOT', async () => {
+      const button = await DSButtonV3CO.getRootSlotByIdnex(1);
+      await expect(button).toHaveAttribute('data-testid', 'im root data');
+    });
+  });
+}

package/ds-button-v3/DSButtonV3.visual.spec.js

@@ -48,20 +48,26 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should custom focused, custom hovered and custom disabled buttons', async () => {
+      await browser.eyesOpen();
       await browser.keys('Tab');
       await browser.keys('Tab');
       const button = await DSButtonV3CO.getButtonByIndex(0);
       await button.waitForDisplayed({ timeout: 5000 });
       await mouseOver(button);
-      const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-customization-interacted'));
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSButtonV3CO.snapshotPath('ds-button-v3-customization-interacted'),
+      );
       await expect(snapshot).toEqual(0);
     });
     it('02: should display two custom default buttons and disabled button hovered without changes', async () => {
+      await browser.eyesOpen();
       await browser.keys('Tab');
       const button = await DSButtonV3CO.getButtonByIndex(2);
       await button.waitForDisplayed({ timeout: 5000 });
       await mouseOver(button);
-      const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-customization-defaults'));
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSButtonV3CO.snapshotPath('ds-button-v3-customization-defaults'),
+      );
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-button-v3/DSButtonV3CO.js

@@ -13,6 +13,8 @@ export default class DSButtonV3CO extends PageObject {
 
   static applyAriaDisabled = new Urlbuilder(PATH_E2E_BUTTON_V3, 'apply-aria-disabled-test');
 
+  static slotsTest = new Urlbuilder(PATH_E2E_BUTTON_V3, 'slots-test');
+
   // selectors
   static async getButtonByIndex(index) {
     return $$('[data-testid="ds-button"]')[index];
@@ -22,6 +24,18 @@ export default class DSButtonV3CO extends PageObject {
     return $('[data-testid="ds-button"]');
   }
 
+  static async getRootSlots() {
+    return $$('[data-dimsum-slot="dsButtonRoot"]');
+  }
+
+  static async getRootSlotByIdnex(index = 0) {
+    return $$('[data-dimsum-slot="dsButtonRoot"]')[index];
+  }
+
+  static async getButtonByLabel(label) {
+    return $(`button*=${label}`);
+  }
+
   // Snapshot
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('ButtonV3', example);

package/ds-card-v3/DSCardV3CO.js

@@ -29,11 +29,11 @@ export default class DSCardV3CO extends PageObject {
 
   // selectors
   static async getActionAreaByIndex(index = 0) {
-    return $$('[data-testid="ds-card-v3-action-area"]')[index];
+    return $$('[data-testid="ds-cardv3-action-area"]')[index];
   }
 
   static async getActionArea() {
-    return $('[data-testid="ds-card-v3-action-area"]');
+    return $('[data-testid="ds-cardv3-action-area"]');
   }
 
   static async getCardContentByindex(index = 0) {
@@ -45,35 +45,35 @@ export default class DSCardV3CO extends PageObject {
   }
 
   static async getCardHeaderByindex(index = 0) {
-    return $$('[data-testid="ds-card-v3-header"]')[index];
+    return $$('[data-testid="ds-cardv3-header"]')[index];
   }
 
   static async getCardHeader() {
-    return $('[data-testid="ds-card-v3-header"]');
+    return $('[data-testid="ds-cardv3-header"]');
   }
 
   static async getCardFooterByindex(index = 0) {
-    return $$('[data-testid="ds-card-v3-footer"]')[index];
+    return $$('[data-testid="ds-cardv3-footer"]')[index];
   }
 
   static async getCardFooter() {
-    return $('[data-testid="ds-card-v3-footer"]');
+    return $('[data-testid="ds-cardv3-footer"]');
   }
 
   static async getCardContainerByIndex(index = 0) {
-    return $$('[data-testid="ds-card-v3-root"]')[index];
+    return $$('[data-testid="ds-cardv3-root"]')[index];
   }
 
   static async getCards() {
-    return $$('[data-testid="ds-card-v3-root"]');
+    return $$('[data-testid="ds-cardv3-root"]');
   }
 
   static async getCardContainer() {
-    return $('[data-testid="ds-card-v3-root"]');
+    return $('[data-testid="ds-cardv3-root"]');
   }
 
   static async getCardBody() {
-    return $('[data-testid="ds-card-v3-body"]');
+    return $('[data-testid="ds-cardv3-body"]');
   }
 
   static async getHByLevel(level = 2) {

package/ds-card-v3/global-attributes/DSCardV3.global-attributes.func.spec.js

@@ -19,16 +19,16 @@ if (
       const cardFooter = await DSCardV3CO.getCardFooter();
       await expect(cardRoot).toHaveAttribute('role', 'region');
       await expect(cardRoot).toHaveAttribute('aria-label', 'My custom card');
-      await expect(cardRoot).toHaveAttribute('data-dimsum-slot', 'dsCardV3Root');
+      await expect(cardRoot).toHaveAttribute('data-dimsum-slot', 'dsCardv3Root');
       await expect(cardHeader).toHaveAttribute('role', 'region');
       await expect(cardHeader).toHaveAttribute('aria-label', 'My custom Header');
-      await expect(cardHeader).toHaveAttribute('data-dimsum-slot', 'dsCardV3Header');
+      await expect(cardHeader).toHaveAttribute('data-dimsum-slot', 'dsCardv3Header');
       await expect(cardBody).toHaveAttribute('role', 'region');
       await expect(cardBody).toHaveAttribute('aria-label', 'My custom card Body');
-      await expect(cardBody).toHaveAttribute('data-dimsum-slot', 'dsCardV3Body');
+      await expect(cardBody).toHaveAttribute('data-dimsum-slot', 'dsCardv3Body');
       await expect(cardFooter).toHaveAttribute('role', 'region');
       await expect(cardFooter).toHaveAttribute('aria-label', 'My custom card Footer');
-      await expect(cardFooter).toHaveAttribute('data-dimsum-slot', 'dsCardV3Footer');
+      await expect(cardFooter).toHaveAttribute('data-dimsum-slot', 'dsCardv3Footer');
     });
   });
 }

package/ds-comments-card/DSComments.visual.spec.js

@@ -75,20 +75,19 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     before('loading page', async () => {
       const errorOnGo = await DSCommentsCO.slotsCustomization.go();
       if (errorOnGo) throw errorOnGo;
+      await browser.maximizeWindow();
     });
     it('01: should display customized ds-comments slots', async () => {
-      await browser.eyesOpen();
       const readmore = await DSCommentsCO.getReadMoreByIndex(0);
       await readmore.waitForDisplayed();
-      const snapshot = await browser.eyesCheckSnapshot(DSCommentsCO.snapshotPath('dscomments-slots-custom'));
+      const snapshot = await browser.checkSnapshot(DSCommentsCO.snapshotPath('dscomments-slots-custom'));
       await expect(snapshot).toEqual(0);
     });
     it('02: should have focus on first comment card and hover on third comment card content', async () => {
-      await browser.eyesOpen();
       await browser.keys(Key.Tab);
       const readmore2 = await DSCommentsCO.getReadmoreByCustomDTI();
       await mouseOver(readmore2);
-      const snapshot = await browser.eyesCheckSnapshot(DSCommentsCO.snapshotPath('dscomments-slots-interacted'));
+      const snapshot = await browser.checkSnapshot(DSCommentsCO.snapshotPath('dscomments-slots-interacted'));
       await expect(snapshot).toEqual(0);
     });
   });