dimsum-e2e-tests 3.22.0-next.36

package/ds-tabs/DSTabs.visual.spec.js

@@ -0,0 +1,268 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSTabsCO from './DSTabsCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5600 - Selected reposition', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.carouselFixed.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should reposition and display full tab', async () => {
+      await (await DSTabsCO.getTabsList()).waitForDisplayed();
+      await DSTabsCO.carouselNav();
+      await (await DSTabsCO.getTab(4)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-reposition'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-5784 - Tabs,  Focus state of the tabs - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display first tab selected', async () => {
+      await (await DSTabsCO.getTabsList()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display first tab selected and focused', async () => {
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-selected-and-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display second tab focused [keyboard focus]', async () => {
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display fourth tab focused [Hover]', async () => {
+      const fourthTab = await DSTabsCO.getTab(4);
+      await fourthTab.click({ y: 50 }); // click outside tab
+      await mouseOver(fourthTab);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-hovered'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-3077 - Tabs, type secondary', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.secondaryURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display secondary tabs', async () => {
+      await (await DSTabsCO.getSubTabsList()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-secondary'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6986 - Tabs, required', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.delayedRequired.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a required tab selected', async () => {
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(8000);
+      await (await DSTabsCO.getTab(3)).waitForDisplayed();
+      await (await DSTabsCO.getTab(3)).click();
+      await (await DSTabsCO.getTab(4)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-required'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8064 - Tabs, with extra padding', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.delayedPadding.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tabs with extra padding and no left chevron', async () => {
+      await (await DSTabsCO.getTab(2)).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-extrapad-left'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display tabs with extra padding moved to the right', async () => {
+      await (await DSTabsCO.getTab(2)).waitForDisplayed();
+      await (await DSTabsCO.getTab(2)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-extrapad-moved'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8065 - Tabs, with modal', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.withModalURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a modal tab to the left', async () => {
+      const openDialogBtn = $('[data-testid="ds-button"]');
+      await openDialogBtn.click();
+      await (await DSTabsCO.getTab(4)).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-dialog-left'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a modal tab after picking a tab to the right', async () => {
+      await (await DSTabsCO.getTab(3)).waitForDisplayed();
+      await (await DSTabsCO.getTab(3)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-dialog-moved'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8066 - Tabs, with grid', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.delayedWithGrid.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tabs with a grid both to the left', async () => {
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-grid-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display tabs with a grid moved one tablist to the right', async () => {
+      await (await DSTabsCO.getTab(1)).click();
+      await (await DSTabsCO.getTab(2)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-grid-moved1'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display tabs with a grid moved both tablist to the right', async () => {
+      const chevronRight = $('[data-testid="chevron-right"]');
+      await chevronRight.click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-grid-moved2'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8077 - Tabs, with extra content', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.extraContentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a tab with extra content', async () => {
+      await (await DSTabsCO.getTab(4)).waitForDisplayed();
+      await (await DSTabsCO.getTab(4)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-extracontent'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8068 - Tabs, integrated example carousel', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.integratedCarousel.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a integrated example tab default to the left ', async () => {
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-intrgrated-car-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a integrated example tab to the right one focused', async () => {
+      const rightChevron = await DSTabsCO.getChevronRight();
+      const tab = await DSTabsCO.getTab(11);
+      await rightChevron.click();
+      await tab.click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-intrgrated-car-moved'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8069 - Tabs, nested', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.nestedURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display nested tabs default', async () => {
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-nested-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display nested tabs one focused and selected one hover', async () => {
+      const tab1 = await DSTabsCO.getSubTabsByIndex(0);
+      await tab1.click();
+      const tab3 = await DSTabsCO.getSubTabsByIndex(2);
+      await mouseOver(tab3);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-nested-onefocus-onehover'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display nested tabs one focused and one selected', async () => {
+      await browser.keys(Key.ArrowRight);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-nested-onefocus-oneselected'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8070 - Tabs, basic small', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display small tabs one selected one hovered', async () => {
+      await (await DSTabsCO.getTab(1)).waitForDisplayed();
+      await (await DSTabsCO.getTab(1)).click();
+      await mouseOver(await DSTabsCO.getTab(2));
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-small-onesel-onehov'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display small tabs one selected and focused', async () => {
+      await (await DSTabsCO.getTab(2)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-small-oneselandfoc'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display small tabs one selected one focused', async () => {
+      await browser.keys(Key.ArrowRight);
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-small-onesel-onefoc'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8442 - Popover over tab', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.withMaxWidth.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus and select the tab over which the popover will be displayed', async () => {
+      await (await DSTabsCO.getTab(4)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-fourth-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should open the appicker popover over the selected tab', async () => {
+      await (await DSTabsCO.getHeaderBtnByIndex(0)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-popover-over-tab'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9865 - Custom props', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.tabsCustomProps.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tabs should be displayed correctly with the custom props', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSTabsCO.snapshotPath('tab-custom-props'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11228 - Tabs, should not add height above tabs after multiple tab clicks -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTabsCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should tabs with default margin/padding above', async () => {
+      await (await DSTabsCO.getTab(1)).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-above-pad-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should mantain layout after clicking tabs multiple times', async () => {
+      await (await DSTabsCO.getTab(1)).waitForDisplayed();
+      await (await DSTabsCO.getTab(1)).click();
+      await (await DSTabsCO.getTab(2)).click();
+      await (await DSTabsCO.getTab(2)).click();
+      await (await DSTabsCO.getTab(1)).click();
+      await (await DSTabsCO.getTab(2)).click();
+      const snapshot = await browser.checkSnapshot(DSTabsCO.snapshotPath('tab-above-pad-after'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-tabs/DSTabsCO.js

@@ -0,0 +1,122 @@
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_TABS, PATH_E2E_TABS } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSTextBoxCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_TABS, 'basic');
+
+  static secondaryURL = new Urlbuilder(PATH_TABS, 'secondary');
+
+  static nestedURL = new Urlbuilder(PATH_TABS, 'nested');
+
+  static disabledURL = new Urlbuilder(PATH_TABS, 'disabled');
+
+  static requiredURL = new Urlbuilder(PATH_TABS, 'required');
+
+  static withModalURL = new Urlbuilder(PATH_TABS, 'with-modal');
+
+  static withGridURL = new Urlbuilder(PATH_TABS, 'with-grid');
+
+  static mouseEventsURL = new Urlbuilder(PATH_TABS, 'mouse-events');
+
+  static withExtraPadding = new Urlbuilder(PATH_TABS, 'with-extra-padding');
+
+  static integratedCarousel = new Urlbuilder(PATH_TABS, 'integrated-example-carousel');
+
+  static basicSmallURL = new Urlbuilder(PATH_TABS, 'basic-small');
+
+  static extraContentURL = new Urlbuilder(PATH_TABS, 'extra-content');
+
+  static carouselFixed = new Urlbuilder(PATH_E2E_TABS, 'carousel-fixed-width');
+
+  static carouselResizeURL = new Urlbuilder(PATH_E2E_TABS, 'carousel-resize');
+
+  static numericTabs = new Urlbuilder(PATH_E2E_TABS, 'pui-7814-number-tab');
+
+  static withMaxWidth = new Urlbuilder(PATH_E2E_TABS, 'with-max-width');
+
+  static delayedWithGrid = new Urlbuilder(PATH_E2E_TABS, 'with-grid-test');
+
+  static delayedRequired = new Urlbuilder(PATH_E2E_TABS, 'required-test');
+
+  static delayedPadding = new Urlbuilder(PATH_E2E_TABS, 'with-extra-padding-test');
+
+  static tabsCustomProps = new Urlbuilder(PATH_E2E_TABS, 'tabs-custom-props');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_TABS, component);
+  }
+
+  static async getChevronRight() {
+    return $('[data-testid="tab-list"]').$('[data-testid="chevron-right"]');
+  }
+
+  static async getChevronLeft() {
+    return $('[data-testid="tab-list"]').$('[data-testid="chevron-left"]');
+  }
+
+  static async getTab(tab = 1) {
+    return $('[data-testid="tab-list"]').$(`[data-tab-id="tab${tab}"]`);
+  }
+
+  static async getSubtab(tab = 1) {
+    return $('[data-testid="subtabs-list"]').$(`[data-tab-id="tab${tab}"]`);
+  }
+
+  static async getTabPanel(tab) {
+    return $(`[data-panel-id="tab${tab}"]`);
+  }
+
+  static async getResizeToggleBtn() {
+    return $('[data-testid="ds-toggle-btn"]');
+  }
+
+  static async getSubTabsList() {
+    return $('[data-testid="subtabs-list"]');
+  }
+
+  static async getTabsList() {
+    return $('[data-testid="tab-list"]');
+  }
+
+  static getTabs = async () => $$('[data-testid="ds-tabs-tab-button"]');
+
+  static getHeaderBtns = async () => $$('[data-testid="gh-toolbar-item"]');
+
+  static getHeaderBtnByIndex = async (index) => getElementByIndex(this.getHeaderBtns, index);
+
+  static getTabsByIndex = async (index) => getElementByIndex(this.getTabs, index);
+
+  static getSubTabs = async () => $$('[data-testid="ds-tabs-subtab-button"]');
+
+  static getSubTabsByIndex = async (index) => getElementByIndex(this.getSubTabs, index);
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Tabs', example);
+  }
+
+  // selectors
+  // actions
+  static async carouselNav(direction = 'right', clicks = 1) {
+    for (let i = 1; i <= clicks; i += 1) {
+      if (direction === 'right') {
+        // eslint-disable-next-line no-await-in-loop
+        if (await (await this.getChevronRight()).isDisplayedInViewport()) {
+          // eslint-disable-next-line no-await-in-loop
+          await (await this.getChevronRight()).click();
+        } else {
+          break;
+        }
+        // eslint-disable-next-line no-await-in-loop
+      } else if (await (await this.getChevronLeft()).isDisplayedInViewport()) {
+        // eslint-disable-next-line no-await-in-loop
+        await (await this.getChevronLeft()).click();
+      } else {
+        break;
+      }
+    }
+  }
+  // utils
+}

package/ds-text-box/DSTextBox.func.spec.js

@@ -0,0 +1,40 @@
+import DSTextBoxCO from './DSTextBoxCO';
+import { mouseOver, clickPosition } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5314 - TextBox - display tooltip when input is disabled', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.disabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display `tooltip`', async () => {
+      await mouseOver(await DSTextBoxCO.getInput(), 5, 10);
+      const tooltip = await DSTextBoxCO.getTooltip();
+      await expect(tooltip).toHaveTextContaining('Long text that causes ellipsis behavior to trigger');
+    });
+  });
+  describe('PUI-5313 - TextBox - display tooltip after focus/blur', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withTooltipURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display `tooltip`', async () => {
+      await mouseOver(await DSTextBoxCO.getInput(), 10, 10);
+      await (await DSTextBoxCO.getTooltip()).waitForDisplayed();
+      const tooltip = await DSTextBoxCO.getTooltip();
+      await expect(tooltip).toHaveTextContaining('long long long long long text');
+    });
+    it('should not display `tooltip` when textbox is active', async () => {
+      await (await DSTextBoxCO.getInput()).click();
+      const tooltip = await DSTextBoxCO.getTooltip();
+      await expect(tooltip).not.toBeDisplayed();
+    });
+    it('should display `tooltip` after focus and then clicking outside', async () => {
+      await clickPosition();
+      await mouseOver(await DSTextBoxCO.getInput(), 10, 10);
+      await (await DSTextBoxCO.getTooltip()).waitForDisplayed();
+      const tooltip = await DSTextBoxCO.getTooltip();
+      await expect(tooltip).toHaveTextContaining('long long long long long text');
+    });
+  });
+}

package/ds-text-box/DSTextBox.visual.spec.js

@@ -0,0 +1,51 @@
+import { mouseOver } from '../helpers';
+import DSTextBoxCO from './DSTextBoxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3626 - TextBox - display tooltip in header', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withTooltipURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display `tooltip` in the header', async () => {
+      await mouseOver(await DSTextBoxCO.getInput(), 10, 10);
+      await (await DSTextBoxCO.getTooltip()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTextBoxCO.snapshotPath('tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+
+describe('PUI-3627 - Textbox visual tests', () => {
+  describe('textbox, basic', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withFormItemLayout.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display basic textbox', async () => {
+      const snapshot = await browser.checkSnapshot(DSTextBoxCO.snapshotPath('withFormItemLayout'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('textbox, focused state', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withFormItemLayout.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display basic textbox with focused state', async () => {
+      await (await DSTextBoxCO.getInput()).click();
+      const snapshot = await browser.checkSnapshot(DSTextBoxCO.snapshotPath('withFormItemLayout-focus'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('textbox, with left label', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTextBoxCO.withLeftLabel.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display basic textbox with label to the left', async () => {
+      const snapshot = await browser.checkSnapshot(DSTextBoxCO.snapshotPath('label-left'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+});

package/ds-text-box/DSTextBoxCO.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-unresolved */
+import { PATH_END_OF_LIFE_TEXTBOX } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSTextBoxCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_TEXTBOX, 'basic');
+
+  static disabledURL = new Urlbuilder(PATH_END_OF_LIFE_TEXTBOX, 'disabled');
+
+  static withTooltipURL = new Urlbuilder(PATH_END_OF_LIFE_TEXTBOX, 'with-tooltip');
+
+  static withFormItemLayout = new Urlbuilder(PATH_END_OF_LIFE_TEXTBOX, 'with-form-item-layout');
+
+  static withLeftLabel = new Urlbuilder(PATH_END_OF_LIFE_TEXTBOX, 'with-left-label');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_END_OF_LIFE_TEXTBOX, component);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('TextBox', example);
+  }
+
+  // selectors
+  static async getInput() {
+    return $('//div/input[@data-testid="ds-input_main-component"]');
+  }
+
+  static async blur() {
+    await $('body').click();
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="popper-container"]');
+  }
+  // actions
+  // utils
+}

package/ds-time-picker/DSTimePicker.func.spec.js

@@ -0,0 +1,48 @@
+import DSTimePicker from './DSTimePickerCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5769 - TimePicker - clear input setting value to null', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTimePicker.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should diplay correctly the time`', async () => {
+      await (await DSTimePicker.getHours()).setValue('02');
+      await (await DSTimePicker.getMinutes()).setValue('35');
+      await (await DSTimePicker.getAmPm()).setValue('am');
+      const inputTime = await DSTimePicker.getInputTime();
+      await expect(inputTime).toBe('02:35am');
+    });
+    it('should clear correctly setting value to null`', async () => {
+      await (await DSTimePicker.getClearBtn()).click();
+      const inputTime = await DSTimePicker.getInputTime();
+      await expect(inputTime).toBe(':');
+    });
+  });
+  describe('PUI-8283 - TimePicker - Chevrons', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTimePicker.altPlacement.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should diplay correctly the time after setting it with the chevrons', async () => {
+      await (await DSTimePicker.getHours()).setValue('10');
+      await (await DSTimePicker.getMinutes()).setValue('29');
+      const openPickerBtn = await DSTimePicker.getDateTimePickerBtn();
+      await openPickerBtn.click();
+      const minutesDown = await DSTimePicker.getMinChevDown();
+      const hoursDown = await DSTimePicker.getHourChevDown();
+      await minutesDown.click();
+      await hoursDown.click();
+      const inputTime = await DSTimePicker.getInputTime();
+      await expect(inputTime).toBe('11:31pm');
+    });
+    it('should diplay correctly the time after changing it with the chevrons', async () => {
+      const minutesUp = await DSTimePicker.getMinChevUp();
+      const hoursUp = await DSTimePicker.getHourChevUp();
+      await minutesUp.click();
+      await hoursUp.click();
+      const inputTime = await DSTimePicker.getInputTime();
+      await expect(inputTime).toBe('10:30pm');
+    });
+  });
+}

package/ds-time-picker/DSTimePickerCO.js

@@ -0,0 +1,113 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_END_OF_LIFE_TIME_PICKER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export const knobs = {
+  placement: 'knob-placement',
+};
+
+export default class DSTextBoxCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_TIME_PICKER, 'basic');
+
+  static clearable = new Urlbuilder(PATH_END_OF_LIFE_TIME_PICKER, 'clearable');
+
+  static altPlacement = new Urlbuilder(PATH_END_OF_LIFE_TIME_PICKER, 'alt-placement');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_END_OF_LIFE_TIME_PICKER, component);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('TimePicker', example);
+  }
+
+  // selectors
+  static async getHours() {
+    return $('[data-testid="ds-time-input__hours"]');
+  }
+
+  static async getMinutes() {
+    return $('[data-testid="ds-time-input__minutes"]');
+  }
+
+  static async getAmPm() {
+    return $('[data-testid="ds-time-input__ampm"]');
+  }
+
+  static async getDateTimePickerBtn() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  static async getDateTimePicker() {
+    return $('[data-testid="date-time-picker"]');
+  }
+
+  static async getDayPicker(day) {
+    return $$(`//div[text()=${day}]`)[1];
+  }
+
+  static async getHideBtn() {
+    return $('button*=HIDE');
+  }
+
+  static async getShowBtn() {
+    return $('button*=SHOW');
+  }
+
+  static async getHourPicker(hour) {
+    return $(`//div[@data-testid="hour-list"]/div[contains(text(),${hour})]`);
+  }
+
+  static async getHourArrowUp() {
+    return $('//div[contains(text(),"H")]//button[@aria-label="Chevron Up"]');
+  }
+
+  static async getHourArrowDown() {
+    return $('[data-testid="hour-chevron-down"]');
+  }
+
+  static async getPickerTime() {
+    return $('//div[contains(text(),":")]');
+  }
+
+  static async getInputTime() {
+    const minutes = await (await this.getMinutes()).getValue();
+    const hour = await (await this.getHours()).getValue();
+    const ampm = await (await this.getAmPm()).getValue();
+    return `${hour}:${minutes}${ampm}`;
+  }
+
+  static async getClearBtn() {
+    return $('span*=Clear Value');
+  }
+
+  static async getMinChevUp() {
+    return $('[data-testid="minutes-chevron-up"]');
+  }
+
+  static async getMinChevDown() {
+    return $('[data-testid="minutes-chevron-down"]');
+  }
+
+  static async getHourChevUp() {
+    return $('[data-testid="hour-chevron-up"]');
+  }
+
+  static async getHourChevDown() {
+    return $('[data-testid="hour-chevron-down"]');
+  }
+
+  static async getMeriChevUp() {
+    return $('[data-testid="meridiem-chevron-up"]');
+  }
+
+  static async getMeriChevDown() {
+    return $('[data-testid="meridiem-chevron-down"]');
+  }
+
+  // actions
+
+  // utils
+}