dimsum-e2e-tests 1.0.0-rc.1

package/ds-mobile/PageFilter/PageFilter.visual.spec.js

@@ -0,0 +1,46 @@
+import PageFilterCO from './PageFilterCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4408 - MobilePageFilter:: visual test', () => {
+    describe('MobilePageFilter, with left button', () => {
+      before('loading page', async () => {
+        const errorOnGo = await PageFilterCO.leftButtonURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display page filter with left button', async () => {
+        const snapshot = await browser.checkSnapshot(PageFilterCO.snapshotPath('left-button'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobilePageFilter, with right button', () => {
+      before('loading page', async () => {
+        const errorOnGo = await PageFilterCO.rightButtonURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display page filter with right button', async () => {
+        const snapshot = await browser.checkSnapshot(PageFilterCO.snapshotPath('right-button'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobilePageFilter, with footer', () => {
+      before('loading page', async () => {
+        const errorOnGo = await PageFilterCO.withFooterURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display page filter with footer', async () => {
+        const snapshot = await browser.checkSnapshot(PageFilterCO.snapshotPath('with-footer'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobilePageFilter, with breadcrumb', () => {
+      before('loading page', async () => {
+        const errorOnGo = await PageFilterCO.breadcrumbURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display page filter with breadcrumb', async () => {
+        const snapshot = await browser.checkSnapshot(PageFilterCO.snapshotPath('with breadcrum'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}

package/ds-mobile/PageFilter/PageFilterCO.js

@@ -0,0 +1,19 @@
+import { PATH_MOBILE_PAGE_FILTER } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class PageFilter extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_PAGE_FILTER, 'basic');
+
+  static leftButtonURL = new Urlbuilder(PATH_MOBILE_PAGE_FILTER, 'with-left-button');
+
+  static rightButtonURL = new Urlbuilder(PATH_MOBILE_PAGE_FILTER, 'with-right-button');
+
+  static withFooterURL = new Urlbuilder(PATH_MOBILE_PAGE_FILTER, 'with-footer');
+
+  static breadcrumbURL = new Urlbuilder(PATH_MOBILE_PAGE_FILTER, 'breadcrumb');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('PageFilter', example, 'ds-mobile');
+  }
+}

package/ds-mobile/PageForm/PageForm.visual.spec.js

@@ -0,0 +1,14 @@
+import PageFormCO from './PageFormCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3087 - PageForm - visual test portrait', () => {
+    before('loading page', async () => {
+      const errorOnGo = await PageFormCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('check visual portrait', async () => {
+      const snapshot = await browser.checkSnapshot(PageFormCO.snapshotPath());
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/PageForm/PageFormCO.js

@@ -0,0 +1,11 @@
+import { PATH_MOBILE_PAGE_FORM } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class PageForm extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_PAGE_FORM, 'basic');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('PageForm', example, 'ds-mobile');
+  }
+}

package/ds-mobile/PageList/PageList.visual.spec.js

@@ -0,0 +1,31 @@
+/* eslint-disable wdio/no-pause */
+import PageListCO from './PageListCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4512 - PageList - truncation rules on PageHeader', () => {
+    before('loading page', async () => {
+      const errorOnGo = await PageListCO.pageList.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display title correctly', async () => {
+      await browser.eyesOpen();
+      await (await PageListCO.getTitle()).waitForDisplayed();
+      await (await PageListCO.getTitle()).click();
+      await browser.pause(300);
+      const snapshot = await browser.eyesCheckSnapshot(PageListCO.snapshotPath('truncation-page-list'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9149 - PageList - without filterbar -visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await PageListCO.withoutFilterbar.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display page list without filterbar', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(PageListCO.snapshotPath('mobile-pagelist-nofilterbar'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/PageList/PageListCO.js

@@ -0,0 +1,19 @@
+import { PATH_MOBILE_PAGE_LIST, PATH_E2E_MOBILE_PAGELIST } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class PageList extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_PAGE_LIST, 'basic');
+
+  static withoutFilterbar = new Urlbuilder(PATH_E2E_MOBILE_PAGELIST, 'without-filterbar');
+
+  static pageList = new Urlbuilder(PATH_MOBILE_PAGE_LIST, 'page-list-example');
+
+  static async getTitle() {
+    return $('span*=pageTitle');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('PageList', example, 'ds-mobile');
+  }
+}

package/ds-mobile/PageSummary/PageSummary.visual.spec.js

@@ -0,0 +1,20 @@
+import PageSummaryCO from './PageSummaryCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3115 - PageSummary', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await PageSummaryCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('check visual portrait', async () => {
+      const snapshot = await browser.checkSnapshot(PageSummaryCO.snapshotPath('portrait'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('check visual landscape', async () => {
+      await browser.setOrientation('LANDSCAPE');
+      const snapshot = await browser.checkSnapshot(PageSummaryCO.snapshotPath('landscape'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/PageSummary/PageSummaryCO.js

@@ -0,0 +1,11 @@
+import { PATH_MOBILE_PAGE_SUMMARY } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class PageSummary extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_PAGE_SUMMARY, 'basic');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('PageSummary', example, 'ds-mobile');
+  }
+}

package/ds-mobile/SwipeToRefresh/SwipeToRefresh.func.spec.js

@@ -0,0 +1,26 @@
+import SwipeToRefresh from './SwipeToRefreshCO';
+import Gestures from '../../gestures';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4329 - SwipeToRefresh - display loader', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await SwipeToRefresh.withMobileCards.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display loader when swipe down', async () => {
+      await (await SwipeToRefresh.getCardTitle(0)).waitForDisplayed();
+      await Gestures.swipeDown();
+      const loaderBox = await SwipeToRefresh.getLoaderBox();
+      await expect(loaderBox).toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-4439 - SwipeToRefresh - refresh only on the top', () => {
+    it('should not display loader when is not on the top', async () => {
+      await (await SwipeToRefresh.getCardTitle(0)).waitForDisplayed();
+      await (await SwipeToRefresh.getCardTitle(15)).scrollIntoView();
+      await Gestures.swipeDown();
+      const loaderBox = await SwipeToRefresh.getLoaderBox();
+      await expect(loaderBox).not.toBeDisplayedInViewport();
+    });
+  });
+}

package/ds-mobile/SwipeToRefresh/SwipeToRefreshCO.js

@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-unresolved
+import { PATH_MOBILE_SWIPE_TO_REFRESH } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class SwipeToRefresh extends PageObject {
+  static withMobileCards = new Urlbuilder(PATH_MOBILE_SWIPE_TO_REFRESH, 'with-mobile-cards');
+
+  static async getCardTitle(index) {
+    return $$('[data-testid="card-title"]')[index];
+  }
+
+  static async getLoaderBox() {
+    return $('[data-testid="loader-box"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('SwipeToRefresh', example, 'ds-mobile');
+  }
+}

package/ds-mobile/Tabs/MobileTabs.visual.spec.js

@@ -0,0 +1,91 @@
+import TabsCO from './TabsCO';
+import Gestures, { REL_SWIPE_DIRECTION } from '../../gestures';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3080 - Mobile Tabs - visual tests', () => {
+    describe('Mobile Tabs, tab1 active', () => {
+      before('loading page', async () => {
+        const errorOnGo = await TabsCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('check simple render', async () => {
+        const tab = await TabsCO.getTab1();
+        await expect(tab).toBeDisplayed();
+        const snapshot = await browser.checkSnapshot(TabsCO.snapshotPath('active-tab1'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Tabs, tab2 active', () => {
+      before('loading page', async () => {
+        const errorOnGo = await TabsCO.secondTabURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('move to second tab', async () => {
+        const tab = await TabsCO.getTab2();
+        await expect(tab).toBeDisplayed();
+        const snapshot = await browser.checkSnapshot(TabsCO.snapshotPath('active-tab2'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Tabs, move to first tab', () => {
+      before('loading page', async () => {
+        const errorOnGo = await TabsCO.secondTabURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('move to first tab', async () => {
+        const tab2 = await TabsCO.getTab2();
+        await expect(tab2).toBeDisplayed();
+        await (await TabsCO.getTab1()).click();
+        const tab1 = await TabsCO.getTab1();
+        await expect(tab1).toBeDisplayed();
+        const snapshot = await browser.checkSnapshot(TabsCO.snapshotPath('move-to-again-first-tab'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+
+    describe('PUI-5703 - Mobile Tabs, flexible', () => {
+      before('loading page', async () => {
+        const errorOnGo = await TabsCO.mobileFlexible.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display gradient', async () => {
+        const tab = await TabsCO.getTab2();
+        await expect(tab).toBeDisplayed();
+        await (await TabsCO.getTab1()).waitForDisplayed({ timeout: 5000 });
+        const snapshot = await browser.checkSnapshot(TabsCO.snapshotPath('mobile-flexible'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('PUI-8351 - Mobile Tabs, flexible', () => {
+      before('loading page', async () => {
+        const errorOnGo = await TabsCO.mobileFixed.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display fixed tabs with equal width populating the full viewport width', async () => {
+        const snapshot = await browser.checkSnapshot(TabsCO.snapshotPath('mobile-fixed'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}
+
+if (driver.isAndroid) {
+  describe('PUI-5948 - MobileTabs - Right margin at the end of the tabs - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await TabsCO.mobileFlexible.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the right margin when reaching the end', async () => {
+      const tabList = await TabsCO.getTabList();
+      const targetTab = await TabsCO.getTab(6);
+      await Gestures.swipeUntilDisplayed({
+        swipeElement: tabList,
+        targetElement: targetTab,
+        swipeDirection: REL_SWIPE_DIRECTION.left,
+        extraSwipes: 2,
+      });
+      const snapshot = await browser.checkSnapshot(TabsCO.snapshotPath('mobile-flexible-right-margin'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/Tabs/TabsCO.js

@@ -0,0 +1,37 @@
+import { PATH_MOBILE_TABS } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class Tabs extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_TABS, 'basic');
+
+  static secondTabURL = new Urlbuilder(PATH_MOBILE_TABS, 'second-tab-active');
+
+  static mobileFlexible = new Urlbuilder(PATH_MOBILE_TABS, 'flexible-tabs');
+
+  static mobileFixed = new Urlbuilder(PATH_MOBILE_TABS, 'fixed-tabs');
+
+  static async getTab1() {
+    return $('#tab1-label');
+  }
+
+  static async getTab2() {
+    return $('#tab2-label');
+  }
+
+  static async getTab(tab = 0) {
+    return $(`#tab${tab}-label`);
+  }
+
+  static async getTabList() {
+    return $('[data-testid="tab-list"]');
+  }
+
+  static async tabTextContent(text) {
+    return $(`span*=${text}`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Tabs', example, 'ds-mobile');
+  }
+}

package/ds-mobile/Tooltip/MobileTooltip.func.spec.js

@@ -0,0 +1,17 @@
+import TooltipCO from './TooltipCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6084 - MobileTooltip, Tap to close', () => {
+    before('loading page', async () => {
+      const errorOnGo = await TooltipCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should close the tooltip', async () => {
+      await (await TooltipCO.getLeftIconButton()).click();
+      const portal = await TooltipCO.getPortal();
+      await portal.waitForDisplayed({ timeout: 2000 });
+      await (await TooltipCO.getRightIconButton()).click();
+      await expect(portal).toBeDisplayed();
+    });
+  });
+}

package/ds-mobile/Tooltip/MobileTooltip.visual.spec.js

@@ -0,0 +1,16 @@
+import TooltipCO from './TooltipCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-6083 - MobileTooltip, Tooltip - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await TooltipCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip', async () => {
+      await (await TooltipCO.getLeftIconButton()).click();
+      await (await TooltipCO.getPortal()).waitForDisplayed({ timeout: 2000 });
+      const snapshot = await browser.checkSnapshot(TooltipCO.snapshotPath('tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/Tooltip/TooltipCO.js

@@ -0,0 +1,23 @@
+import { PATH_MOBILE_TOOLTIP } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class TooltipCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_TOOLTIP, 'basic');
+
+  static async getPortal() {
+    return $('[data-testid="portal"]');
+  }
+
+  static async getLeftIconButton() {
+    return $('[data-testid="left-icon-button"]');
+  }
+
+  static async getRightIconButton() {
+    return $('[data-testid="right-icon-button"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileTooltip', example, 'ds-mobile');
+  }
+}

package/ds-mobile/helpers.js

@@ -0,0 +1,7 @@
+export * from '../helpers';
+export const DEVICE = {
+  IPHONE_5: 'iPhone 5',
+  IPHONE_6: 'iPhone 6',
+  IPHONE_8: 'iPhone 8',
+  IPHONE_X: 'iPhone X',
+};

package/ds-modal/Modal.func.spec.js

@@ -0,0 +1,35 @@
+import ModalCO from './ModalCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('Modal', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ModalCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('width less than or equal 1600px for xxl variant', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getSelectionTypeRadio()).click();
+      await (await ModalCO.getXXLSizeTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getXXLSizeTypeRadio()).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      const isModalSized = (await (await ModalCO.getModal()).getSize()).width <= 1600;
+      await expect(isModalSized).toBe(true);
+    });
+  });
+}
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5888 - Modal - Minimum width', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ModalCO.informationURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the information modal with a minimum width of 300px', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      const informationModal = await ModalCO.getInformationModal();
+      await informationModal.waitForDisplayed();
+      const modalWidth = (await informationModal.getSize()).width;
+      await expect(modalWidth).toBeGreaterThanOrEqual(300);
+    });
+  });
+}

package/ds-modal/Modal.visual.spec.js

@@ -0,0 +1,84 @@
+import ModalCO from './ModalCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-5182 - Modal: visual tests', () => {
+    beforeEach(async () => {
+      const errorOnGo = await ModalCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('information variant', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getSelectionTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('information-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('selection variant', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getSelectionTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getSelectionTypeRadio()).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('selection-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('selection XXL variant - should keep 24px margin', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getSelectionTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getSelectionTypeRadio()).click();
+      await (await ModalCO.getXXLSizeTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getXXLSizeTypeRadio()).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('selection-xxl-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-7036 - Modal: centered prop', () => {
+    beforeEach(async () => {
+      const errorOnGo = await ModalCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a decision modal type - centered', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getLabel('Decision')).click();
+      await (await ModalCO.getLabel('Centered')).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('decision-centered'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a selection modal type - size xx-large - centered', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getLabel('Selection')).click();
+      await (await ModalCO.getLabel('Centered')).click();
+      await (await ModalCO.getLabel('xx-large')).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('selection-xxlarge-centered'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a form modal type - size small - centered', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getLabel('Form')).click();
+      await (await ModalCO.getLabel('Centered')).click();
+      await (await ModalCO.getLabel('small')).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('form-small-centered'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a form modal type - size medium - centered', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getLabel('Form')).click();
+      await (await ModalCO.getLabel('Centered')).click();
+      await (await ModalCO.getLabel('medium')).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('form-medium-centered'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-modal/ModalCO.js

@@ -0,0 +1,43 @@
+import { PATH_END_OF_LIFE_MODAL } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class ModalCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_MODAL, 'basic');
+
+  static informationURL = new Urlbuilder(PATH_END_OF_LIFE_MODAL, 'information');
+
+  static async getModalTriggerBtn() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  static async getSelectionTypeRadio() {
+    // eslint-disable-next-line no-return-await
+    return await $('[data-testid="ds-storybook-modal-selection"]').$('span');
+  }
+
+  static async getXXLSizeTypeRadio() {
+    // eslint-disable-next-line no-return-await
+    return await $('[data-testid="ds-storybook-modal-xxl"]').$('span');
+  }
+
+  static async getModal() {
+    return $('[data-testid="ds-storybook-modal"]');
+  }
+
+  static async wait() {
+    await (await this.getModalTriggerBtn()).waitForDisplayed({ timeout: 5000 });
+  }
+
+  static async getInformationModal() {
+    return $('.em-ds-modal-v2__modal-wrapper');
+  }
+
+  static async getLabel(text) {
+    return $(`span*=${text}`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Modal', example, 'ds-modal');
+  }
+}

package/ds-modal-slide/ModalSlide.func.spec.js

@@ -0,0 +1,69 @@
+import { Key } from 'webdriverio';
+import ModalSlideCO from './ModalSlideCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4707 - ModalSlide:: open/close funcionality', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should be opened correctly', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      const modalSlide = await ModalSlideCO.getModalSlide();
+      await expect(modalSlide).toBeDisplayed();
+    });
+    it('slide should be closed correctly [x]', async () => {
+      await (await ModalSlideCO.getHeaderCloserBtn()).waitForClickable();
+      await (await ModalSlideCO.getHeaderCloserBtn()).click();
+      await (await ModalSlideCO.getToggleSlide()).waitForClickable();
+      const modalSlide = await ModalSlideCO.getModalSlide();
+      await expect(modalSlide).not.toBeDisplayed();
+    });
+    it('slide should be re-opened correctly', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForClickable();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      const modalSlide = await ModalSlideCO.getModalSlide();
+      await expect(modalSlide).toBeDisplayed();
+    });
+    it('slide should be closed correctly [Cancel]', async () => {
+      await (await ModalSlideCO.getRejectedBtn()).waitForClickable();
+      await (await ModalSlideCO.getRejectedBtn()).click();
+      await (await ModalSlideCO.getToggleSlide()).waitForClickable();
+      const modalSlide = await ModalSlideCO.getModalSlide();
+      await expect(modalSlide).not.toBeDisplayed();
+    });
+  });
+  describe('PUI-9521 - ModalSlide:: TabStops, focus order -Funcionality', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus close icon when modal slide open, auto focus', async () => {
+      await (await ModalSlideCO.getOpenModal()).waitForDisplayed();
+      await (await ModalSlideCO.getOpenModal()).click();
+      const closeBtn = await ModalSlideCO.getHeaderCloserBtn();
+      await expect(closeBtn).toBeFocused();
+    });
+    it('02: should focus the body content as next tab stop', async () => {
+      await browser.keys(Key.Tab);
+      const rejectBtn = await ModalSlideCO.getBodyContent();
+      await expect(rejectBtn).toBeFocused();
+    });
+    it('03: should focus the cancel button as next tab stop', async () => {
+      await browser.keys(Key.Tab);
+      const rejectBtn = await ModalSlideCO.getRejectedBtn();
+      await expect(rejectBtn).toBeFocused();
+    });
+    it('04: should focus the confirm button as next tab stop', async () => {
+      await browser.keys(Key.Tab);
+      const confirmBtn = await ModalSlideCO.getModalButton();
+      await expect(confirmBtn).toBeFocused();
+    });
+    it('05: should focus the close button again as next tab stop, focus trap', async () => {
+      await browser.keys(Key.Tab);
+      const closeBtn = await ModalSlideCO.getHeaderCloserBtn();
+      await expect(closeBtn).toBeFocused();
+    });
+  });
+}