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

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

@@ -0,0 +1,65 @@
+import DSBannerCO from '../DSBannerCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  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 bannerLayoutSlot = await DSBannerCO.getLayoutSlotByIndex();
+      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(bannerLayoutSlot).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/slots/DSBanner.slots.visual.spec.js

@@ -0,0 +1,17 @@
+import DSBannerCO from '../DSBannerCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  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-breadcrumb/DSBreadcrumb.func.spec.js

@@ -62,15 +62,17 @@ if (
       const breadcrumb = await DSBreadcrumbCO.getBreadcrumbsByIndex(0);
       const currentItem = await DSBreadcrumbCO.getBreadcrumbItems(6);
       await currentItem.click();
-      await expect(currentItem).toHaveAttribute('aria-current', 'page');
+      const NavItem = await DSBreadcrumbCO.getBreadcrumbNavItems(6);
+      await expect(NavItem).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);
+      const currentItem = await DSBreadcrumbCO.getBreadcrumbItems(6);
       await currentItem.click();
-      await expect(currentItem).toHaveAttribute('aria-current', 'step');
+      const buttonItem = await DSBreadcrumbCO.getBreadcrumbButtonItems(6);
+      await expect(buttonItem).toHaveAttribute('aria-current', 'step');
       await expect(breadcrumb).toHaveAttribute('aria-label', 'my-custom-aria-label');
     });
   });

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

@@ -0,0 +1,28 @@
+import DSButtonV3CO from './DSButtonV3CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17055 - ButtonV3 - Type submit -Func', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSButtonV3CO.submitBtn.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should submit on pressing Enter', async () => {
+      await browser.keys('Tab');
+      await browser.keys('Enter');
+      const didSubmit = await $('[data-testid="did-submit"]');
+      await expect(didSubmit).toHaveText('yes');
+    });
+    it('02: should submit on pressing Space', async () => {
+      await browser.keys('Tab');
+      await browser.keys('Enter');
+      const didSubmit = await $('[data-testid="did-submit"]');
+      await expect(didSubmit).toHaveText('yes');
+    });
+    it('03: should submit on click', async () => {
+      const button = await DSButtonV3CO.getButton();
+      await button.click();
+      const didSubmit = await $('[data-testid="did-submit"]');
+      await expect(didSubmit).toHaveText('yes');
+    });
+  });
+}

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

@@ -7,17 +7,22 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSButtonV3CO.longlabelURL.go();
       if (errorOnGo) throw errorOnGo;
     });
+    beforeEach('maximize window', async () => {
+      await browser.maximizeWindow();
+    });
     it('should display default long-labelled buttons showcase correctly', async () => {
+      await browser.eyesOpen();
       const button = await DSButtonV3CO.getButtonByIndex(0);
       await button.waitForDisplayed({ timeout: 5000 });
-      const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-longlabel-default'));
+      const snapshot = await browser.eyesCheckSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-longlabel-default'));
       await expect(snapshot).toEqual(0);
     });
     it('should display default long-labelled buttons showcase after resize', async () => {
+      await browser.eyesOpen();
       const button = await DSButtonV3CO.getButtonByIndex(0);
       await button.waitForDisplayed({ timeout: 5000 });
       await setTextSize(32);
-      const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-longlabel-resize'));
+      const snapshot = await browser.eyesCheckSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-longlabel-resize'));
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-button-v3/DSButtonV3CO.js

@@ -15,6 +15,8 @@ export default class DSButtonV3CO extends PageObject {
 
   static slotsTest = new Urlbuilder(PATH_E2E_BUTTON_V3, 'slots-test');
 
+  static submitBtn = new Urlbuilder(PATH_E2E_BUTTON_V3, 'pui-16729-buttons-can-submit-forms');
+
   // selectors
   static async getButtonByIndex(index) {
     return $$('[data-testid="ds-button"]')[index];

package/ds-card-navigation/CardNavigationCO.js

@@ -6,6 +6,10 @@ export default class CardNavigation extends PageObject {
 
   static basicURL = new Urlbuilder(PATH_E2E_CARD_NAVIGATION, 'basic-test');
 
+  static textWrapURL = new Urlbuilder(PATH_E2E_CARD_NAVIGATION, 'wrap-text-test');
+
+  static slotsTest = new Urlbuilder(PATH_E2E_CARD_NAVIGATION, 'slots-test');
+
   static getDescription() {
     return $('[data-testid="ds-card-navigation--description"]');
   }
@@ -14,6 +18,58 @@ export default class CardNavigation extends PageObject {
     return $$('[role="button"]')[index];
   }
 
+  static getInnerActions(index = 0) {
+    return $$('[data-testid="ds-button"]')[index];
+  }
+
+  static getCardNavigationActionsSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationActions"]')[index];
+  }
+
+  static getCardNavigationActionButtonSlotByIndex(index = 0) {
+    return $$('[data-dimsum-parent-slot="dsCardnavigationActionButton"]')[index];
+  }
+
+  static getCardNavigationButtonWrapperSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationButtonWrapper"]')[index];
+  }
+
+  static getCardNavigationCentralContentSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationCentralContent"]')[index];
+  }
+
+  static getCardNavigationContentSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationContent"]')[index];
+  }
+
+  static getCardNavigationDescriptionTextSlotByIndex(index = 0) {
+    return $$('[data-dimsum-parent-slot="dsCardnavigationDescriptionText"]')[index];
+  }
+
+  static getCardNavigationInteractiveElementRegionSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationInteractiveElementRegion"]')[index];
+  }
+
+  static getCardNavigationTitleSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationTitle"]')[index];
+  }
+
+  static getCardNavigationRootSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationRoot"]')[index];
+  }
+
+  static getCardNavigationTitleTypographySlotByIndex(index = 0) {
+    return $$('[data-dimsum-parent-slot="dsCardnavigationTitleTypography"]')[index];
+  }
+
+  static getCardNavigationTitleWrapperSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationTitleWrapper"]')[index];
+  }
+
+  static getCardNavigationTypeSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardnavigationType"]')[index];
+  }
+
   // Snapshots
   static snapshotPath(example = 'truncated-text') {
     return PageObject.getSnapshotPathBuilder('DSCardNavigation', example, 'ds-card-navigation');

package/ds-card-navigation/DSCardNavigation.func.spec.js

@@ -1,5 +1,8 @@
 // import { Key } from 'webdriverio';
+import { Key } from 'webdriverio';
 import CardNavigationCO from './CardNavigationCO';
+import DSTooltipV3CO from '../ds-tooltip-v3/DSTooltipV3CO';
+import { mouseOver } from '../helpers';
 
 if (
   (!browser.capabilities['ice:options'].isPhone &&
@@ -28,5 +31,51 @@ if (
       await expect(card4type).toEqual('regulatory');
     });
   });
-  // Add keyboard nav and tooltip keyboard after PUI-15574 and PUI-16149
+
+  describe('PUI-17230: CardNavigation: Keyboard -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardNavigationCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus fourth card with KB', async () => {
+      const card4 = await CardNavigationCO.getCardByIndex(3);
+      await card4.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await expect(card4).toBeFocused();
+    });
+    it('02: should focus inner actions for the fifth card with KB', async () => {
+      const secondActionCard5 = await CardNavigationCO.getInnerActions(0);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await expect(secondActionCard5).toBeFocused();
+    });
+    it('03: should focus sixth card with KB and display tooltip', async () => {
+      const card6 = await CardNavigationCO.getCardByIndex(5);
+      await browser.keys(Key.Tab);
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+      await expect(card6).toBeFocused();
+    });
+  });
+
+  describe('PUI-17231: CardNavigation: Tooltip -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardNavigationCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a tooltip when hovering the sixth card which is truncated', async () => {
+      const card6 = await CardNavigationCO.getCardByIndex(5);
+      await card6.waitForDisplayed();
+      await mouseOver(card6);
+      const tooltip = await DSTooltipV3CO.getTooltip();
+      const tooltipContent1 = await (await DSTooltipV3CO.getTooltipContentByIndex(0)).getText();
+      const tooltipContent2 = await (await DSTooltipV3CO.getTooltipContentByIndex(1)).getText();
+      await expect(tooltip).toBeDisplayed();
+      await expect(tooltipContent1).toEqual('Card Title with actions + long description');
+      await expect(tooltipContent2).toEqual('Customs actions + long description long description');
+    });
+  });
 }

package/ds-card-navigation/DSCardNavigation.slots.func.spec.js

@@ -0,0 +1,127 @@
+/* eslint-disable max-statements */
+/* eslint-disable max-len */
+import CardNavigationCO from './CardNavigationCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-17279: CardNavigation: Slots -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardNavigationCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a custom aria-* for each slot', async () => {
+      const cardNavActions = await (
+        await CardNavigationCO.getCardNavigationActionsSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavActionButton = await (
+        await CardNavigationCO.getCardNavigationActionButtonSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavButtonWrapper = await (
+        await CardNavigationCO.getCardNavigationButtonWrapperSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavCentralContent = await (
+        await CardNavigationCO.getCardNavigationCentralContentSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavContent = await (
+        await CardNavigationCO.getCardNavigationContentSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavDescText = await (
+        await CardNavigationCO.getCardNavigationDescriptionTextSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavInteractElemReg = await (
+        await CardNavigationCO.getCardNavigationInteractiveElementRegionSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavTitle = await (
+        await CardNavigationCO.getCardNavigationTitleSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavRoot = await (await CardNavigationCO.getCardNavigationRootSlotByIndex()).getAttribute('aria-label');
+      const cardNavTitleTypography = await (
+        await CardNavigationCO.getCardNavigationTitleTypographySlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavTitleWrapper = await (
+        await CardNavigationCO.getCardNavigationTitleWrapperSlotByIndex()
+      ).getAttribute('aria-label');
+      const cardNavType = await (await CardNavigationCO.getCardNavigationTypeSlotByIndex()).getAttribute('aria-label');
+      await expect(cardNavActions).toEqual('actions aria');
+      await expect(cardNavActionButton).toEqual('actionbutton aria');
+      await expect(cardNavButtonWrapper).toEqual('buttonwrapper aria');
+      await expect(cardNavCentralContent).toEqual('centralcontent aria');
+      await expect(cardNavContent).toEqual('content aria');
+      await expect(cardNavDescText).toEqual('descriptiontext aria');
+      await expect(cardNavInteractElemReg).toEqual('interactiveelemregion aria');
+      await expect(cardNavTitle).toEqual('title aria');
+      await expect(cardNavRoot).toEqual('root aria');
+      await expect(cardNavTitleTypography).toEqual('titletypography aria');
+      await expect(cardNavTitleWrapper).toEqual('titlewrapper aria');
+      await expect(cardNavType).toEqual('type aria');
+    });
+    it('02: should have a custom data-testid for each slot', async () => {
+      const cardNavActions = await (
+        await CardNavigationCO.getCardNavigationActionsSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavActionButton = await (
+        await CardNavigationCO.getCardNavigationActionButtonSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavButtonWrapper = await (
+        await CardNavigationCO.getCardNavigationButtonWrapperSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavCentralContent = await (
+        await CardNavigationCO.getCardNavigationCentralContentSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavContent = await (
+        await CardNavigationCO.getCardNavigationContentSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavDescText = await (
+        await CardNavigationCO.getCardNavigationDescriptionTextSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavInteractElemReg = await (
+        await CardNavigationCO.getCardNavigationInteractiveElementRegionSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavTitle = await (
+        await CardNavigationCO.getCardNavigationTitleSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavRoot = await (await CardNavigationCO.getCardNavigationRootSlotByIndex()).getAttribute('data-testid');
+      const cardNavTitleTypography = await (
+        await CardNavigationCO.getCardNavigationTitleTypographySlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavTitleWrapper = await (
+        await CardNavigationCO.getCardNavigationTitleWrapperSlotByIndex()
+      ).getAttribute('data-testid');
+      const cardNavType = await (await CardNavigationCO.getCardNavigationTypeSlotByIndex()).getAttribute('data-testid');
+      await expect(cardNavActions).toEqual('actions data');
+      await expect(cardNavActionButton).toEqual('actionbutton data');
+      await expect(cardNavButtonWrapper).toEqual('buttonwrapper data');
+      await expect(cardNavCentralContent).toEqual('centralcontent data');
+      await expect(cardNavContent).toEqual('content data');
+      await expect(cardNavDescText).toEqual('descriptiontext data');
+      await expect(cardNavInteractElemReg).toEqual('interactiveelemregion data');
+      await expect(cardNavTitle).toEqual('title data');
+      await expect(cardNavRoot).toEqual('root data');
+      await expect(cardNavTitleTypography).toEqual('titletypography data');
+      await expect(cardNavTitleWrapper).toEqual('titlewrapper data');
+      await expect(cardNavType).toEqual('type data');
+    });
+    it('03: should have a custom lang for each text-containing slot', async () => {
+      const cardNavCentralContent = await (
+        await CardNavigationCO.getCardNavigationCentralContentSlotByIndex()
+      ).getAttribute('lang');
+      const cardNavContent = await (await CardNavigationCO.getCardNavigationContentSlotByIndex()).getAttribute('lang');
+      const cardNavDescText = await (
+        await CardNavigationCO.getCardNavigationDescriptionTextSlotByIndex()
+      ).getAttribute('lang');
+      const cardNavTitle = await (await CardNavigationCO.getCardNavigationTitleSlotByIndex()).getAttribute('lang');
+      const cardNavTitleTypography = await (
+        await CardNavigationCO.getCardNavigationTitleTypographySlotByIndex()
+      ).getAttribute('lang');
+      await expect(cardNavCentralContent).toEqual('es');
+      await expect(cardNavContent).toEqual('es');
+      await expect(cardNavDescText).toEqual('es');
+      await expect(cardNavTitle).toEqual('es');
+      await expect(cardNavTitleTypography).toEqual('es');
+    });
+  });
+}

package/ds-card-navigation/DSCardNavigation.slots.visual.spec.js

@@ -0,0 +1,26 @@
+/* eslint-disable max-statements */
+/* eslint-disable prettier/prettier */
+/* eslint-disable max-len */
+// import { Key } from 'webdriverio';
+import CardNavigationCO from './CardNavigationCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-17283: CardNavigation: Slots -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardNavigationCO.slotsTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have a custom aria-* for each slot', async () => {
+      await browser.eyesOpen();
+      const cardNavRoot = await CardNavigationCO.getCardNavigationRootSlotByIndex();
+      await cardNavRoot.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(CardNavigationCO.snapshotPath('cardnav-slots-test'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-card-navigation/DSCardNavigation.visual.spec.js

@@ -1,3 +1,4 @@
+import { Key } from 'webdriverio';
 import CardNavigationCO from './CardNavigationCO';
 import { mouseOver } from '../helpers';
 
@@ -36,4 +37,19 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
+
+  describe('PUI-17229: CardNavigation: Text Wrap -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await CardNavigationCO.textWrapURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display card navigation with text wrap', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      const card = await CardNavigationCO.getCardByIndex(1);
+      await card.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(CardNavigationCO.snapshotPath('cardnav-wrap-text'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
 }

package/ds-card-v3/DSCardV3CO.js

@@ -23,6 +23,8 @@ export default class DSCardV3CO extends PageObject {
 
   static singleSelectURL = new Urlbuilder(PATH_E2E_CARD_V3, 'single-select-test');
 
+  static slotsURL = new Urlbuilder(PATH_E2E_CARD_V3, 'slots-test');
+
   static reflowURL = new Urlbuilder(PATH_E2E_CARD_V3, 'reflow-test');
 
   static globalAttributesURL = new Urlbuilder(PATH_E2E_CARD_V3, 'global-attributes-test');
@@ -92,6 +94,24 @@ export default class DSCardV3CO extends PageObject {
     return $$('button[aria-label="drag and drop gripper"]')[index];
   }
 
+  // Slots
+
+  static async getRootSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardv3Root"]')[index];
+  }
+
+  static async getBodySlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardv3Body"]')[index];
+  }
+
+  static async getHeaderSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardv3Header"]')[index];
+  }
+
+  static async getFooterSlotByIndex(index = 0) {
+    return $$('[data-dimsum-slot="dsCardv3Footer"]')[index];
+  }
+
   // Snapshot
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('card-v3', example);

package/ds-card-v3/drag-n-drop/DSCardV3.DnD.visual.spec.js

@@ -30,7 +30,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const snapshot = await browser.eyesCheckSnapshot(DSCardV3CO.snapshotPath('card-v3-dnd-drop-last-position'));
       await expect(snapshot).toEqual(0);
     });
-
+    // https://jira.elliemae.io/browse/PUI-15649
     it('04: should move an item to the the first position', async () => {
       await browser.eyesOpen();
       await tabStops(12);

package/ds-card-v3/slots/DSCardV3.slots.axe-core.spec.js

@@ -0,0 +1,22 @@
+import { axeCoreCheck } from '../../helpers';
+import DSCardV3CO from '../DSCardV3CO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-17399 - CardV3: Slots - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display CardV3 with customized slots', async () => {
+      const root = await DSCardV3CO.getRootSlotByIndex();
+      await root.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-card-v3/slots/DSCardV3.slots.func.spec.js

@@ -0,0 +1,36 @@
+/* eslint-disable max-lines */
+import DSCardV3CO from '../DSCardV3CO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-17397 - CardV3: Slots - Func Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: each CardV3 slot to have custom aria-* attribute', async () => {
+      const root = await DSCardV3CO.getRootSlotByIndex();
+      const body = await DSCardV3CO.getBodySlotByIndex();
+      const header = await DSCardV3CO.getHeaderSlotByIndex();
+      const footer = await DSCardV3CO.getFooterSlotByIndex();
+      await expect(root).toHaveAttribute('aria-label', 'root aria');
+      await expect(body).toHaveAttribute('aria-label', 'body aria');
+      await expect(header).toHaveAttribute('aria-label', 'header aria');
+      await expect(footer).toHaveAttribute('aria-label', 'footer aria');
+    });
+    it('02: each CardV3 slot to have custom data-* attribute', async () => {
+      const root = await DSCardV3CO.getRootSlotByIndex();
+      const body = await DSCardV3CO.getBodySlotByIndex();
+      const header = await DSCardV3CO.getHeaderSlotByIndex();
+      const footer = await DSCardV3CO.getFooterSlotByIndex();
+      await expect(root).toHaveAttribute('data-testid', 'root data');
+      await expect(body).toHaveAttribute('data-testid', 'body data');
+      await expect(header).toHaveAttribute('data-testid', 'header data');
+      await expect(footer).toHaveAttribute('data-testid', 'footer data');
+    });
+  });
+}

package/ds-card-v3/slots/DSCardV3.slots.visual.spec.js

@@ -0,0 +1,18 @@
+/* eslint-disable max-lines */
+import DSCardV3CO from '../DSCardV3CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-17398 - CardV3: Slots - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.slotsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display CardV3 with customized slots', async () => {
+      await browser.eyesOpen();
+      const root = await DSCardV3CO.getRootSlotByIndex();
+      await root.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSCardV3CO.snapshotPath('card-v3-slots'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-chat/DSChat.func.spec.js

@@ -2,6 +2,7 @@
 import { Key } from 'webdriverio';
 import { ChatCO, ComposerCO, HeaderCO, StoryBtnsCO, BubbleCO, TileCO } from './components';
 import { type } from '../helpers';
+import DSBannerCO from '../ds-banner/DSBannerCO';
 
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-9250 - Chat, Keyboard Navigation', () => {
@@ -85,7 +86,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await triggerChat.click();
       const openBannerTop = await ChatCO.getToggleBtnByIndex(0);
       await openBannerTop.click();
-      const topBanner = await ChatCO.getBanner();
+      const topBanner = await DSBannerCO.getBannerContainer();
       const bannerType = await topBanner.getAttribute('data-type');
       await expect(bannerType).toEqual('danger');
       await expect(topBanner).toBeFocused();
@@ -93,7 +94,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     it('should focus the bottom banner', async () => {
       const openBannerTop = await ChatCO.getToggleBtnByIndex(1);
       await openBannerTop.click();
-      const bottomBanner = await ChatCO.getBanner();
+      const bottomBanner = await DSBannerCO.getBannerContainer();
       const bannerType = await bottomBanner.getAttribute('data-type');
       await expect(bannerType).toEqual('warning');
       await expect(bottomBanner).toBeFocused();