dimsum-e2e-tests 3.22.0-next.36

package/ds-date-picker/DSDatePicker.func.spec.js

@@ -0,0 +1,275 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDatePicker from './DSDatePickerCO';
+import { type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4122 - DatePicker, button tabindex prop', () => {
+    before(async () => {
+      const errorOnGo = await DSDatePicker.useCasePUI3896.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should support tabindex prop', async () => {
+      const datePickerBtn = await DSDatePicker.getDatePickerBtn();
+      const tabIndexProp = await datePickerBtn.getAttribute('tabindex');
+      await expect(tabIndexProp).toEqual('-1');
+    });
+  });
+  describe('PUI-4278 - DatePicker, input tabindex prop', () => {
+    before(async () => {
+      const errorOnGo = await DSDatePicker.useCasePUI4195.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should support tabindex prop', async () => {
+      const datePickerBtn = await DSDatePicker.getDatePickerBtn();
+      await datePickerBtn.click();
+      const calendarTabIndex = await (await DSDatePicker.getCalendar()).getAttribute('tabindex');
+      await expect(calendarTabIndex).toEqual('3');
+    });
+  });
+  describe('PUI-5864 - DatePicker, current and selected date style', () => {
+    before(async () => {
+      const errorOnGo = await DSDatePicker.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display current date style', async () => {
+      const pickerBtn = await DSDatePicker.getDatePickerBtn();
+      await pickerBtn.click();
+      const currentDay = await DSDatePicker.getCurrentDay();
+      await currentDay.waitForDisplayed();
+      const dateStlye = (await currentDay.getCSSProperty('border-top-color')).parsed.hex;
+      await expect(dateStlye).toEqual('#697489');
+    });
+    it('should display selected date style', async () => {
+      const currentDay = await DSDatePicker.getCurrentDay();
+      await currentDay.click();
+      const calendar = await DSDatePicker.getCalendar();
+      await calendar.waitForDisplayed({ reverse: true });
+      const pickerBtn = await DSDatePicker.getDatePickerBtn();
+      await pickerBtn.click();
+      await currentDay.waitForDisplayed();
+      const styleBorderTop = (await currentDay.getCSSProperty('border-top-color')).parsed.hex;
+      const styleBackgroundColor = (await currentDay.getCSSProperty('background-color')).parsed.hex;
+      await expect(styleBorderTop).toEqual('#1e79c2');
+      await expect(styleBackgroundColor).toEqual('#1e79c2');
+    });
+  });
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-4405 - DatePicker, close calendar on date selection', () => {
+      before(async () => {
+        const errorOnGo = await DSDatePicker.useCasePUI4195.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should close calendar after date selection', async () => {
+        const datePickerBtn = await DSDatePicker.getDatePickerBtn();
+        await datePickerBtn.click();
+        const calendar = await DSDatePicker.getCalendar();
+        await calendar.waitForDisplayed();
+        const datePickerDay = await DSDatePicker.getDatePickerDay(16);
+        await datePickerDay.waitForDisplayed();
+        await datePickerDay.click();
+        await expect(calendar).not.toExist();
+      });
+      it('should select the day', async () => {
+        const day = await DSDatePicker.getDay();
+        await expect(day).toHaveValue('16');
+      });
+      it('focus will return to the picker', async () => {
+        const pickerBtn = await DSDatePicker.getDatePickerBtn();
+        await pickerBtn.waitForDisplayed();
+        await expect(pickerBtn).toBeFocused();
+      });
+    });
+    describe('PUI-5770 - DatePicker - clear input setting value to null', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSDatePicker.clean.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should diplay correctly the date`', async () => {
+        await (await DSDatePicker.getMonth()).setValue('02');
+        await (await DSDatePicker.getDay()).setValue('28');
+        await (await DSDatePicker.getYear()).setValue('2022');
+        const month = await DSDatePicker.getMonth();
+        const day = await DSDatePicker.getDay();
+        const year = await DSDatePicker.getYear();
+        await expect(month).toHaveValue('02');
+        await expect(day).toHaveValue('28');
+        await expect(year).toHaveValue('2022');
+      });
+      it('should clear correctly setting value to null`', async () => {
+        await (await DSDatePicker.getClearBtn()).click();
+        const month = await DSDatePicker.getMonth();
+        const day = await DSDatePicker.getDay();
+        const year = await DSDatePicker.getYear();
+        await expect(month).toHaveValue('');
+        await expect(day).toHaveValue('');
+        await expect(year).toHaveValue('');
+      });
+    });
+    describe('PUI-5788 - DatePicker - clear input [Delete]', () => {
+      beforeEach('loading page', async () => {
+        const errorOnGo = await DSDatePicker.basic.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('should clear correctly the month', async () => {
+        await (await DSDatePicker.getMonth()).setValue('02');
+        const month = await DSDatePicker.getMonth();
+        await expect(month).toHaveValue('02');
+        await browser.keys([Key.Shift, Key.Tab]);
+        await browser.keys(Key.Delete);
+        await expect(month).toHaveValue('');
+      });
+      it('should clear correctly the day', async () => {
+        await (await DSDatePicker.getMonth()).setValue('02');
+        await (await DSDatePicker.getDay()).setValue('25');
+        const month = await DSDatePicker.getMonth();
+        await expect(month).toHaveValue('02');
+        const day = await DSDatePicker.getDay();
+        await expect(day).toHaveValue('25');
+        await browser.keys([Key.Shift, Key.Tab]);
+        await browser.keys(Key.Delete);
+        await expect(month).toHaveValue('02');
+        await expect(day).toHaveValue('');
+      });
+      it('should clear correctly the year', async () => {
+        await (await DSDatePicker.getMonth()).setValue('02');
+        await (await DSDatePicker.getDay()).setValue('25');
+        await (await DSDatePicker.getYear()).setValue('2015');
+        const month = await DSDatePicker.getMonth();
+        const day = await DSDatePicker.getDay();
+        const year = await DSDatePicker.getYear();
+        await expect(month).toHaveValue('02');
+        await expect(day).toHaveValue('25');
+        await expect(year).toHaveValue('2015');
+        await browser.keys(Key.Tab);
+        await browser.keys([Key.Shift, Key.Tab]);
+        await browser.keys(Key.Delete);
+        await expect(month).toHaveValue('02');
+        await expect(day).toHaveValue('25');
+        await expect(year).toHaveValue('');
+      });
+      it('should clear correctly the day after enter all date', async () => {
+        await (await DSDatePicker.getMonth()).setValue('02');
+        await (await DSDatePicker.getDay()).setValue('25');
+        await (await DSDatePicker.getYear()).setValue('2015');
+        const month = await DSDatePicker.getMonth();
+        const day = await DSDatePicker.getDay();
+        const year = await DSDatePicker.getYear();
+        await expect(month).toHaveValue('02');
+        await expect(day).toHaveValue('25');
+        await expect(year).toHaveValue('2015');
+        await browser.keys(Key.Tab);
+        await browser.keys([Key.Shift, Key.Tab]);
+        await browser.keys([Key.Shift, Key.Tab]);
+        await browser.keys([Key.Shift, Key.Tab]);
+        await browser.keys(Key.Delete);
+        await expect(month).toHaveValue('');
+        await expect(day).toHaveValue('25');
+        await expect(year).toHaveValue('2015');
+      });
+    });
+  }
+  describe('PUI-6150 - DatePicker, clear input setting value to null - initialdate', () => {
+    before(async () => {
+      const errorOnGo = await DSDatePicker.initialDates.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display initial date', async () => {
+      const month = await DSDatePicker.getMonth();
+      const day = await DSDatePicker.getDay();
+      const year = await DSDatePicker.getYear();
+      await expect(month).not.toHaveValue('');
+      await expect(day).not.toHaveValue('');
+      await expect(year).not.toHaveValue('');
+    });
+    it('should clear correctly setting value to null', async () => {
+      await (await DSDatePicker.getClearBtn()).click();
+      const month = await DSDatePicker.getMonth();
+      const day = await DSDatePicker.getDay();
+      const year = await DSDatePicker.getYear();
+      await expect(month).toHaveValue('');
+      await expect(day).toHaveValue('');
+      await expect(year).toHaveValue('');
+    });
+    it('should set correctly new date', async () => {
+      await (await DSDatePicker.getNewDate()).click();
+      const month = await DSDatePicker.getMonth();
+      const day = await DSDatePicker.getDay();
+      const year = await DSDatePicker.getYear();
+      await expect(month).toHaveValue('11');
+      await expect(day).toHaveValue('10');
+      await expect(year).toHaveValue('2011');
+    });
+    it('clear correctly setting value to null', async () => {
+      await (await DSDatePicker.getClearBtn()).click();
+      const month = await DSDatePicker.getMonth();
+      const day = await DSDatePicker.getDay();
+      const year = await DSDatePicker.getYear();
+      await expect(month).toHaveValue('');
+      await expect(day).toHaveValue('');
+      await expect(year).toHaveValue('');
+    });
+  });
+  describe('PUI-6280 - DatePicker, month and year navigation', () => {
+    before(async () => {
+      const errorOnGo = await DSDatePicker.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should navigate throw monhts correctly', async () => {
+      await (await DSDatePicker.getDatePickerBtn()).click();
+      const date = await (await DSDatePicker.getDatePickerHeader()).getText();
+      await (await DSDatePicker.getMonthNextBtn()).click();
+      const dateHeaderText = await (await DSDatePicker.getDatePickerHeader()).getText();
+      await expect(date).not.toBe(dateHeaderText);
+      await (await DSDatePicker.getMonthPrevBtn()).click();
+      const dateHeaderText2 = await (await DSDatePicker.getDatePickerHeader()).getText();
+      await expect(date).toBe(dateHeaderText2);
+    });
+    it('should navigate throw years correctly', async () => {
+      const date = await (await DSDatePicker.getDatePickerHeader()).getText();
+      await (await DSDatePicker.getYearNextBtn()).click();
+      const dateCompare = await (await DSDatePicker.getDatePickerHeader()).getText();
+      await expect(date).not.toBe(dateCompare);
+      await (await DSDatePicker.getYearPrevBtn()).click();
+      const dateCompare2 = await (await DSDatePicker.getDatePickerHeader()).getText();
+      await expect(date).toBe(dateCompare2);
+    });
+  });
+
+  describe('PUI-6407 - DatePicker, Input + Icon Min Width', () => {
+    before(async () => {
+      const errorOnGo = await DSDatePicker.ueCaseMinWidth.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should be displayed with a min-width of 140', async () => {
+      const widthInput = await DSDatePicker.getWidthInput();
+      await widthInput.click();
+      await widthInput.setValue('');
+      await type('120');
+      const inputContainerSize = (await (await DSDatePicker.getInputContainer()).getSize()).width;
+      await expect(inputContainerSize).toBe(140);
+    });
+    it('should be displayed with a width of 200', async () => {
+      const widthInput = await DSDatePicker.getWidthInput();
+      await widthInput.click();
+      await widthInput.setValue('');
+      await type('200');
+      const inputContainerSize = (await (await DSDatePicker.getInputContainer()).getSize()).width;
+      await expect(inputContainerSize).toBe(200);
+    });
+  });
+
+  describe('PUI-6597 - DatePicker, Current day focus', () => {
+    before(async () => {
+      const errorOnGo = await DSDatePicker.focusCurrentDateURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should focus the current date when opening the picker', async () => {
+      await (await DSDatePicker.getDatePickerBtn()).waitForDisplayed({ timeout: 10000 });
+      await (await DSDatePicker.getDatePickerBtn()).click();
+      const browserDay = await DSDatePicker.getBrowsersDay();
+      const monthPickerDay = await DSDatePicker.getCurrentMonthPickerDay(browserDay);
+      await expect(monthPickerDay).toBeFocused();
+    });
+  });
+}

package/ds-date-picker/DSDatePickerCO.js

@@ -0,0 +1,104 @@
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_E2E_DATE_PICKER, PATH_END_OF_LIFE_DATE_PICKER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSDatePickerCO extends PageObject {
+  static useCasePUI3896 = new Urlbuilder(PATH_E2E_DATE_PICKER, 'pui-3896-tab-index-picker');
+
+  static useCasePUI4195 = new Urlbuilder(PATH_E2E_DATE_PICKER, 'pui-4195-date-input-tab-index');
+
+  static ueCaseMinWidth = new Urlbuilder(PATH_E2E_DATE_PICKER, 'min-width');
+
+  static focusCurrentDateURL = new Urlbuilder(PATH_END_OF_LIFE_DATE_PICKER, 'focus-current-date');
+
+  static clean = new Urlbuilder(PATH_END_OF_LIFE_DATE_PICKER, 'clean');
+
+  static basic = new Urlbuilder(PATH_END_OF_LIFE_DATE_PICKER, 'basic');
+
+  static initialDates = new Urlbuilder(PATH_END_OF_LIFE_DATE_PICKER, 'initial-dates');
+
+  static async getDatePickerBtn() {
+    return $('[data-testid="btn-date-picker"]');
+  }
+
+  static async getDatePickerInput() {
+    return $('[data-testid="datepicker-input"]');
+  }
+
+  static async getCalendar() {
+    return $('[data-testid="calendar-wrapper"]');
+  }
+
+  static async getDatePickerDay(day) {
+    return $$(`[data-testid="datepicker-day-${day}"]`)[1];
+  }
+
+  static async getCurrentMonthPickerDay(day) {
+    return $(
+      // eslint-disable-next-line max-len
+      `//div[@data-visible="true"]//div[@data-testid="datepicker-day-${day}"]/parent::td[not(contains(@class, "CalendarDay__outside"))]`,
+    );
+  }
+
+  static async getMonth() {
+    return $('[data-testid="month"]');
+  }
+
+  static async getDay() {
+    return $('[data-testid="day"]');
+  }
+
+  static async getYear() {
+    return $('[data-testid="year"]');
+  }
+
+  static async getClearBtn() {
+    return $('span*=Clear');
+  }
+
+  static async getNewDate() {
+    return $('span*=new Date 2011-11-11');
+  }
+
+  static async getCurrentDay() {
+    return $('//td[contains(@class,"today")]/div');
+    // return $$('td.CalendarDay__today div')[0];
+  }
+
+  static async getMonthPrevBtn() {
+    return $$('[data-testid="date-picker-nav"]')[0];
+  }
+
+  static async getMonthNextBtn() {
+    return $$('[data-testid="date-picker-nav"]')[1];
+  }
+
+  static async getYearPrevBtn() {
+    return $$('[data-testid="date-picker-prev-year-arrow"]')[1];
+  }
+
+  static async getYearNextBtn() {
+    return $$('[data-testid="date-picker-next-year-arrow"]')[1];
+  }
+
+  static async getDatePickerHeader() {
+    return $$('[data-testid="date-picker-header"]')[1];
+  }
+
+  static async getWidthInput() {
+    return $('[data-testid="width-input"]');
+  }
+
+  static async getInputContainer() {
+    return $('[data-testid="input-container"]');
+  }
+
+  static async getBrowsersDay() {
+    return browser.execute(() => new Date().getDate());
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'dropdown-multi-pill') {
+    return PageObject.getSnapshotPathBuilder('DSDatePicker', example, 'ds-datepicker');
+  }
+}

package/ds-date-range-picker/DSDateRangePicker.func.spec.js

@@ -0,0 +1,114 @@
+import DSDateRangePickerCO from './DSDateRangePickerCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4154 - DSDateRangePicker, Required dates', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSDateRangePickerCO.requiredUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display red dot beside fields labels', async () => {
+      const reqDotForm = await DSDateRangePickerCO.getReqDotFrom();
+      const requiereColor = await DSDateRangePickerCO.getRequiredColor('From');
+      await expect(reqDotForm).toBeDisplayed();
+      await expect(requiereColor).toEqual(['#c64252', '#c64252']);
+    });
+  });
+  describe('PUI-3810 - DSDateRangePicker, blocked days', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSDateRangePickerCO.basicUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should not be clickable blocked day', async () => {
+      await (await DSDateRangePickerCO.getPickerBtn()).click();
+      const disabledDate = await DSDateRangePickerCO.getDisabledDate(0);
+      await expect(disabledDate).not.toBeClickable();
+    });
+    it('should display red border in input field', async () => {
+      const input = await DSDateRangePickerCO.getInputField(0);
+      await input.click();
+      await DSDateRangePickerCO.triggerBackspace(8);
+      await input.setValue('10/18/2020');
+      await (await DSDateRangePickerCO.getPickerBtn()).click();
+      await browser.pause(1000);
+      await (await DSDateRangePickerCO.getBorderError()).waitForDisplayed();
+      const hasErrorSt = await DSDateRangePickerCO.hasErrorState(input);
+      await expect(hasErrorSt).toEqual(true);
+    });
+  });
+  describe('PUI-4600 - DSDateRangePicker, basic functional', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSDateRangePickerCO.basicUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should be possible set start date', async () => {
+      const fromInput = await DSDateRangePickerCO.getInputField(0);
+      const startDate = '01/01/3000';
+      await fromInput.click();
+      await DSDateRangePickerCO.triggerBackspace(8);
+      await fromInput.setValue(startDate);
+      await (await DSDateRangePickerCO.getPickerBtn()).click();
+      await expect(fromInput).toHaveValueContaining(startDate);
+      await (await DSDateRangePickerCO.getDay(2)).click();
+      await (await DSDateRangePickerCO.getDay(4)).click();
+      await expect(fromInput).not.toHaveValueContaining(startDate);
+    });
+    it('should be possible set end date', async () => {
+      const toInput = await DSDateRangePickerCO.getInputField(0);
+      const endDate = '01/01/3000';
+      await toInput.click();
+      await DSDateRangePickerCO.triggerBackspace(8);
+      await toInput.setValue(endDate);
+      await (await DSDateRangePickerCO.getPickerBtn()).click();
+      await expect(toInput).toHaveValueContaining(endDate);
+      await (await DSDateRangePickerCO.getDay(2)).click();
+      await (await DSDateRangePickerCO.getPickerBtn()).click();
+      await (await DSDateRangePickerCO.getDay(4)).click();
+      await expect(toInput).not.toHaveValueContaining(endDate);
+    });
+  });
+  describe('PUI-6141 - DSDateRangePicker, Opening the picker after an error state - Manual Input', () => {
+    before(async () => {
+      const errorOnGo = await DSDateRangePickerCO.basicUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should open the picker when the dates are correct', async () => {
+      const startDateInput = await DSDateRangePickerCO.getInputField(0);
+      const endDateInput = await DSDateRangePickerCO.getInputField(1);
+      await startDateInput.setValue('04/16/3021');
+      await endDateInput.setValue('04/16/3021');
+      await (await DSDateRangePickerCO.getPickerBtn()).click();
+      const calendar = await DSDateRangePickerCO.getDateRangePickerController();
+      await expect(calendar).toBeDisplayedInViewport();
+    });
+    it('should display an error state on the start date input', async () => {
+      await DSDateRangePickerCO.blur();
+      const startDateInput = await DSDateRangePickerCO.getInputField(0);
+      await startDateInput.click();
+      await DSDateRangePickerCO.triggerBackspace((await startDateInput.getValue()).length);
+      await startDateInput.setValue('04/17/2021');
+      await DSDateRangePickerCO.blur();
+      await browser.pause(500);
+      const hasErrorSt = await DSDateRangePickerCO.hasErrorState(startDateInput);
+      await expect(hasErrorSt).toBe(true);
+    });
+    it('should not open the picker', async () => {
+      await (await DSDateRangePickerCO.getPickerBtn()).click();
+      const isOpen = await DSDateRangePickerCO.isPickerOpen();
+      await expect(isOpen).toBe(false);
+    });
+    it('should open the picker after there is no longer an error state', async () => {
+      const endDateInput = await DSDateRangePickerCO.getInputField(1);
+      await endDateInput.click();
+      await DSDateRangePickerCO.triggerBackspace(endDateInput.getValue().length);
+      await endDateInput.setValue('04/18/3021');
+      await (await DSDateRangePickerCO.getPickerBtn()).click();
+      const isOpen = await DSDateRangePickerCO.isPickerOpen();
+      await expect(isOpen).toBe(true);
+    });
+    it('should not display an error state on the start date input', async () => {
+      const startDateInput = await DSDateRangePickerCO.getInputField(0);
+      const hasErrorSt = await DSDateRangePickerCO.hasErrorState(startDateInput);
+      await expect(hasErrorSt).toBe(false);
+    });
+  });
+}

package/ds-date-range-picker/DSDateRangePicker.visual.spec.js

@@ -0,0 +1,14 @@
+import DSDateRangePickerCO from './DSDateRangePickerCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5353 - DSDateRangePicker - calendar visual test', () => {
+    before(async () => {
+      const errorOnGo = await DSDateRangePickerCO.fixedCalendar.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display calendar with selected range', async () => {
+      const snapshot = await browser.checkSnapshot(DSDateRangePickerCO.snapshotPath('date-range-calendar'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-date-range-picker/DSDateRangePickerCO.js

@@ -0,0 +1,99 @@
+import { Key } from 'webdriverio';
+import { PATH_END_OF_LIFE_DATE_RANGE_PICKER, PATH_E2E_DATE_RANGE_PICKER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export const knobs = {
+  startDateRequired: 'knob-startDateRequired',
+  endDateRequired: 'knob-endDateRequired',
+};
+
+export default class DSDateRangePickerCO extends PageObject {
+  static basicUrl = new Urlbuilder(PATH_END_OF_LIFE_DATE_RANGE_PICKER, 'basic');
+
+  static requiredUrl = new Urlbuilder(PATH_END_OF_LIFE_DATE_RANGE_PICKER, 'required');
+
+  static defaultUrl = new Urlbuilder(PATH_END_OF_LIFE_DATE_RANGE_PICKER, 'default');
+
+  static fixedCalendar = new Urlbuilder(PATH_E2E_DATE_RANGE_PICKER, 'day-range-calendar-fixed-dates');
+
+  static async getReqDotFrom() {
+    return $('label*=From').$('span*=●');
+  }
+
+  static async getReqDotTo() {
+    return $('label*=To').$('span*=●');
+  }
+
+  static async getDisabledDate(index) {
+    return $$('//td[contains(@aria-label, "Not")]//div[@data-testid="datepicker-day"]')[index];
+  }
+
+  static async getDay(day) {
+    return $$(`[data-testid="datepicker-day-${day}"]`)[2];
+  }
+
+  static async getInputField(index) {
+    const field = await $$('[data-testid="ds-input_main-component"]')[index];
+    return field;
+  }
+
+  static async getPickerBtn() {
+    return $('[data-testid=btn-date-picker]');
+  }
+
+  static async getRequiredColor() {
+    const colorFrom = await (await this.getReqDotFrom()).getCSSProperty('color');
+    const colorTo = await (await this.getReqDotTo()).getCSSProperty('color');
+    return [colorFrom.parsed.hex, colorTo.parsed.hex];
+  }
+
+  static async setDate(element, date) {
+    await element.setValue(date.remplace('/', ''));
+  }
+
+  static async triggerBackspace(number = 1) {
+    for (let x = 0; x < number; x += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(Key.Backspace);
+    }
+  }
+
+  static async getBorderError() {
+    return $('.em-ds-form-item--error');
+  }
+
+  static async getDateRangePickerController() {
+    return $('[data-testid="date-range-picker-controller"]');
+  }
+
+  static async isPickerOpen() {
+    const isOpen = await (await this.getDateRangePickerController()).isDisplayedInViewport();
+    return isOpen;
+  }
+
+  static async blur() {
+    await $('body').click();
+  }
+
+  static async hasErrorState(element) {
+    const bottomColor = await element.getCSSProperty('border-bottom-color');
+    const topColor = await element.getCSSProperty('border-top-color');
+    const leftColor = await element.getCSSProperty('border-left-color');
+    const rightColor = await element.getCSSProperty('border-right-color');
+    const borderColor = '#c64252';
+    if (
+      bottomColor.parsed.hex === borderColor &&
+      topColor.parsed.hex === borderColor &&
+      leftColor.parsed.hex === borderColor &&
+      rightColor.parsed.hex === borderColor
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'dropdown-multi-pill') {
+    return PageObject.getSnapshotPathBuilder('DSDatePicker', example, 'ds-datepicker');
+  }
+}