dimsum-e2e-tests 3.51.0-next.2 → 3.51.0-next.4

package/ds-controlled-form/ds-combobox/multi-select/DSCombobox.ten-thousand-options.func.spec.js

@@ -10,12 +10,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('01: should select all the options correctly', async () => {
       await DSComboboxCO.openMenuListMouse();
-      const selectAllCheckbox = await DSComboboxCO.getSelectAllCheckbox();
-      await selectAllCheckbox.click();
-      const selectedOption = await DSComboboxCO.getOptionByLabel('Option 9999');
+      await browser.keys(['Control', 'a']);
+      const selectedOption = await DSComboboxCO.getOptionByLabel('Option 0');
       const overflowPill = await DSComboboxCO.getPillByLabel('+9999');
-      const showSelectedBtn = await DSComboboxCO.getSelectedOptionsToggle();
-      await expect(showSelectedBtn).toHaveTextContaining('SHOW SELECTED [10000]');
       await expect(overflowPill).toBeDisplayedInViewport();
       await expect(selectedOption).toBeDisplayedInViewport();
     });
@@ -26,22 +23,5 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const overflowPill = await DSComboboxCO.getPillByLabel('+9998');
       await expect(overflowPill).toBeDisplayedInViewport();
     });
-    it('03: should display selected options', async () => {
-      const option7 = await DSComboboxCO.getOptionByLabel('Option 7');
-      const selectedOptionBtn = await DSComboboxCO.getSelectedOptionsToggle();
-      await selectedOptionBtn.click();
-      const showSelectedBtn = await DSComboboxCO.getSelectedOptionsToggle();
-      await showSelectedBtn.waitForDisplayed();
-      await expect(showSelectedBtn).toHaveTextContaining('SHOW ALL');
-      await expect(option7).not.toBeDisplayedInViewport();
-    });
-    it('04: should unselect all options', async () => {
-      const overflowPill = await DSComboboxCO.getPillByLabel('+9998');
-      const selectedOption = await DSComboboxCO.getPillByLabel('Option 0');
-      const selectAllCheckbox = await DSComboboxCO.getSelectAllCheckbox();
-      await selectAllCheckbox.click();
-      await expect(overflowPill).not.toBeDisplayedInViewport();
-      await expect(selectedOption).not.toBeDisplayedInViewport();
-    });
   });
 }

package/ds-controlled-form/ds-combobox/single-select/DSCombobox.keyboard-single-select.func.spec.js

@@ -34,6 +34,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('05: should select an option and close the menu - ENTER', async () => {
       const menulist = await DSComboboxCO.getMenuList();
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const selectedOption = await DSComboboxCO.getSelectedValues();
       await expect(menulist).not.toBeDisplayed();
@@ -59,6 +60,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const selectedOption = await DSComboboxCO.getSelectedValues();
       await expect(selectedOption).toHaveTextContaining('(555) 555-5555');
@@ -91,6 +94,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(numOptions).toBe(2);
     });
     it('04: select filtered option - Enter', async () => {
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const selectedOption = await (await DSComboboxCO.getSimpleTruncateText()).getText();
       await expect(selectedOption).toBe('Luke Skywalker too long this text is super long');

package/ds-controlled-form/ds-controlled-date-range-picker/DSControlledDateRangePicker.axe-core.spec.js

@@ -0,0 +1,85 @@
+import DSControlledDateRangePickerCO from './DSControlledDateRangePickerCO';
+import { axeCoreCheck, type } from '../../helpers';
+import { Key } from 'webdriverio';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14853  - DSControlledDateRangePicker:: Basic -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have closed calendar, empty input and pass axe-core scan', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should have expanded calendar, empty input and pass axe-core scan', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should have expanded calendar, populated input and pass axe-core scan', async () => {
+      const beginDate = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await beginDate.click();
+      const endDate = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(16);
+      await endDate.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('04: should have expanded calendar, populated input and pass axe-core scan', async () => {
+      await browser.keys(Key.Escape);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-14855 - DSControlledDateRangePicker:: Invalid selection -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.invalidSelection.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have invalid date range picker with closed calendar and pass axe-core scan', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should have invalid date range picker with expanded calendar and pass axe-core scan', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-14854 - DSControlledDateRangePicker:: Disabled -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have disabled date range picker and pass axe-core scan', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-14862 - DSControlledDateRangePicker:: Clearable -AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have two clearable inputs. One populated, one empty and pass axe-core scan', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-range-picker/DSControlledDateRangePicker.functional.spec.js

@@ -0,0 +1,242 @@
+/* eslint-disable max-lines */
+import DSControlledDateRangePickerCO from './DSControlledDateRangePickerCO';
+import { Key } from 'webdriverio';
+import { type } from '../../helpers';
+import DSFormLayoutBlockItemCO from '../../ds-form-layout-blocks/form-layout-block-item/DSFormLayoutBlockItemCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-14860 - DSControlledDateRangePicker:: Basic -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should pupulate input', async () => {
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      await browser.keys(Key.Tab);
+      await type('02082020');
+      const startingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      const startingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(0);
+      const startingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(0);
+      const endingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(1);
+      const endingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(1);
+      const endingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(1);
+      await expect(startingMonth).toHaveValueContaining('02');
+      await expect(startingDay).toHaveValueContaining('03');
+      await expect(startingYear).toHaveValueContaining('2020');
+      await expect(endingMonth).toHaveValueContaining('02');
+      await expect(endingDay).toHaveValueContaining('08');
+      await expect(endingYear).toHaveValueContaining('2020');
+      await expect(endingYear).toBeFocused();
+    });
+    it('02: should have the input date selected on calendar', async () => {
+      const openPickerBtn = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openPickerBtn.click();
+      const startDate = await DSControlledDateRangePickerCO.getRangeStartDay();
+      const endDate = await DSControlledDateRangePickerCO.getRangeEndDay();
+      await expect(startDate).toHaveAttribute('aria-label', 'February third 2020, Monday');
+      await expect(endDate).toHaveAttribute('aria-label', 'February eighth 2020, Saturday');
+    });
+    it('03: should change the text input to the picked date (mouse)', async () => {
+      const exampleDate1 = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(16);
+      await exampleDate1.click();
+      const exampleDate2 = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(20);
+      await exampleDate2.click();
+      const startingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      const startingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(0);
+      const startingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(0);
+      const endingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(1);
+      const endingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(1);
+      const endingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(1);
+      await expect(startingMonth).toHaveValueContaining('02');
+      await expect(startingDay).toHaveValueContaining('07');
+      await expect(startingYear).toHaveValueContaining('2020');
+      await expect(endingMonth).toHaveValueContaining('02');
+      await expect(endingDay).toHaveValueContaining('09');
+      await expect(endingYear).toHaveValueContaining('2020');
+    });
+    it('04: should change the text input to the picked date (KB)', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.Space);
+      const startingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      const startingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(0);
+      const startingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(0);
+      const endingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(1);
+      const endingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(1);
+      const endingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(1);
+      await expect(startingMonth).toHaveValueContaining('02');
+      await expect(startingDay).toHaveValueContaining('14');
+      await expect(startingYear).toHaveValueContaining('2020');
+      await expect(endingMonth).toHaveValueContaining('02');
+      await expect(endingDay).toHaveValueContaining('16');
+      await expect(endingYear).toHaveValueContaining('2020');
+    });
+  });
+
+  describe('PUI-14861 - DSControlledDateRangePicker:: Disabled -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should not be able to trigger/focus disabled date range picker', async () => {
+      const openPickerBtn = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openPickerBtn.click();
+      const calendar = await DSControlledDateRangePickerCO.getDayOnCalendarWrapper();
+      await expect(openPickerBtn).toHaveAttribute('disabled', 'true');
+      await expect(calendar).not.toBeDisplayedInViewport();
+    });
+    it('02: should not be able to focus disabled date range picker', async () => {
+      await browser.keys(Key.Tab);
+      const monthInput = await DSControlledDateRangePickerCO.getMonthInput();
+      await expect(monthInput).not.toBeFocused();
+    });
+  });
+
+  describe('PUI-14856 - DSControlledDateRangePicker:: Clearable -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have clearable date range pickers w/o clear button since theyre empty', async () => {
+      const openPickerBtn = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openPickerBtn.waitForDisplayed();
+      const clearableBtn = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      await expect(clearableBtn).not.toBeDisplayedInViewport();
+    });
+    it('02: should populate one input and show only one clearable btn', async () => {
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      const clearableStart = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      const clearableEnd = await DSControlledDateRangePickerCO.getClearableByIndex(1);
+      await expect(clearableStart).toBeDisplayedInViewport();
+      await expect(clearableEnd).not.toBeDisplayedInViewport();
+    });
+    it('03: should populate one input and show both clearable btns', async () => {
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      const clearableStart = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      const clearableEnd = await DSControlledDateRangePickerCO.getClearableByIndex(1);
+      await expect(clearableStart).toBeDisplayedInViewport();
+      await expect(clearableEnd).toBeDisplayedInViewport();
+    });
+    it('04: should clear both inputs (one with mouse one with keyboard)', async () => {
+      await browser.keys(Key.Space);
+      const clearableBtn = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      await clearableBtn.click();
+      const startingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      const startingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(0);
+      const startingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(0);
+      const endingMonth = await DSControlledDateRangePickerCO.getMonthInputByIndex(1);
+      const endingDay = await DSControlledDateRangePickerCO.getDayInputByIndex(1);
+      const endingYear = await DSControlledDateRangePickerCO.getYearInputByIndex(1);
+      await expect(startingMonth).toHaveValueContaining('');
+      await expect(startingDay).toHaveValueContaining('');
+      await expect(startingYear).toHaveValueContaining('');
+      await expect(endingMonth).toHaveValueContaining('');
+      await expect(endingDay).toHaveValueContaining('');
+      await expect(endingYear).toHaveValueContaining('');
+    });
+  });
+
+  describe('PUI-14864 - DSControlledDateRangePicker:: Invalid selection -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.invalidSelection.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should have invalid date range picker', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const errorMessage = DSFormLayoutBlockItemCO.getErrorMessage();
+      const firstInput = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      await expect(firstInput).toHaveAttribute('aria-invalid', 'true');
+      await expect(errorMessage).toBeDisplayedInViewport();
+    });
+    it('02: should change the error message for feedback message after fixing the error', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.click();
+      const exampleDate1 = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await exampleDate1.click();
+      const exampleDate2 = await DSControlledDateRangePickerCO.getInRangeDayByIndex(2);
+      await exampleDate2.click();
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessage();
+      const feedbackMessage = await DSFormLayoutBlockItemCO.getFeedbackMessage();
+      const firstInput = await DSControlledDateRangePickerCO.getMonthInputByIndex(0);
+      await expect(firstInput).toHaveAttribute('aria-invalid', 'false');
+      await expect(errorMessage).not.toBeDisplayedInViewport();
+      await expect(feedbackMessage).toBeDisplayedInViewport();
+    });
+  });
+
+  describe('PUI-14863 - DSControlledDateRangePicker:: TabStops & Nav -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should tab and have first input focused', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const monthInput = await DSControlledDateRangePickerCO.getMonthInput();
+      await expect(monthInput).toBeFocused();
+    });
+    it('02: should move to the next input after populating the current one', async () => {
+      await type('10');
+      const dayInput = await DSControlledDateRangePickerCO.getDayInput();
+      await expect(dayInput).toBeFocused();
+    });
+    it('03: should tab to clearable button', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys([Key.Shift, Key.Tab]);
+      const clearableBtn = await DSControlledDateRangePickerCO.getClearableByIndex(0);
+      await expect(clearableBtn).toBeFocused();
+    });
+    it('04: should tab through next input to picker trigger', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const clearableBtn = await DSControlledDateRangePickerCO.getPickerBtn();
+      await expect(clearableBtn).toBeFocused();
+    });
+    it('05: should open trigger and have first navigation button focused', async () => {
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      const prevMonthBtn = await DSControlledDateRangePickerCO.getPrevMonthBtn();
+      const calendarLabel = await (await DSControlledDateRangePickerCO.getCalendarHeaderLabel()).getText();
+      await expect(calendarLabel).toEqual('September 2000');
+      await expect(prevMonthBtn).toBeFocused();
+    });
+    it('06: should tab through navigation buttons to last one', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const nextYearBtn = await DSControlledDateRangePickerCO.getNextYearBtn();
+      const calendarLabel = await (await DSControlledDateRangePickerCO.getCalendarHeaderLabel()).getText();
+      await expect(calendarLabel).toEqual('September 2001');
+      await expect(nextYearBtn).toBeFocused();
+    });
+    it('07: should tab and navigate using header controllers with KB', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Return);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Return);
+      const nextYearBtn = await DSControlledDateRangePickerCO.getNextMonthBtn();
+      const calendarLabel = await (await DSControlledDateRangePickerCO.getCalendarHeaderLabel()).getText();
+      await expect(calendarLabel).toEqual('October 2000');
+      await expect(nextYearBtn).toBeFocused();
+    });
+    it('08: should tab to calendar and have day focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const focusedDay = await DSControlledDateRangePickerCO.getFocusedDay();
+      await expect(focusedDay).toBeFocused();
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-range-picker/DSControlledDateRangePicker.visual.spec.js

@@ -0,0 +1,115 @@
+import { Key } from 'webdriverio';
+import DSControlledDateRangePickerCO from './DSControlledDateRangePickerCO';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9219 - DSControlledDateRangePicker:: Basic -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display contr. date range picker empty and closed', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-empty'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display contr. date range picker open and with 1 date selected', async () => {
+      await browser.eyesOpen();
+      const openDatePicker = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openDatePicker.click();
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await day.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-one-date'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display contr. date range picker open and with 2 dates selected', async () => {
+      await browser.eyesOpen();
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(20);
+      await day.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-two-date'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: should display contr. date range picker open and with long range end', async () => {
+      await browser.eyesOpen();
+      const nextMonthArrow = await DSControlledDateRangePickerCO.getNextMonthBtn();
+      await nextMonthArrow.click();
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await day.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-long-end'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: should display contr. date range picker open and with long range start', async () => {
+      await browser.eyesOpen();
+      const prevMonthArrow = await DSControlledDateRangePickerCO.getPrevMonthBtn();
+      await prevMonthArrow.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-long-start'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-14859 - DSControlledDateRangePicker:: Invalid selection -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.invalidSelection.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display invalid date range picker with closed calendar matching baseline', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-invalid-close'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display invalid date range picker with expanded calendar matching baseline', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-invalid-open'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-14858 - DSControlledDateRangePicker:: Disabled -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.disabled.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display disabled date range picker and matching baseline', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-disabled'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-14857 - DSControlledDateRangePicker:: Clearable  -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateRangePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display two clearable inputs. One populated, one empty', async () => {
+      const calendarTrigger = await DSControlledDateRangePickerCO.getPickerBtn();
+      await calendarTrigger.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await type('02032020');
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-clearable'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-date-range-picker/DSControlledDateRangePickerCO.js

@@ -1,10 +1,20 @@
 /* eslint-disable import/no-relative-packages */
 /* eslint-disable max-lines */
-import { PATH_E2E_CONTROLLEDFORM } from '../../../environments/storybook/paths';
+import { PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER } from '../../../environments/storybook/paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
 
 export default class DSControlledDateRangePickerCO extends PageObject {
-  static basic = new Urlbuilder(PATH_E2E_CONTROLLEDFORM, 'basic-date-range');
+  static basic = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'basic-test');
+
+  static clearable = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'clearable-test');
+
+  static invalidSelection = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'invalid-selection-test');
+
+  static fullFeatures = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'full-features-test');
+
+  static disabled = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'disabled-test');
+
+  static withValidation = new Urlbuilder(PATH_E2E_CONTROLLED_FORM_DATE_RANGE_PICKER, 'example-with-validation-test');
 
   // Story elements
 
@@ -12,6 +22,10 @@ export default class DSControlledDateRangePickerCO extends PageObject {
 
   static getPrevMonthBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-prev-month"]');
 
+  static getNextYearBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-next-year"]');
+
+  static getPrevYearBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-prev-year"]');
+
   // DateInput
   static getMonthInput = async () => $('[data-testid="ds-controlled-date-time-picker-month-input"]');
 
@@ -19,6 +33,20 @@ export default class DSControlledDateRangePickerCO extends PageObject {
 
   static getYearInput = async () => $('[data-testid="ds-controlled-date-time-picker-year-input"]');
 
+  static getMonthInputByIndex = async (index = 0) =>
+    $$('[data-testid="ds-controlled-date-time-picker-month-input"]')[index];
+
+  static getDayInputByIndex = async (index = 0) =>
+    $$('[data-testid="ds-controlled-date-time-picker-day-input"]')[index];
+
+  static getYearInputByIndex = async (index = 0) =>
+    $$('[data-testid="ds-controlled-date-time-picker-year-input"]')[index];
+
+  static getClearableBtns = async () => $$(`[data-testid="ds-controlled-date-time-picker-clear-btn"]`);
+
+  static getClearableByIndex = async (index = 0) =>
+    $$(`[data-testid="ds-controlled-date-time-picker-clear-btn"]`)[index];
+
   // TimeInput
   static getHourInput = async () => $('[data-testid="ds-controlled-date-time-picker-hour-input"]');
 
@@ -30,6 +58,9 @@ export default class DSControlledDateRangePickerCO extends PageObject {
 
   static getDayOnCalendarByIndex = async (index) => getElementByIndex(this.getDaysOnCalendar, index);
 
+  static getInRangeDayByIndex = async (index = 0) =>
+    $$('[data-testid="ds-controlled-date-time-picker-calendar-in-range-day"]')[index];
+
   // Picker
   static getPickerBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
 
@@ -44,7 +75,28 @@ export default class DSControlledDateRangePickerCO extends PageObject {
     return $(`[data-testid="ds-controlled-date-time-picker-timewheel-minute"]=${value}`);
   }
 
+  static async getRangeStartDay() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-start-range-day"]`);
+  }
+
+  static async getRangeEndDay() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-end-range-day"]`);
+  }
+
+  static async getFocusedDay() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-focused-day"]`);
+  }
+
   // Calendar
+
+  static async getDayOnCalendarWrapper() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-context-content-wrapper"]`);
+  }
+
+  static async getCalendarHeaderLabel() {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-header-label"]`);
+  }
+
   // Time Wheel
   // Screenshots
   static snapshotPath(example = 'basic') {

package/ds-controlled-form/ds-controlled-inputgroup/DSControlledInputGroupCO.js

@@ -72,6 +72,10 @@ export default class DSControlledInputGroupCO extends PageObject {
     return $$('[data-testid="combobox-option"]')[index];
   }
 
+  static async getComboboxWrapper() {
+    return $('[data-testid="combobox-controls-wrapper"]');
+  }
+
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('DSControlledInputGroup', example, 'ds-controlled-inputgroup');
   }

package/ds-controlled-form/ds-controlled-inputgroup/autocomplete/DSControlledInputGroup.autocomplete.axe-core.func.spec.js

@@ -39,6 +39,7 @@ if (
       await type('a');
       const menuList = await DSControlledInputGroupCO.getAutocompleteMenuList();
       await menuList.waitForDisplayed();
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const inputValue = await DSControlledInputGroupCO.getInputValue(
         'Luke Skywalker too long this text is super long',

package/ds-controlled-form/ds-controlled-inputgroup/combobox/DSControlledInputGroup.combobox.axe-core.func.spec.js

@@ -30,7 +30,7 @@ if (
       expect(result.length).toBe(0);
     });
     it('03: should pass axe-core scan without violations after select an option', async () => {
-      const input = await DSControlledInputGroupCO.getComboboxInput();
+      const input = await DSControlledInputGroupCO.getComboboxWrapper();
       await input.waitForDisplayed();
       await input.click();
       const menuList = await DSControlledInputGroupCO.getMenuList();

package/ds-controlled-form/ds-controlled-large-input-text/read-only/DSLargeInputText.read-only.axe-core.func.spec.js

@@ -13,7 +13,7 @@ if (
       const errorOnGo = await DSLargeInputTextCO.readOnlyURL.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('01: should pass axe-core scan without violations', async () => {
+    it('01: should have readOnly large text input and pass axe-core scan without violations', async () => {
       const input = await DSLargeInputTextCO.getInputByIndex(0);
       await input.waitForDisplayed();
       const result = await axeCoreCheck();