dimsum-e2e-tests 3.22.0-next.36

package/ds-chat/DSChatCO.js

@@ -0,0 +1,128 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_CHAT_EXAMPLES, PATH_CHAT_PARTS, PATH_E2E_CHAT } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSChatCO extends PageObject {
+  static TEST_STR = 'this is a test string';
+
+  static systemMessageURL = new Urlbuilder(PATH_CHAT_PARTS, 'chat-system-message');
+
+  static messageDelimiterURL = new Urlbuilder(PATH_CHAT_PARTS, 'chat-message-delimiter');
+
+  static containerURL = new Urlbuilder(PATH_CHAT_PARTS, 'container');
+
+  static loadMoreURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'container-load-more');
+
+  static loadingURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'loading-container');
+
+  static loadingErrorURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'loading-error');
+
+  static floatingExampleURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'floating-example');
+
+  static focusCasesURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'container-focus-cases');
+
+  static mobileContainerURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'mobile-container');
+
+  static sidePanelIntegrationURL = new Urlbuilder(PATH_E2E_CHAT, 'side-panel-integration-test');
+
+  static chatCardURL = new Urlbuilder(PATH_CHAT_PARTS, 'chat-card');
+
+  static tooltipPosition = new Urlbuilder(PATH_CHAT_EXAMPLES, 'tooltip-position');
+
+  static focuseableBanners = new Urlbuilder(PATH_CHAT_EXAMPLES, 'focus-on-banner');
+
+  static newMessages = new Urlbuilder(PATH_CHAT_EXAMPLES, 'container-new-messages');
+
+  static nonDeliveredURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'non-delivered-messages');
+
+  static nonGridInfluencerURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'non-grid-influencer-integration');
+
+  static customBanner = new Urlbuilder(PATH_CHAT_EXAMPLES, 'custom-banner');
+
+  static emptyState = new Urlbuilder(PATH_CHAT_EXAMPLES, 'empty-state');
+
+  static globalLineHeight = new Urlbuilder(PATH_E2E_CHAT, 'global-line-height');
+
+  static unreadMessagesBanner = new Urlbuilder(PATH_E2E_CHAT, 'unread-messages-banner');
+
+  static basicE2eURL = new Urlbuilder(PATH_E2E_CHAT, 'basic-e-2-e');
+
+  // selector
+  static async isTyping() {
+    return (await $('[data-testid="is-typing"]').getText()).includes('Typing');
+  }
+
+  static async getInputStatus() {
+    return $('[data-testid="input-status"]').getText();
+  }
+
+  static async clickScrollButton() {
+    return $('[data-testid="scroll-chat-button"]').click();
+  }
+
+  static async getSentTimes() {
+    return $('[data-testid="sent"]').getText();
+  }
+
+  static async getAddItemButton() {
+    return $('[data-testid="add-item-button"]');
+  }
+
+  static async getThreadContainer() {
+    return $('[data-testid="chat-thread-container"]');
+  }
+
+  static async getCards() {
+    return $$('[data-testid="chat-card-wrapper"]');
+  }
+
+  static async getBannerActionLink() {
+    return $('[data-testid="ds-banner-action-link"]');
+  }
+
+  static async getSidebarFooterButton() {
+    return $('[data-testid="sidebar-button-sidebar_footer"]');
+  }
+
+  static async getElementListItemByDataIndex(dataIndex) {
+    return $(`[data-element="chat-element-list-item"][data-index="${dataIndex}"]`);
+  }
+
+  static async getToogleBtn() {
+    return $('[data-testid="toggle-btn"]');
+  }
+
+  static async getToogleBtns() {
+    return $$('[data-testid="toggle-btn"]');
+  }
+
+  static getToggleBtnByIndex = async (index) => getElementByIndex(this.getToogleBtns, index);
+
+  static async getLoadMoreBtn() {
+    return $('[data-testid="ds-chat-load-more-btn"]');
+  }
+
+  static async getBubbleContainers() {
+    return $$('[data-element="chat-element-list-item"]');
+  }
+
+  static async getHeaderItem() {
+    return $('[data-testid="tile-button-item-id-header"]');
+  }
+
+  static async getButtons() {
+    return $$('[data-testid="ds-button"]');
+  }
+
+  static getButtonByIndex = async (index) => getElementByIndex(this.getButtons, index);
+
+  static async getBanner() {
+    return $('[data-testid="ds-banner"]');
+  }
+
+  // Snapshots
+  // eslint-disable-next-line max-lines
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ChatMisc', example, 'ds-chat');
+  }
+}

package/ds-chat/components/BubbleCO.js

@@ -0,0 +1,59 @@
+import { PATH_E2E_CHAT } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class BubbleCO extends PageObject {
+  static bubbleURL = new Urlbuilder(PATH_E2E_CHAT, 'bubble-test');
+
+  static bubbleWrapping = new Urlbuilder(PATH_E2E_CHAT, 'bubble-wrapping-test');
+
+  static systemMessageInContainerUCURL = new Urlbuilder(PATH_E2E_CHAT, 'system-message-in-container');
+
+  // selectors
+  static async getErrorMessage(bubbleId) {
+    return $(`[data-testid="chat-bubble-error-message-${bubbleId}"]`);
+  }
+
+  static async getHelpMessage(bubbleId) {
+    return $(`[data-testid="chat-bubble-help-message-${bubbleId}"]`);
+  }
+
+  static async getBody(bubbleId) {
+    return $(`[data-testid="chat-bubble-body-${bubbleId}"]`);
+  }
+
+  static async getBubbleFocuseable(bubbleN) {
+    return $(`div[data-element="chat-element-list-item"][data-index="${bubbleN}"]`);
+  }
+
+  static async getSystemMessage() {
+    return $('[data-testid="chat-system-message-title"]');
+  }
+
+  static async getMsgDelimiter() {
+    return $('[data-testid="chat-message-delimiter-title"]');
+  }
+
+  static async getMsgDelimiterByIndex(index) {
+    return $$('[data-testid="chat-message-delimiter-title"]')[index];
+  }
+
+  static async getErrorMessageAnchor(bubbleId) {
+    return (await BubbleCO.getErrorMessage(bubbleId)).$(`a`);
+  }
+
+  static async isVisible(bubbleId) {
+    return browser.execute((bubId) => {
+      const getRect = (element) => element.getBoundingClientRect();
+      const bubble = document.querySelector(`div[data-element="chat-element-list-item"][data-index="${bubId}"]`);
+      const container = document.querySelector('[data-testid="chat-thread-container"]');
+      const ovbot = getRect(bubble).bottom - getRect(container).bottom;
+      const ovtop = getRect(container).top - getRect(bubble).top;
+      return ovbot < 0 && ovtop < 0;
+    }, bubbleId);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Bubble', example, 'ds-chat');
+  }
+}

package/ds-chat/components/ComposerCO.js

@@ -0,0 +1,41 @@
+/* eslint-disable import/no-relative-packages */
+import {
+  PATH_CHAT_EXAMPLES,
+  PATH_E2E_CHAT,
+  PATH_CHAT_PARTS,
+} from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class ComposerCO extends PageObject {
+  static composerURL = new Urlbuilder(PATH_CHAT_PARTS, 'composer');
+
+  static mobileComposerURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'mobile-container');
+
+  static characterCountURL = new Urlbuilder(PATH_CHAT_PARTS, 'composer-character-count');
+
+  static characterCountCustomURL = new Urlbuilder(PATH_CHAT_PARTS, 'composer-character-count-custom-message');
+
+  static responsiveContainerUCURL = new Urlbuilder(PATH_E2E_CHAT, 'responsive-container');
+
+  static containerFocusCasesURL = new Urlbuilder(PATH_CHAT_EXAMPLES, 'container-focus-cases');
+
+  static LONG_STRING = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula bibendum nulla';
+
+  // selectors
+  static async getTextareaInput() {
+    return $(`[data-testid="chat-composer-textarea"]`);
+  }
+
+  static async getCounterAreaText() {
+    return $(`[data-testid="composer-counter-area"] span`);
+  }
+
+  static async getSendButton() {
+    return $(`[data-testid="chat-composer-send-button"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Composer', example, 'ds-chat');
+  }
+}

package/ds-chat/components/FloatingButtonCO.js

@@ -0,0 +1,16 @@
+import { PATH_CHAT_PARTS } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class FloatingButtonCO extends PageObject {
+  static floatingButtonURL = new Urlbuilder(PATH_CHAT_PARTS, 'float-button');
+
+  // selectors
+  static async getFloatingButton() {
+    return $(`[data-testid="chat-floating-button"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('FloatingButton', example, 'ds-chat');
+  }
+}

package/ds-chat/components/HeaderCO.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_CHAT_PARTS, PATH_E2E_CHAT } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class HeaderCO extends PageObject {
+  static headerURL = new Urlbuilder(PATH_CHAT_PARTS, 'header');
+
+  static withConditionalRenderingUCURL = new Urlbuilder(PATH_E2E_CHAT, 'conditional-rendering-header-buttons');
+
+  // selectors
+  static async getHeaderButton(buttonNumber) {
+    return browser.waitUntil(
+      async () => {
+        const headerButton = await $$('[data-testid="header-button"]');
+        return headerButton.length > buttonNumber ? headerButton[buttonNumber] : false;
+      },
+      {
+        timeout: 5000,
+        timeoutMsg: 'header button not shown after 5 seconds',
+      },
+    );
+  }
+
+  static async getHeaderDropdownMenu() {
+    return $('[data-testid="dropdown-menu-listbox"]');
+  }
+
+  static async getHeaderWithAria() {
+    return $('[aria-label="Other Title"]');
+  }
+
+  static async getHeaderTitleByIndex(index) {
+    return $$('[data-testid="chat-header-title"]')[index];
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Header', example, 'ds-chat');
+  }
+}

package/ds-chat/components/StoryBtnsCO.js

@@ -0,0 +1,15 @@
+import { PageObject } from '../../helpers';
+
+export default class StoryBtnsCO extends PageObject {
+  static async getFocusOn950Btn() {
+    return $(`[data-testid="focus-950-button"]`);
+  }
+
+  static async getFocusOnComposer() {
+    return $(`[data-testid="focus-composer-button"]`);
+  }
+
+  static async getFocusOnSendBtn() {
+    return $(`[data-testid="focus-send-button"]`);
+  }
+}

package/ds-chat/components/TileCO.js

@@ -0,0 +1,29 @@
+import { PATH_CHAT_PARTS } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class TileCO extends PageObject {
+  static tilesURL = new Urlbuilder(PATH_CHAT_PARTS, 'tile');
+
+  static sidebarURL = new Urlbuilder(PATH_CHAT_PARTS, 'sidebar');
+
+  static async getChatTile(tileId) {
+    return $(`[data-testid="tile-button-${tileId}"]`);
+  }
+
+  static async getChatTileButtonItem(tileId) {
+    return $(`[data-testid="tile-button-item-id-${tileId}"]`);
+  }
+
+  static async getSideBarSelectedTile() {
+    return $(`[data-testid="selected-tile"]`).getText();
+  }
+
+  static async getTileTooltip(id) {
+    return $(`[data-testid="ds-tooltip-v3-trigger-wrapper_ds-chat-tile-tooltip-button-item-id-${id}"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Tile', example, 'ds-chat');
+  }
+}

package/ds-chat/components/index.js

@@ -0,0 +1,7 @@
+export { default as BubbleCO } from './BubbleCO';
+export { default as FloatingButtonCO } from './FloatingButtonCO';
+export { default as TileCO } from './TileCO';
+export { default as HeaderCO } from './HeaderCO';
+export { default as ComposerCO } from './ComposerCO';
+export { default as ChatCO } from '../DSChatCO';
+export { default as StoryBtnsCO } from './StoryBtnsCO';

package/ds-chat/helpers/getElementByDataTestId.js

@@ -0,0 +1 @@
+export const getElementByDataTestId = async (dtid) => $(`[data-testid="${dtid}"]`);

package/ds-chat/helpers/index.js

@@ -0,0 +1 @@
+export * from './getElementByDataTestId';

package/ds-chip/DSChip.axe-core.func.spec.js

@@ -0,0 +1,64 @@
+/* eslint-disable max-len */
+import DSChipCO from './DSChipCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10691 - DSChip:: Axe-core, Basic states -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChipCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Chips states should pass axe-core scan without violations', async () => {
+      await (await DSChipCO.getChipByIndex(1)).waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10692 - DSChip:: Axe-core, Inside Popper -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChipCO.popperURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Chips inside popper should pass axe-core scan without violations', async () => {
+      const buttonTrigger = await DSChipCO.getPopperTrigger();
+      await buttonTrigger.waitForDisplayed();
+      await buttonTrigger.click();
+      await (await DSChipCO.getChipByIndex(1)).waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10693 - DSChip:: Axe-core, Shapes -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChipCO.shapeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Chips shapes should pass axe-core scan without violations', async () => {
+      await (await DSChipCO.getChipByIndex(1)).waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-10694 - DSChip:: Axe-core, Mobile -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChipCO.mobileURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Chips within mobile context should pass axe-core scan without violations', async () => {
+      await (await DSChipCO.getChipByIndex(1)).waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Chips below mobile context (usecase) should pass axe-core scan without violations', async () => {
+      const chip = await DSChipCO.getChipByIndex(1);
+      await chip.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-chip/DSChip.visual.spec.js

@@ -0,0 +1,83 @@
+import { Key } from 'webdriverio';
+import { mouseOver } from '../helpers';
+import DSChipCO from './DSChipCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8634 - Chip visual tests, within popper', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChipCO.popperURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display pills within a popper and a tooltip', async () => {
+      await browser.eyesOpen();
+      const popperTrigger = await DSChipCO.getPopperTrigger();
+      await popperTrigger.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('chips-popper'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8635 - Chip, Shapes -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChipCO.shapeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show shaped chips interacted', async () => {
+      await browser.eyesOpen();
+      await (await DSChipCO.getChipByIndex(1)).click();
+      await mouseOver(await DSChipCO.getChipByIndex(3));
+      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('dschips-shaped'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8928 - Chip, Styles -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChipCO.shapeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show chips interacted, one focused, one hovered', async () => {
+      await browser.eyesOpen();
+      await (await DSChipCO.getChipByIndex(1)).click();
+      await mouseOver(await DSChipCO.getChipByIndex(3));
+      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('dschips-shaped-states'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should show chips interacted, one focused and hovered', async () => {
+      await browser.eyesOpen();
+      await (await DSChipCO.getChipByIndex(1)).click();
+      await mouseOver(await DSChipCO.getChipByIndex(1));
+      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('dschips-shaped-focus-and-hover'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should show chips interacted, one focused, selected and hovered', async () => {
+      await browser.eyesOpen();
+      await (await DSChipCO.getChipByIndex(2)).click();
+      await mouseOver(await DSChipCO.getChipByIndex(2));
+      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('dschips-shaped-focus-hover-and-sel'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-8636 - Chip, Mobile -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChipCO.mobileURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show chips on mobile viewport', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('dschips-mobile'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should show chips on mobile viewport behind the popover', async () => {
+      await browser.eyesOpen();
+      const chip = await DSChipCO.getChipByIndex(5);
+      await chip.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('dschips-mobile-behind-shadow'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-chip/DSChipCO.js

@@ -0,0 +1,36 @@
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_E2E_CHIP } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSChipCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_E2E_CHIP, 'basic-test');
+
+  static popperURL = new Urlbuilder(PATH_E2E_CHIP, 'inside-popper-test');
+
+  static mobileURL = new Urlbuilder(PATH_E2E_CHIP, 'mobile-test');
+
+  static shapeURL = new Urlbuilder(PATH_E2E_CHIP, 'shape-test');
+
+  static getUrl = (example = 'basic-test') => PageObject.getUrl(PATH_E2E_CHIP, example);
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Chip', example);
+  }
+
+  // selectors
+  static async getChips() {
+    return $$(`[data-testid="ds-chip-root"]`); // ask for better locators for the chip
+  }
+
+  static getChipByIndex = async (index) => getElementByIndex(this.getChips, index);
+
+  static async getPopperTrigger() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
+  }
+}

package/ds-circular-indeterminate-indicator/DSCircularIndicator.axe-core.func.spec.js

@@ -0,0 +1,45 @@
+import DSCircularIndicatorCO from './DSCircularIndicatorCO';
+import { mouseOver, axeCoreCheck } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11275 - Circular Indeterminate Indicator, showcase/tooltip - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCircularIndicatorCO.showcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should pass axe-core scan with tooltip displayed', async () => {
+      const tooltipWrapper = await DSCircularIndicatorCO.getTooltipWrapperByIndex(0);
+      await mouseOver(tooltipWrapper);
+      const tooltip = await DSCircularIndicatorCO.getTooltip();
+      await tooltip.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11277 - Circular Indeterminate Indicator, full-screen - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCircularIndicatorCO.fullScreenURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should pass axe-core scan with fullScreen indicator', async () => {
+      const circularIndicator = await DSCircularIndicatorCO.getCircularIndicator();
+      await circularIndicator.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11276 - Circular Indeterminate Indicator, Dialog - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCircularIndicatorCO.insideDialog.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should pass axe-core scan with the circular indicator inside a dialog', async () => {
+      const openDialog = await DSCircularIndicatorCO.getOpenDialogBtn();
+      await openDialog.click();
+      const circularIndicator = await DSCircularIndicatorCO.getCircularIndicator();
+      await circularIndicator.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-circular-indeterminate-indicator/DSCircularIndicator.func.spec.js

@@ -0,0 +1,17 @@
+import DSCircularIndicatorCO from './DSCircularIndicatorCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8787 - Circular Indeterminate Indicator - Tooltip', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCircularIndicatorCO.showcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip on hover', async () => {
+      const tooltipWrapper = await DSCircularIndicatorCO.getTooltipWrapperByIndex(0);
+      await mouseOver(tooltipWrapper);
+      const tooltip = await DSCircularIndicatorCO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+    });
+  });
+}

package/ds-circular-indeterminate-indicator/DSCircularIndicator.visual.spec.js

@@ -0,0 +1,37 @@
+import DSCircularIndicatorCO from './DSCircularIndicatorCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10442 - Circular Indeterminate Indicator - Backdrop Integration - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCircularIndicatorCO.fullScreenURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display CircularIndeterminateIndicator with backdrop correctly', async () => {
+      await browser.eyesOpen();
+      const circularIndicator = await DSCircularIndicatorCO.getCircularIndicator();
+      await circularIndicator.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSCircularIndicatorCO.snapshotPath('circular-indeterminate-indicator-backdrop-integration'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8806 - Circular Indeterminate Indicator - Layout, Dialog - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCircularIndicatorCO.insideDialog.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display CircularIndeterminateIndicator within dialog correctly', async () => {
+      await browser.eyesOpen();
+      const openDialog = await DSCircularIndicatorCO.getOpenDialogBtn();
+      await openDialog.click();
+      const circularIndicator = await DSCircularIndicatorCO.getCircularIndicator();
+      await circularIndicator.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSCircularIndicatorCO.snapshotPath('circular-indeterminate-indicator-dialog-integration'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-circular-indeterminate-indicator/DSCircularIndicatorCO.js

@@ -0,0 +1,33 @@
+import { PATH_E2E_CIRCULAR_INDET_INDICATOR } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSSquareIndicator extends PageObject {
+  static showcaseURL = new Urlbuilder(PATH_E2E_CIRCULAR_INDET_INDICATOR, 'showcase');
+
+  static fullScreenURL = new Urlbuilder(PATH_E2E_CIRCULAR_INDET_INDICATOR, 'full-screen-test');
+
+  static insideDialog = new Urlbuilder(PATH_E2E_CIRCULAR_INDET_INDICATOR, 'inside-dialog-test');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('CircularIndeterminateIndicator', example, 'ds-circularindicator');
+  }
+
+  static async getCircularIndicator() {
+    return $('[data-testid="ds-circular-indeterminate-indicator-root"]');
+  }
+
+  static async getOpenDialogBtn() {
+    return $('[data-testid="open-dialog-button"]');
+  }
+
+  static async getTooltipWrappers() {
+    return $$('[data-testid="ds-tooltip-v3-trigger-wrapper"]');
+  }
+
+  static getTooltipWrapperByIndex = async (index) => getElementByIndex(this.getTooltipWrappers, index);
+
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
+  }
+}