dimsum-e2e-tests 1.0.0-rc.1

package/ds-chat/DSChat-composer.visual.spec.js

@@ -0,0 +1,87 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable no-plusplus */
+import { ComposerCO } from './components';
+import { type } from '../helpers';
+
+// Does not work on iPad 8th. Remove when upgraded to the latest one
+if (
+  !browser.capabilities['ice:options']?.isPhone &&
+  !browser.capabilities?.['bstack:options']?.deviceName?.includes('iPad')
+) {
+  describe('PUI-6694 - Chat, Composer, Textarea - Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ComposerCO.composerURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should grow the textarea to 50% of the parent', async () => {
+      const composerTextArea = await ComposerCO.getTextareaInput();
+      await composerTextArea.click();
+      for (let i = 0; i < 8; i++) {
+        if (browser.capabilities['ice:options']?.isTablet) {
+          await composerTextArea.addValue(ComposerCO.LONG_STRING);
+        } else {
+          await type(ComposerCO.LONG_STRING);
+        }
+      }
+      const snapshot = await browser.checkSnapshot(ComposerCO.snapshotPath('composer'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+
+if (browser.capabilities?.['ice:options']?.isPhone) {
+  describe('PUI-6695 - Chat, Composer, Phone - Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ComposerCO.mobileComposerURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the mobile container/composer properly', async () => {
+      const snapshot = await browser.checkSnapshot(ComposerCO.snapshotPath('composer'));
+      await expect(snapshot).toEqual(0);
+    });
+    // does not work automated but does when manually tested
+    if (!browser.capabilities?.['bstack:options']?.deviceName?.includes('iPhone')) {
+      it('should grow the textarea to 50% of parent', async () => {
+        const composerTextArea = await ComposerCO.getTextareaInput();
+        await composerTextArea.click();
+        for (let i = 0; i < 8; i++) await composerTextArea.addValue(ComposerCO.LONG_STRING);
+        const checkSnapshot = await browser.checkSnapshot(ComposerCO.snapshotPath('composer-mobile'));
+        await expect(checkSnapshot).toEqual(0);
+      });
+    }
+  });
+  if (browser.capabilities?.['bstack:options']?.deviceName?.includes('iPhone')) {
+    describe('PUI-7133 - Chat, Reponsive Behavior - Visual Tests', () => {
+      before('loading page', async () => {
+        const errorOnGo = await ComposerCO.responsiveContainerUCURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display the chat container + composer with the desktop styling but on mobile', async () => {
+        const checkSnapshot = await browser.checkSnapshot(ComposerCO.snapshotPath('container-default-view'));
+        await expect(checkSnapshot).toEqual(0);
+      });
+    });
+  }
+}
+if (!browser.capabilities?.['ice:options']?.isPhone && !browser.capabilities?.['ice:options']?.isTablet) {
+  describe('PUI-7001 - Chat, Composer, Character limit - Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ComposerCO.characterCountURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should the char limit message with no error', async () => {
+      await (await ComposerCO.getTextareaInput()).click();
+      await type(ComposerCO.LONG_STRING);
+      const snapshot = await browser.checkSnapshot(ComposerCO.snapshotPath('composer-char-limit-no-error'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should the char limit message with error', async () => {
+      await (await ComposerCO.getTextareaInput()).click();
+      await type(ComposerCO.LONG_STRING);
+      await type(ComposerCO.LONG_STRING);
+      await type(ComposerCO.LONG_STRING);
+      const snapshot = await browser.checkSnapshot(ComposerCO.snapshotPath('composer-char-limit-error'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,77 @@
+import { Key } from 'webdriverio';
+import { ChatCO, BubbleCO, ComposerCO } from './components';
+import DSChatCO from './DSChatCO';
+import { getElementByDataTestId } from './helpers';
+import { type } from '../helpers';
+
+if (!browser.capabilities?.['ice:options']?.isPhone) {
+  describe('PUI-6698 - Chat, Container, Thread container bubble scroll', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ChatCO.containerURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the 50th bubble properly', async () => {
+      await ChatCO.clickScrollButton();
+      const isVisible = await BubbleCO.isVisible(50);
+      await expect(isVisible).toBe(true);
+    });
+  });
+}
+
+if (!browser.capabilities?.['ice:options']?.isPhone && !browser.capabilities?.['ice:options']?.isTablet) {
+  // unskip until we have a proper interaction of the focus of the bubbles from UX.
+  describe.skip('PUI-6706 - Chat, Container, A11y, Up/down arrow scrolling', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ComposerCO.composerURL.go();
+      if (errorOnGo) throw errorOnGo;
+      // add data to thread container
+      // eslint-disable-next-line no-await-in-loop, no-plusplus
+      for (let i = 0; i < 5; i++) await (await ChatCO.getAddItemButton()).click();
+    });
+    it('should focus the chat thread container', async () => {
+      await browser.keys(Key.Tab);
+      const threadContainer = await ChatCO.getThreadContainer();
+      await expect(threadContainer).toBeFocused();
+    });
+    it('should execute the scrolling on the container using the up arrow', async () => {
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.ArrowUp);
+      await browser.keys(Key.ArrowUp);
+      const isVisible = await BubbleCO.isVisible(4);
+      await expect(isVisible).toBeFalsy();
+    });
+    it('should execute the scrolling on the container using the down arrow', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      const isVisible = await BubbleCO.isVisible(4);
+      await expect(isVisible).toBeTruthy();
+    });
+  });
+
+  describe('PUI-7241 - Chat, Container, Element Focus', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ComposerCO.containerFocusCasesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus the composer', async () => {
+      await (await getElementByDataTestId('focus-composer-button')).click();
+      const textAreaInput = await ComposerCO.getTextareaInput();
+      await expect(textAreaInput).toBeFocused();
+    });
+    it('focus should be on the send button', async () => {
+      await (await ComposerCO.getTextareaInput()).click();
+      await type('This is a test');
+      await (await getElementByDataTestId('focus-send-button')).click();
+      const sendBt = await ComposerCO.getSendButton();
+      await expect(sendBt).toBeFocused();
+    });
+    it('should focus the 950 bubble', async () => {
+      await (await getElementByDataTestId('focus-950-button')).click();
+      const listItem = await DSChatCO.getElementListItemByDataIndex('949');
+      await expect(listItem).toBeFocused();
+    });
+  });
+}

package/ds-chat/DSChat-floating-button.visual.spec.js

@@ -0,0 +1,40 @@
+import { Key } from 'webdriverio';
+import { FloatingButtonCO } from './components';
+import { mouseOver, keyboardActions, tickActions, performKeyboardAction } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6669 - Chat, Floating Button, States - Visual Tests', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await FloatingButtonCO.floatingButtonURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the floating button in default state', async () => {
+      const snapshot = await browser.checkSnapshot(FloatingButtonCO.snapshotPath('floating-button-default-state'));
+      await expect(snapshot).toEqual(0);
+    });
+    if (!browser.capabilities['ice:options'].isTablet) {
+      it('should display the floating button in hover state', async () => {
+        const floatingBtn = await FloatingButtonCO.getFloatingButton();
+        await mouseOver(floatingBtn, 10, 20);
+        const snapshot = await browser.checkSnapshot(FloatingButtonCO.snapshotPath('floating-button-hover-state'));
+        await expect(snapshot).toEqual(0);
+      });
+      it('should display the floating button in focus state', async () => {
+        await browser.keys(Key.Tab);
+        const snapshot = await browser.checkSnapshot(FloatingButtonCO.snapshotPath('floating-button-focus-state'));
+        await expect(snapshot).toEqual(0);
+      });
+      // Remove the firefox skip after PUI-6678 is fixed
+      if (browser.capabilities.browserName !== 'Firefox') {
+        it('should display the floating button in active state w/ space', async () => {
+          await browser.keys(Key.Tab);
+          await performKeyboardAction(keyboardActions.SPACE, tickActions.KEYDOWN);
+          const snapshot = await browser.checkSnapshot(
+            FloatingButtonCO.snapshotPath('floating-button-active-state-space'),
+          );
+          await expect(snapshot).toEqual(0);
+        });
+      }
+    }
+  });
+}

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

@@ -0,0 +1,33 @@
+import { Key } from 'webdriverio';
+import { HeaderCO } from './components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6688 - Chat, Header, Keyboard Navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await HeaderCO.headerURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus the button on the chat header', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const headerButton = await HeaderCO.getHeaderButton(2);
+      await expect(headerButton).toBeFocused();
+    });
+    it('should open the dropdown menu on enter', async () => {
+      await browser.keys(Key.Enter);
+      const dropDownMenu = await HeaderCO.getHeaderDropdownMenu();
+      await expect(dropDownMenu).toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-8293 - Chat, Header, ARIA for header', () => {
+    before('loading page', async () => {
+      const errorOnGo = await HeaderCO.headerURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus the button on the chat header', async () => {
+      const header = await HeaderCO.getHeaderWithAria();
+      await expect(header).toBeDisplayed();
+    });
+  });
+}

package/ds-chat/DSChat-header.visual.spec.js

@@ -0,0 +1,34 @@
+import { HeaderCO } from './components';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6687 - Chat, Header, Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await HeaderCO.headerURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the chat header properly', async () => {
+      const firstHeader = await HeaderCO.getHeaderTitleByIndex(0);
+      await firstHeader.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(HeaderCO.snapshotPath('chat-header'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the header dropdown menu properly', async () => {
+      const headerBtn = await HeaderCO.getHeaderButton(2);
+      await headerBtn.click();
+      const snapshot = await browser.checkSnapshot(HeaderCO.snapshotPath('chat-header-ddmenu-open'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6858 - Chat, Header, Conditionally rendering children', () => {
+    before('loading page', async () => {
+      const errorOnGo = await HeaderCO.withConditionalRenderingUCURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the conditionally rendered buttons properly', async () => {
+      const firstHeader = await HeaderCO.getHeaderTitleByIndex(0);
+      await firstHeader.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(HeaderCO.snapshotPath('chat-header-conditional-render-buttons'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,54 @@
+import { Key } from 'webdriverio';
+import { BubbleCO, ComposerCO, FloatingButtonCO } from './components';
+import DSChatCO from './DSChatCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-7695 - Chat, Load More, - Func. Tests', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSChatCO.loadMoreURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should scroll to the Load More Btn', async () => {
+      const loadMoreBtn = await DSChatCO.getLoadMoreBtn();
+      await loadMoreBtn.scrollIntoView();
+      await expect(loadMoreBtn).toBeDisplayedInViewport();
+    });
+    it('should display more messages when clicking the load more btn', async () => {
+      const loadMoreBtn = await DSChatCO.getLoadMoreBtn();
+      const bubble0 = BubbleCO.getBody(0);
+      await loadMoreBtn.click();
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(2000);
+      const howManyMsgs = (await DSChatCO.getBubbleContainers()).length;
+      await expect(howManyMsgs).toEqual(20);
+      await expect(bubble0).toBeDisplayedInViewport();
+    });
+  });
+}
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8005 - Chat, Correct shift+tab behavior, - Func. Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChatCO.floatingExampleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should scroll to the Load More Btn', async () => {
+      const floatBtn = await FloatingButtonCO.getFloatingButton();
+      await floatBtn.click();
+      const loadMoreBtn = await DSChatCO.getLoadMoreBtn();
+      await loadMoreBtn.scrollIntoView();
+      await expect(loadMoreBtn).toBeDisplayedInViewport();
+    });
+    it('should click the text input and focus it', async () => {
+      const textAreaInput = await ComposerCO.getTextareaInput();
+      await textAreaInput.click();
+      await expect(textAreaInput).toBeFocused();
+    });
+    it('should shift+tab x3 and focus the thread container', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      const threadContainer = await DSChatCO.getThreadContainer();
+      await expect(threadContainer).toBeFocused();
+    });
+  });
+}

package/ds-chat/DSChat-loadmore.visual.spec.js

@@ -0,0 +1,27 @@
+import DSChatCO from './DSChatCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-7746 - Chat, Load More, - Func. Tests', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSChatCO.loadMoreURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display a chat with loadMore', async () => {
+      await browser.eyesOpen();
+      const loadMoreBtn = await DSChatCO.getLoadMoreBtn();
+      await loadMoreBtn.scrollIntoView();
+      const snapshot = await browser.eyesCheckSnapshot(DSChatCO.snapshotPath('chat-loadmore-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display a chat with loadMore and new loaded messages', async () => {
+      await browser.eyesOpen();
+      const loadMoreBtn = await DSChatCO.getLoadMoreBtn();
+      await loadMoreBtn.click();
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(2000);
+      await loadMoreBtn.scrollIntoView();
+      const snapshot = await browser.eyesCheckSnapshot(DSChatCO.snapshotPath('chat-loadmore-after'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,32 @@
+import { Key } from 'webdriverio';
+import { TileCO } from './components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6684 - Chat, Tile, Keyboard Navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await TileCO.sidebarURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should trigger the selection of the tab after pressing enter', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const selectedTile = await TileCO.getSideBarSelectedTile();
+      await expect(selectedTile).toBe('1');
+    });
+    it('should trigger the selection of the tab after pressing space', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const selectedTile = await TileCO.getSideBarSelectedTile();
+      await expect(selectedTile).toBe('2');
+    });
+    it('should focus the previus tile after pressing shift+tab', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Enter);
+      const chatTile = await TileCO.getChatTile(2);
+      await expect(chatTile).toBeFocused();
+    });
+  });
+}

package/ds-chat/DSChat-tile.visual.spec.js

@@ -0,0 +1,43 @@
+import { Key } from 'webdriverio';
+import { TileCO } from './components';
+import { mouseOver, keyboardActions, tickActions, performKeyboardAction } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6674 - Chat, Tile, Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await TileCO.tilesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the chat tiles properly', async () => {
+      const firstTile = await TileCO.getChatTile(0);
+      await firstTile.waitForDisplayed();
+      const checkSnapshot = await browser.checkSnapshot(TileCO.snapshotPath('chat-tiles'));
+      await expect(checkSnapshot).toEqual(0);
+    });
+  });
+  // Remove the firefox skip after PUI-6678 is fixed
+  if (browser.capabilities.browserName !== 'Firefox' && !browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-6675 - Chat, Tile, States - Visual Tests', () => {
+      before('loading page', async () => {
+        const errorOnGo = await TileCO.tilesURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display the second tab in hover state', async () => {
+        await mouseOver(await TileCO.getChatTile(1));
+        const checkSnapshot = await browser.checkSnapshot(TileCO.snapshotPath('chat-tiles-hover'));
+        await expect(checkSnapshot).toEqual(0);
+      });
+      it('should focus the first tile', async () => {
+        await browser.keys(Key.Tab);
+        const checkSnapshot = await browser.checkSnapshot(TileCO.snapshotPath('chat-tiles-focus'));
+        await expect(checkSnapshot).toEqual(0);
+      });
+      it('should display the first tile in active state', async () => {
+        await performKeyboardAction(keyboardActions.SPACE, tickActions.KEYDOWN);
+        const checkSnapshot = await browser.checkSnapshot(TileCO.snapshotPath('chat-tiles-active'));
+        await expect(checkSnapshot).toEqual(0);
+        await performKeyboardAction(keyboardActions.SPACE, tickActions.KEYUP);
+      });
+    });
+  }
+}

package/ds-chat/DSChat-tooltip.visual.spec.js

@@ -0,0 +1,33 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import { TileCO } from './components';
+import DSChatCO from './DSChatCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7375 - Chat, Tooltip, Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSChatCO.tooltipPosition.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the tooltip on focus', async () => {
+      await browser.eyesOpen();
+      const toolbarBtn = await DSChatCO.getToogleBtn();
+      await toolbarBtn.click();
+      await browser.pause(500);
+      await browser.keys(Key.Tab);
+      await (await TileCO.getTileTooltip('header')).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(TileCO.snapshotPath('chat-tile-tooltip-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the tooltip on hover', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Escape);
+      const tile = await TileCO.getChatTileButtonItem(2);
+      await mouseOver(tile);
+      await (await TileCO.getTileTooltip(2)).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(TileCO.snapshotPath('chat-tile-tooltip-hover'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,181 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { ChatCO, ComposerCO, HeaderCO, StoryBtnsCO, BubbleCO, TileCO } from './components';
+import { type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9250 - Chat, Keyboard Navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ChatCO.floatingExampleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open the floating chat', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const threadContainer = await ChatCO.getThreadContainer();
+      await expect(threadContainer).toBeDisplayedInViewport();
+    });
+    it('should focus the chat thread header icon', async () => {
+      const headerButton = await HeaderCO.getHeaderButton(0);
+      await expect(headerButton).toBeFocused();
+    });
+    it('should focus the chat thread container', async () => {
+      await browser.keys(Key.Tab);
+      const threadContainer = await ChatCO.getThreadContainer();
+      await expect(threadContainer).toBeFocused();
+    });
+    it('should focus the chat text area', async () => {
+      await browser.keys(Key.Tab);
+      const textAreaInput = await ComposerCO.getTextareaInput();
+      await expect(textAreaInput).toBeFocused();
+    });
+  });
+  describe(' PUI-7761 - Chat, Bubble Visibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ChatCO.focusCasesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show bubble 949 after clicking focus btn', async () => {
+      const focusBtn = await StoryBtnsCO.getFocusOn950Btn();
+      await focusBtn.click();
+      const bubble949 = await BubbleCO.getBody(949);
+      await expect(bubble949).toBeDisplayedInViewport();
+    });
+    it('should have bubble 950 in viewport and not 952', async () => {
+      const bubble950 = await BubbleCO.isVisible(950); // flaky test on bro
+      const bubble952 = await BubbleCO.isVisible(952); // bubble 951 is sometimes partially visible
+      await expect(bubble950).toEqual(true);
+      await expect(bubble952).toEqual(false);
+    });
+  });
+
+  describe(' PUI-8492 - Chat, Focus cases', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ChatCO.focusCasesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus bubble 949 after clicking focus btn', async () => {
+      const focusBtn = await StoryBtnsCO.getFocusOn950Btn();
+      await focusBtn.click();
+      const bubble949 = await BubbleCO.getBubbleFocuseable('949');
+      await expect(bubble949).toBeFocused();
+    });
+    it('should focus composer after clicking focus btn', async () => {
+      const focusBtn = await StoryBtnsCO.getFocusOnComposer();
+      await focusBtn.click();
+      const composer = await ComposerCO.getTextareaInput();
+      await expect(composer).toBeFocused();
+    });
+    it('should ensable send button and focus it after typing and clicking focus btn', async () => {
+      await type('Hello there');
+      const focusBtn = await StoryBtnsCO.getFocusOnSendBtn();
+      await focusBtn.click();
+      const sendButton = await ComposerCO.getSendButton();
+      await expect(sendButton).toBeFocused();
+    });
+  });
+
+  describe('PUI-8493 - Chat, Focus banner, Func. Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ChatCO.focuseableBanners.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus the top banner', async () => {
+      const triggerChat = await ChatCO.getSidebarFooterButton();
+      await triggerChat.click();
+      const openBannerTop = await ChatCO.getToggleBtnByIndex(0);
+      await openBannerTop.click();
+      const topBanner = await ChatCO.getBanner();
+      const bannerType = await topBanner.getAttribute('type');
+      await expect(bannerType).toEqual('danger');
+      await expect(topBanner).toBeFocused();
+    });
+    it('should focus the bottom banner', async () => {
+      const openBannerTop = await ChatCO.getToggleBtnByIndex(1);
+      await openBannerTop.click();
+      const bottomBanner = await ChatCO.getBanner();
+      const bannerType = await bottomBanner.getAttribute('type');
+      await expect(bannerType).toEqual('warning');
+      await expect(bottomBanner).toBeFocused();
+    });
+  });
+
+  describe('PUI-8524 - Chat, Full tabstop cycle, Func. Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ChatCO.sidePanelIntegrationURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus the header item after pressing tab', async () => {
+      const chatTrigger = await ChatCO.getToogleBtn();
+      await chatTrigger.click();
+      await browser.keys(Key.Tab);
+      const headerItem = await ChatCO.getHeaderItem();
+      await expect(headerItem).toBeFocused();
+    });
+    it('should focus a chat tile after pressing tab', async () => {
+      await browser.keys(Key.Tab);
+      const firstChatTile = await TileCO.getChatTileButtonItem('1');
+      await expect(firstChatTile).toBeFocused();
+    });
+    it('should focus the last chat tile after pressing tab multiple times', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const lastChatTile = await TileCO.getChatTileButtonItem('5');
+      await expect(lastChatTile).toBeFocused();
+    });
+    it('should focus the expand/collapse sidebar btn after pressing tab', async () => {
+      await browser.keys(Key.Tab);
+      const sidebarBtn = await ChatCO.getSidebarFooterButton();
+      await expect(sidebarBtn).toBeFocused();
+    });
+    it('should focus the first header btn  after pressing tab', async () => {
+      await browser.keys(Key.Tab);
+      const headerBtn1 = await ChatCO.getButtonByIndex(0);
+      await expect(headerBtn1).toBeFocused();
+    });
+    it('should focus the second header btn after pressing tab', async () => {
+      await browser.keys(Key.Tab);
+      const headerBtn2 = await ChatCO.getButtonByIndex(1);
+      await expect(headerBtn2).toBeFocused();
+    });
+    it('should focus the thread container after pressing tab', async () => {
+      await browser.keys(Key.Tab);
+      const threadContainer = await ChatCO.getThreadContainer(0);
+      await expect(threadContainer).toBeFocused();
+    });
+    it('should focus the composer after pressing tab', async () => {
+      await browser.keys(Key.Tab);
+      const composer = await ComposerCO.getTextareaInput();
+      await expect(composer).toBeFocused();
+    });
+  });
+  describe('PUI-9332 - Chat, Clean composer switching chats, Func. Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ChatCO.sidePanelIntegrationURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open a chat and write on composer', async () => {
+      const chatTile = await TileCO.getChatTileButtonItem(2);
+      await chatTile.click();
+      const composer = await ComposerCO.getTextareaInput();
+      await composer.click();
+      await type('Hello');
+      const composerText = await composer.getText();
+      await expect(composerText).toEqual('Hello');
+    });
+    it('should switch chats and composer should be empty', async () => {
+      const chatTile = await TileCO.getChatTileButtonItem(3);
+      await chatTile.click();
+      const composerText = await (await ComposerCO.getTextareaInput()).getText();
+      await expect(composerText).toEqual('');
+    });
+    it('should return to first chat and composer should be empty', async () => {
+      const chatTile = await TileCO.getChatTileButtonItem(2);
+      await chatTile.click();
+      const composerText = await (await ComposerCO.getTextareaInput()).getText();
+      await expect(composerText).toEqual('');
+    });
+  });
+}

package/ds-chat/DSChat.mobile.visual.spec.js

@@ -0,0 +1,16 @@
+import { ChatCO } from './components';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-8294 - Chat:: Mobile - Banner - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ChatCO.unreadMessagesBanner.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the banner correctly', async () => {
+      const toggleBanner = await ChatCO.getToogleBtn();
+      await toggleBanner.click();
+      const snapshot = await browser.checkSnapshot(ChatCO.snapshotPath('chat-mobile-banner'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}