dimsum-e2e-tests 1.0.0-rc.1

package/ds-mobile/MobileFooter/MobileFooterCO.js

@@ -0,0 +1,27 @@
+import { PATH_MOBILE_FOOTER } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileFooter extends PageObject {
+  static actionsURL = new Urlbuilder(PATH_MOBILE_FOOTER, 'actions');
+
+  static actionsWithLabelURL = new Urlbuilder(PATH_MOBILE_FOOTER, 'actions-with-labels');
+
+  static oneButtonURL = new Urlbuilder(PATH_MOBILE_FOOTER, 'one-button');
+
+  static twoButtonsURL = new Urlbuilder(PATH_MOBILE_FOOTER, 'two-buttons');
+
+  static textAndButtonURL = new Urlbuilder(PATH_MOBILE_FOOTER, 'text-left-and-one-button');
+
+  static async footerAction() {
+    return $('[data-testid="ds-mobile-footer-action"]');
+  }
+
+  static async buttonLabel() {
+    return $('[data-testid="button-label"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'actions') {
+    return PageObject.getSnapshotPathBuilder('MobileFooter', example, 'ds-mobile');
+  }
+}

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

@@ -0,0 +1,56 @@
+import MobileListItemCO from './MobileListItemCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3813 - MobileListItem', () => {
+    describe('Mobile List Item:: Basic', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileListItemCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display basic example', async () => {
+        const snapshot = await browser.checkSnapshot(MobileListItemCO.snapshotPath());
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile List Item:: with left icon', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileListItemCO.iconURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display leftAddon icon', async () => {
+        const snapshot = await browser.checkSnapshot(MobileListItemCO.snapshotPath('icon'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile List Item:: Truncated', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileListItemCO.truncatedURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display leftAddon icon', async () => {
+        const snapshot = await browser.checkSnapshot(MobileListItemCO.snapshotPath('truncated-title'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile List Item:: checkbox', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileListItemCO.checkboxURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display leftAddon checkbox', async () => {
+        const snapshot = await browser.checkSnapshot(MobileListItemCO.snapshotPath('checkbox'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile List Item:: checked', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileListItemCO.checkedURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display leftAddon checked', async () => {
+        const snapshot = await browser.checkSnapshot(MobileListItemCO.snapshotPath('checked'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}

package/ds-mobile/MobileListItem/MobileListItemCO.js

@@ -0,0 +1,19 @@
+import { PATH_MOBILE_LIST_ITEM } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileListItem extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_LIST_ITEM, 'basic');
+
+  static iconURL = new Urlbuilder(PATH_MOBILE_LIST_ITEM, 'icon');
+
+  static checkboxURL = new Urlbuilder(PATH_MOBILE_LIST_ITEM, 'checkbox');
+
+  static checkedURL = new Urlbuilder(PATH_MOBILE_LIST_ITEM, 'checked');
+
+  static truncatedURL = new Urlbuilder(PATH_MOBILE_LIST_ITEM, 'truncated');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileListItem', example, 'ds-mobile');
+  }
+}

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

@@ -0,0 +1,37 @@
+import MobileLoadingPageCO from './MobileLoadingPageCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-10848 - [MobileLoadingPage] - basic - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileLoadingPageCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display MobileLoadingPage correctly', async () => {
+      await (await MobileLoadingPageCO.getLoadingText()).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.checkSnapshot(MobileLoadingPageCO.snapshotPath('mobile-loading-page-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10849 - [MobileLoadingPage] - cover - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileLoadingPageCO.coverURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display MobileLoadingPage correctly with cover prop', async () => {
+      await (await MobileLoadingPageCO.getLoadingText()).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.checkSnapshot(MobileLoadingPageCO.snapshotPath('mobile-loading-page-cover'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10850 - [MobileLoadingPage] - with Icon - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileLoadingPageCO.withIconURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display MobileLoadingPage with icon correctly', async () => {
+      await (await MobileLoadingPageCO.getLoadingText()).waitForDisplayed({ timeout: 10000 });
+      const snapshot = await browser.checkSnapshot(MobileLoadingPageCO.snapshotPath('mobile-loading-page-with-icon'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/MobileLoadingPage/MobileLoadingPageCO.js

@@ -0,0 +1,19 @@
+import { PATH_MOBILE_LOADING_PAGE } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileLoadingPageCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_LOADING_PAGE, 'basic');
+
+  static coverURL = new Urlbuilder(PATH_MOBILE_LOADING_PAGE, 'cover');
+
+  static withIconURL = new Urlbuilder(PATH_MOBILE_LOADING_PAGE, 'with-icon');
+
+  static async getLoadingText() {
+    return $('//div[contains(text(),"Loading...")]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('LoadingPage', example, 'ds-mobile');
+  }
+}

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

@@ -0,0 +1,22 @@
+import MobilePageHeaderCO from './MobilePageHeaderCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4867 - MobilePageHeader - open/close context menu', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobilePageHeaderCO.contextMenuURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('open context menu', async () => {
+      await (await MobilePageHeaderCO.contextMenuTrigger()).waitForDisplayed();
+      await (await MobilePageHeaderCO.contextMenuTrigger()).click();
+      await MobilePageHeaderCO.waitForContextMenu();
+      const contextMenu = await MobilePageHeaderCO.getContextMenu();
+      await expect(contextMenu).toBeDisplayedInViewport();
+    });
+    it('close context menu', async () => {
+      await (await MobilePageHeaderCO.getContextMenuBackdrop()).click();
+      const contextMenu = await MobilePageHeaderCO.getContextMenu();
+      await expect(contextMenu).not.toBeDisplayedInViewport();
+    });
+  });
+}

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

@@ -0,0 +1,135 @@
+/* eslint-disable max-lines */
+import MobilePageHeaderCO from './MobilePageHeaderCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('Mobile Page Header', () => {
+    describe('Mobile Page Header:: with simple text', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobilePageHeaderCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display simple text', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('simple-text'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Page Header:: with context menu', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobilePageHeaderCO.contextMenuOpenedURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display with context menu', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('context-menu'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Page Header:: with context menu opened', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobilePageHeaderCO.contextMenuURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display header with open context menu', async () => {
+        await browser.eyesOpen();
+        const touch = await MobilePageHeaderCO.contextMenuTrigger();
+        await touch.click();
+        await MobilePageHeaderCO.waitForContextMenu();
+        const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('open-context-menu'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Page Header:: with one action', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobilePageHeaderCO.oneActionURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display one action', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('one-action'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Page Header:: with both actions', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobilePageHeaderCO.twoActionsURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display both actions', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('both-actions'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Page Header:: with summary', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobilePageHeaderCO.labelURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display summary', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('summary'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Page Header:: with breadcrumb', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobilePageHeaderCO.breadCrumbURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display breadcrumb', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('breadcrumb'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('Mobile Page Header:: with back-arrow', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobilePageHeaderCO.backArrowURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display back arrow', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('back-arrow'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+  describe('PUI-4301 - MobilePageHeader:: value on subtitle', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobilePageHeaderCO.labelAndValueURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should not display 0 value on subtitle', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('0 value'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-4448 - MobilePageHeader:: Truncation rules', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobilePageHeaderCO.truncatedTitleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Title is correctly displayed in PageHeader', async () => {
+      await browser.eyesOpen();
+      const title = await MobilePageHeaderCO.getTruncatedText();
+      await title.waitForDisplayed();
+      await title.click();
+      const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('truncation-page-header'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8843 - MobilePageHeader:: Line height override', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobilePageHeaderCO.LineHeightOverride.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Title is correctly displayed in PageHeader', async () => {
+      await browser.eyesOpen();
+      await (await MobilePageHeaderCO.getTitle()).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(MobilePageHeaderCO.snapshotPath('line-height-override'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/MobilePageHeader/MobilePageHeaderCO.js

@@ -0,0 +1,67 @@
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_MOBILE_PAGE_HEADER, PATH_E2E_MOBILE_PAGE_HEADER } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export const knobs = {
+  title: 'knob-pageTitle',
+  menu: 'knob-Show context menu',
+  action1: 'knob-Show first action',
+  action2: 'knob-Show second action',
+  back: 'knob-Show back arrow',
+  breadcrumb: 'knob-Breadcrum title',
+  value: 'knob-value',
+  label: 'knob-label',
+};
+
+export default class MobilePageHeader extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'basic');
+
+  static oneActionURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'one-action');
+
+  static twoActionsURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'two-actions');
+
+  static backArrowURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'back-arrow');
+
+  static labelURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'label');
+
+  static labelAndValueURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'label-and-value');
+
+  static contextMenuURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'context-menu');
+
+  static contextMenuOpenedURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'context-menu-opened');
+
+  static breadCrumbURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'breadcrumb');
+
+  static truncatedTitleURL = new Urlbuilder(PATH_MOBILE_PAGE_HEADER, 'truncated-title');
+
+  static LineHeightOverride = new Urlbuilder(PATH_E2E_MOBILE_PAGE_HEADER, 'mobile-page-header-line-height-override');
+
+  static async contextMenuTrigger() {
+    return $('[data-testid="trigger-context-menu"]');
+  }
+
+  static async waitForContextMenu() {
+    await (await this.getContextMenu()).waitForDisplayed({ timeout: 5000 });
+  }
+
+  static async getContextMenuBackdrop() {
+    return $('[data-testid="ds-backdrop"]');
+  }
+
+  static async getTitle() {
+    return $('[data-testid="page-header-title"]');
+  }
+
+  static async getTruncatedText() {
+    return $('[data-testid="ds-truncated-expandable-text"]');
+  }
+
+  static async getContextMenu() {
+    return $('[data-testid="ds-mobile-context-menu"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobilePageHeader', example, 'ds-mobile');
+  }
+}

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

@@ -0,0 +1,56 @@
+import MobileSelectListCO from './MobileSelectListCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('MobileSelectList', () => {
+    describe('MobileSelectList:: basic', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileSelectListCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display basic example', async () => {
+        const snapshot = await browser.checkSnapshot(MobileSelectListCO.snapshotPath());
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileSelectList:: multiple', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileSelectListCO.multipleURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display multiple select list', async () => {
+        const snapshot = await browser.checkSnapshot(MobileSelectListCO.snapshotPath('multiple'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileSelectList:: selected', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileSelectListCO.selectedURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display simple select list', async () => {
+        const snapshot = await browser.checkSnapshot(MobileSelectListCO.snapshotPath('selected'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileSelectList:: with button footer', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileSelectListCO.buttonFooterURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display buttonFooter', async () => {
+        const snapshot = await browser.checkSnapshot(MobileSelectListCO.snapshotPath('button-footer'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileSelectList:: search', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileSelectListCO.searchURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display use search', async () => {
+        const snapshot = await browser.checkSnapshot(MobileSelectListCO.snapshotPath('use-search'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}

package/ds-mobile/MobileSelectList/MobileSelectListCO.js

@@ -0,0 +1,21 @@
+import { PATH_MOBILE_SELECT_LIST } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileSelectList extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_SELECT_LIST, 'basic');
+
+  static searchURL = new Urlbuilder(PATH_MOBILE_SELECT_LIST, 'search');
+
+  static buttonFooterURL = new Urlbuilder(PATH_MOBILE_SELECT_LIST, 'button-footer');
+
+  static multipleURL = new Urlbuilder(PATH_MOBILE_SELECT_LIST, 'multiple');
+
+  static headerOptionURL = new Urlbuilder(PATH_MOBILE_SELECT_LIST, 'header-option');
+
+  static selectedURL = new Urlbuilder(PATH_MOBILE_SELECT_LIST, 'selected');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileSelectList', example, 'ds-mobile');
+  }
+}

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

@@ -0,0 +1,28 @@
+import MobileSeparatorCO from './MobileSeparatorCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('MobileSeparator - visual test', () => {
+    describe('MobileSeparator, basic example', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileSeparatorCO.basicURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display mobile separator', async () => {
+        await (await MobileSeparatorCO.getSection('Top')).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileSeparatorCO.snapshotPath());
+        await expect(snapshot).toEqual(0);
+      });
+    });
+    describe('MobileSeparator, dashed', () => {
+      before('loading page', async () => {
+        const errorOnGo = await MobileSeparatorCO.dashedURL.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should display dashed separator', async () => {
+        await (await MobileSeparatorCO.getSection('Top')).waitForDisplayed();
+        const snapshot = await browser.checkSnapshot(MobileSeparatorCO.snapshotPath('dashed'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  });
+}

package/ds-mobile/MobileSeparator/MobileSeparatorCO.js

@@ -0,0 +1,17 @@
+import { PATH_MOBILE_SEPARATOR } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class MobileSeparator extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_SEPARATOR, 'basic');
+
+  static dashedURL = new Urlbuilder(PATH_MOBILE_SEPARATOR, 'dashed');
+
+  static async getSection(text) {
+    return $(`div*=${text}`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileSeparator', example, 'ds-mobile');
+  }
+}

package/ds-mobile/MobileTimePicker/MobileTimePickerCO.js

@@ -0,0 +1,41 @@
+import { PATH_MOBILE_TIME_PICKER, PATH_E2E_MOBILE_TIME_PICKER } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export class MobileTimePickerCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_TIME_PICKER, 'basic');
+
+  static async wait() {
+    await (await MobileTimePickerCO.getInput()).waitForDisplayed({ timeout: 12000 });
+  }
+
+  static widthDoesntChangeURL = new Urlbuilder(PATH_E2E_MOBILE_TIME_PICKER, 'width-doesnt-change');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_MOBILE_TIME_PICKER, component);
+  }
+
+  static async getInput() {
+    return $('[data-testid="ds-mobile-time-picker"]');
+  }
+
+  static async getButton() {
+    return $('[data-testid="ds-mobile-time-picker"]');
+  }
+
+  static async setPickerValue(value) {
+    await (await MobileTimePickerCO.getInput()).setValue(value);
+  }
+
+  static async clickInput() {
+    return (await this.getInput()).click();
+  }
+
+  static async clickButton() {
+    return (await this.getButton()).click();
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileTimePicker', example, 'ds-mobile');
+  }
+}

package/ds-mobile/Modal/MobileModal.visual.spec.js

@@ -0,0 +1,56 @@
+/* eslint-disable max-len */
+/* eslint-disable wdio/no-pause */
+import MobileModalCO from './MobileModalCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-4517 - MobileModal, basic', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileModalCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display mobile modal', async () => {
+      await browser.eyesOpen();
+      await (await MobileModalCO.getOpenModal()).click();
+      await (await MobileModalCO.getTitle()).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(MobileModalCO.snapshotPath('mobile-modal-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9243 - MobileModal, with long desc', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileModalCO.truncatedURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display modal with long description', async () => {
+      await browser.eyesOpen();
+      await (await MobileModalCO.getOpenModal()).click();
+      await (await MobileModalCO.getTitle()).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(MobileModalCO.snapshotPath('mobile-modal-long-desc'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9244 - MobileModal, custom content', () => {
+    before('loading page', async () => {
+      const errorOnGo = await MobileModalCO.customContent.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display modal with custom content - portrait', async () => {
+      await browser.eyesOpen();
+      await (await MobileModalCO.getOpenModal()).click();
+      await (await MobileModalCO.getCustomTitle()).waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        MobileModalCO.snapshotPath('mobile-modal-custom-content-portrait'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display modal with custom content - landscape', async () => {
+      await browser.eyesOpen();
+      await browser.setOrientation('LANDSCAPE');
+      await browser.pause(1000);
+      const snapshot = await browser.eyesCheckSnapshot(
+        MobileModalCO.snapshotPath('mobile-modal-custom-content-landscape'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-mobile/Modal/MobileModalCO.js

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_MOBILE_MODAL } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class ModalMobile extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_MODAL, 'basic');
+
+  static truncatedURL = new Urlbuilder(PATH_MOBILE_MODAL, 'truncated');
+
+  static customContent = new Urlbuilder(PATH_MOBILE_MODAL, 'custom-content');
+
+  static async getOpenModal() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  static async getTitle() {
+    return $('div*=Title');
+  }
+
+  static async getCustomTitle() {
+    return $('h2*=This is a custom title');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileModal', example, 'ds-mobile');
+  }
+}