dimsum-e2e-tests 3.22.0-next.36

package/ds-controlled-form/ds-controlled-checkbox/Mixed/DSControlledCheckbox.axe-core.mixed.func.spec.js

@@ -0,0 +1,42 @@
+/* eslint-disable max-lines */
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+import { axeCoreCheck, mouseOver } from '../../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-10622 - [ControlledCheckbox] Mixed: Axe Core Accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.mixed.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate checkbox accessibility with axe-core', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await checkbox.waitForExist();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await mouseOver(checkbox);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('04: Evaluate checkbox accessibility with axe-core (clicked)', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await checkbox.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/Mixed/DSControlledCheckbox.mixed.func.spec.js

@@ -0,0 +1,89 @@
+/* eslint-disable max-lines */
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName !== 'Firefox'
+) {
+  describe('PUI-8282 - DSControlledCheckbox:: mixed states', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.mixed.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should have custom data-testid for group container', async () => {
+      const checkboxGroup = await DSControlledCheckboxCO.getCheckboxGroup();
+      await expect(checkboxGroup).toBeDisplayed();
+    });
+    it('should check all the checkboxes when checking the global one', async () => {
+      const globalCheckbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await globalCheckbox.click();
+      const checkedCheckbox = await DSControlledCheckboxCO.isChecked(globalCheckbox);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkedCheckbox2 = await DSControlledCheckboxCO.isChecked(checkbox2);
+      const checkbox3 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      const checkedCheckbox3 = await DSControlledCheckboxCO.isChecked(checkbox3);
+      await expect(checkedCheckbox).toBe(true);
+      await expect(checkedCheckbox2).toBe(true);
+      await expect(checkedCheckbox3).toBe(true);
+    });
+    it('should uncheck all the checkboxes when unchecking the global one', async () => {
+      const globalCheckbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await globalCheckbox.click();
+      await globalCheckbox.click();
+      const checkedCheckbox = await DSControlledCheckboxCO.isChecked(globalCheckbox);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkedCheckbox2 = await DSControlledCheckboxCO.isChecked(checkbox2);
+      const checkbox3 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      const checkedCheckbox3 = await DSControlledCheckboxCO.isChecked(checkbox3);
+      await expect(checkedCheckbox).toBe(false);
+      await expect(checkedCheckbox2).toBe(false);
+      await expect(checkedCheckbox3).toBe(false);
+    });
+    it('should check the global checkbox when checking all the others', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await checkbox.click();
+      const checkedCheckbox = await DSControlledCheckboxCO.isChecked(checkbox);
+      await expect(checkedCheckbox).toBe(true);
+    });
+    it('should uncheck the global checkbox when unchecking all the others', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      await checkbox.click();
+      const checkedCheckbox = await DSControlledCheckboxCO.isChecked(checkbox);
+      await expect(checkedCheckbox).toBe(false);
+    });
+  });
+  describe('PUI-8649 - DSControlledCheckbox:: Keyboard behavior global checkbox', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.mixed.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should check all the checkboxes when checking the global one', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const globalCheckbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      const checkedCheckbox = await DSControlledCheckboxCO.isChecked(globalCheckbox);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkedCheckbox2 = await DSControlledCheckboxCO.isChecked(checkbox2);
+      const checkbox3 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      const checkedCheckbox3 = await DSControlledCheckboxCO.isChecked(checkbox3);
+      await expect(checkedCheckbox).toBe(true);
+      await expect(checkedCheckbox2).toBe(true);
+      await expect(checkedCheckbox3).toBe(true);
+    });
+    it('should uncheck all the checkboxes when unchecking the global one', async () => {
+      await browser.keys(Key.Space);
+      const globalCheckbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      const checkedCheckbox = await DSControlledCheckboxCO.isChecked(globalCheckbox);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkedCheckbox2 = await DSControlledCheckboxCO.isChecked(checkbox2);
+      const checkbox3 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      const checkedCheckbox3 = await DSControlledCheckboxCO.isChecked(checkbox3);
+      await expect(checkedCheckbox).toBe(false);
+      await expect(checkedCheckbox2).toBe(false);
+      await expect(checkedCheckbox3).toBe(false);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/Mixed/DSControlledCheckbox.mixed.visual.spec.js

@@ -0,0 +1,20 @@
+import { mouseOver } from '../../../helpers';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7100 - DSControlledCheckbox - Visual Test - mixed', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.mixed.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display checkbox mixed styles correctly', async () => {
+      const checkbox1 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await checkbox1.click();
+      await checkbox1.click();
+      await mouseOver(checkbox2);
+      const snapshot = await browser.checkSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-mixed'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/ReadOnly/DSControlledCheckbox.axe-core.read-only.func.spec.js

@@ -0,0 +1,34 @@
+import { Key } from 'webdriverio';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+import { axeCoreCheck, mouseOver } from '../../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-10623 - [ControlledCheckbox] ReadOnly: Axe Core Accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate checkbox accessibility with axe-core', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await checkbox.waitForExist();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await mouseOver(checkbox);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/ReadOnly/DSControlledCheckbox.read-only.func.spec.js

@@ -0,0 +1,60 @@
+import { Key } from 'webdriverio';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10740 - DSControlledCheckbox - Visual Test - readOnly', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.readOnlyOnChange.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should click the global checkbox and dont change the state of any', async () => {
+      const checkbox0 = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await checkbox0.click();
+      const checkbox1 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      const checkedCheckbox0 = await DSControlledCheckboxCO.isChecked(checkbox0);
+      const checkedCheckbox1 = await DSControlledCheckboxCO.isChecked(checkbox1);
+      const checkedCheckbox2 = await DSControlledCheckboxCO.isChecked(checkbox2);
+      await expect(checkedCheckbox0).toEqual(true);
+      await expect(checkedCheckbox1).toEqual(true);
+      await expect(checkedCheckbox2).toEqual(false);
+    });
+    it('02: should Enter on the global checkbox and dont change any checkbox state', async () => {
+      await browser.keys(Key.Enter);
+      const checkbox0 = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      const checkbox1 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      const checkedCheckbox0 = await DSControlledCheckboxCO.isChecked(checkbox0);
+      const checkedCheckbox1 = await DSControlledCheckboxCO.isChecked(checkbox1);
+      const checkedCheckbox2 = await DSControlledCheckboxCO.isChecked(checkbox2);
+      await expect(checkedCheckbox0).toEqual(true);
+      await expect(checkedCheckbox1).toEqual(true);
+      await expect(checkedCheckbox2).toEqual(false);
+    });
+    it('03: should click a regular checked checkbox and dont change its state', async () => {
+      const checkbox1 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      await checkbox1.click();
+      const checkedCheckbox1 = await DSControlledCheckboxCO.isChecked(checkbox1);
+      await expect(checkedCheckbox1).toEqual(true);
+    });
+    it('04: should Enter on a regular checkbed checkbox and dont change its state', async () => {
+      await browser.keys(Key.Enter);
+      const checkbox1 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkedCheckbox1 = await DSControlledCheckboxCO.isChecked(checkbox1);
+      await expect(checkedCheckbox1).toEqual(true);
+    });
+    it('05: should Space on a regular unchecked checkbox and dont change its state', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      const checkedCheckbox2 = await DSControlledCheckboxCO.isChecked(checkbox2);
+      await expect(checkedCheckbox2).toEqual(false);
+    });
+    it('06: should click on a regular unchecked checkbox and dont change its state', async () => {
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await checkbox2.click();
+      const checkedCheckbox2 = await DSControlledCheckboxCO.isChecked(checkbox2);
+      await expect(checkedCheckbox2).toEqual(false);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/ReadOnly/DSControlledCheckbox.read-only.visual.spec.js

@@ -0,0 +1,21 @@
+import { mouseOver } from '../../../helpers';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7103 - DSControlledCheckbox - Visual Test - readOnly', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.readOnly.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display checkbox readOnly styles correctly', async () => {
+      await browser.eyesOpen();
+      const checkbox1 = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      const checkbox2 = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await checkbox1.click();
+      await checkbox1.click();
+      await mouseOver(checkbox2);
+      const snapshot = await browser.eyesCheckSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-readOnly'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/WithTooltip/DSControlledCheckbox.axe-core.with-tooltip.func.spec.js

@@ -0,0 +1,22 @@
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+import { axeCoreCheck, mouseOver } from '../../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-10624 - [ControlledCheckbox] with Tooltip: Axe Core Accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.tooltipURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate checkbox accessibility with axe-core', async () => {
+      const checkboxLabel = await DSControlledCheckboxCO.getCheckboxLabelByIndex(4);
+      await mouseOver(checkboxLabel);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/WithTooltip/DSControlledCheckbox.with-tooltip.visual.spec.js

@@ -0,0 +1,20 @@
+import { mouseOver } from '../../../helpers';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9325 - DSControlledCheckbox - tooltip test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.tooltipURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display checkbox with a tooltip with long word correctly', async () => {
+      await browser.eyesOpen();
+      const checkboxLabel = await DSControlledCheckboxCO.getCheckboxLabelByIndex(4);
+      await mouseOver(checkboxLabel);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSControlledCheckboxCO.snapshotPath('checkbox-tooltip-longword'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/WrapLabel/DSControlledCheckbox.axe-core.wrap-label.func.spec.js

@@ -0,0 +1,22 @@
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+import { axeCoreCheck } from '../../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-10625 - [ControlledCheckbox] Wrap Label: Axe Core Accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.wrapLabel.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate checkbox accessibility with axe-core', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await checkbox.waitForExist();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/WrapLabel/DSControlledCheckbox.wrap-label.visual.spec.js

@@ -0,0 +1,17 @@
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9324 - DSControlledCheckbox - wrapLabel test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.wrapLabel.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display checkboxes with wrapped labels', async () => {
+      await browser.eyesOpen();
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      await checkbox.waitForExist();
+      const snapshot = await browser.eyesCheckSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-wrapped'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox-group/DSControlledCheckboxGroup.axe-core.func.spec.js

@@ -0,0 +1,41 @@
+import { Key } from 'webdriverio';
+import DSControlledCheckboxGroupCO from './DSControlledCheckboxGroupCO';
+import DSControlledCheckboxCO from '../ds-controlled-checkbox/DSControlledCheckboxCO';
+import { axeCoreCheck, mouseOver } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-10593 - [ControlledCheckbox] ShowCase: Axe Core Accessibility', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxGroupCO.layoutURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate checkbox accessibility with axe-core', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await checkbox.waitForExist();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(10);
+      await mouseOver(checkbox);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('04: Evaluate checkbox accessibility with axe-core (clicked)', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(10);
+      await checkbox.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox-group/DSControlledCheckboxGroup.func.spec.js

@@ -0,0 +1,36 @@
+import { Key } from 'webdriverio';
+import DSControlledCheckboxGroupCO from './DSControlledCheckboxGroupCO';
+import DSControlledCheckboxCO from '../ds-controlled-checkbox/DSControlledCheckboxCO';
+
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName !== 'Firefox' &&
+  browser.capabilities.browserName !== 'Safari'
+) {
+  describe('PUI-9327 - DSControlledCheckboxGroup:: Tab order', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxGroupCO.layoutURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should tab trough the first column to the last element of said column', async () => {
+      const lastCBLeft = await DSControlledCheckboxCO.getSomethingById('id3');
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await expect(lastCBLeft).toBeFocused();
+    });
+    it('should tab to the next column to the right after the last element of the first column', async () => {
+      const lastCBRight = await DSControlledCheckboxCO.getSomethingById('id3r');
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await expect(lastCBRight).toBeFocused();
+    });
+    it('should tab to the next group below after the last element of the first group', async () => {
+      await browser.keys(Key.Tab);
+      const firstCBBelow = await DSControlledCheckboxCO.getSomethingById('id1e');
+      await expect(firstCBBelow).toBeFocused();
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox-group/DSControlledCheckboxGroup.visual.spec.js

@@ -0,0 +1,18 @@
+import DSControlledCheckboxGroupCO from './DSControlledCheckboxGroupCO';
+import DSControlledCheckboxCO from '../ds-controlled-checkbox/DSControlledCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9326 - DSControlledCheckboxGroup - Layout test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxGroupCO.layoutURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display checkboxes with vertical and horiontal layout', async () => {
+      await browser.eyesOpen();
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(1);
+      await checkbox.waitForExist();
+      const snapshot = await browser.eyesCheckSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-layout'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox-group/DSControlledCheckboxGroupCO.js

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_E2E_CHECKBOX_GROUP } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class DSControlledCheckboxGroupCO extends PageObject {
+  static layoutURL = new Urlbuilder(PATH_E2E_CHECKBOX_GROUP, 'layout-test');
+
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSControlledCheckboxGroup', example, 'ds-controlled-checkbox-group');
+  }
+}

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

@@ -0,0 +1,54 @@
+import DSControlledDateRangePickerCO from './DSControlledDateRangePickerCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9219 - DSControlledDateRangePicker:: Basic visual test', () => {
+    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 () => {
+      const snapshot = await browser.checkSnapshot(
+        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 () => {
+      const openDatePicker = await DSControlledDateRangePickerCO.getPickerBtn();
+      await openDatePicker.click();
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await day.click();
+      const snapshot = await browser.checkSnapshot(
+        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 () => {
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(20);
+      await day.click();
+      const snapshot = await browser.checkSnapshot(
+        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 () => {
+      const nextMonthArrow = await DSControlledDateRangePickerCO.getNextMonthBtn();
+      await nextMonthArrow.click();
+      const day = await DSControlledDateRangePickerCO.getDayOnCalendarByIndex(10);
+      await day.click();
+      // eslint-disable-next-line max-len
+      const snapshot = await browser.checkSnapshot(
+        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 () => {
+      const prevMonthArrow = await DSControlledDateRangePickerCO.getPrevMonthBtn();
+      await prevMonthArrow.click();
+      // eslint-disable-next-line max-len
+      const snapshot = await browser.checkSnapshot(
+        DSControlledDateRangePickerCO.snapshotPath('date-range-picker-long-start'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,53 @@
+/* eslint-disable import/no-relative-packages */
+/* eslint-disable max-lines */
+import { PATH_E2E_CONTROLLEDFORM } 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');
+
+  // Story elements
+
+  static getNextMonthBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-next-month"]');
+
+  static getPrevMonthBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-prev-month"]');
+
+  // DateInput
+  static getMonthInput = async () => $('[data-testid="ds-controlled-date-time-picker-month-input"]');
+
+  static getDayInput = async () => $('[data-testid="ds-controlled-date-time-picker-day-input"]');
+
+  static getYearInput = async () => $('[data-testid="ds-controlled-date-time-picker-year-input"]');
+
+  // TimeInput
+  static getHourInput = async () => $('[data-testid="ds-controlled-date-time-picker-hour-input"]');
+
+  static getMinutesInput = async () => $('[data-testid="ds-controlled-date-time-picker-minute-input"]');
+
+  static getMeridiemInput = async () => $('[data-testid="ds-controlled-date-time-picker-meridiem-input"]');
+
+  static getDaysOnCalendar = async () => $$('[data-testid="ds-controlled-date-time-picker-calendar-day"]');
+
+  static getDayOnCalendarByIndex = async (index) => getElementByIndex(this.getDaysOnCalendar, index);
+
+  // Picker
+  static getPickerBtn = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
+
+  static getSelectedDay = async () =>
+    $('[data-testid="ds-controlled-date-time-picker-calendar-timewheel-trigger-icon"]');
+
+  static async getDayOnCalendar(value) {
+    return $(`[data-testid="ds-controlled-date-time-picker-calendar-day"]=${value}`);
+  }
+
+  static async getMinuteOnWheel(value) {
+    return $(`[data-testid="ds-controlled-date-time-picker-timewheel-minute"]=${value}`);
+  }
+
+  // Calendar
+  // Time Wheel
+  // Screenshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSControlledDateTimePicker', example, 'ds-controlled-date-time-picker');
+  }
+}

package/ds-controlled-form/ds-controlled-date-time-picker/DSControlledDateTimePicker.DateInput.visual.spec.js

@@ -0,0 +1,43 @@
+import DSControlledDateTimePickerCO from './DSControlledDateTimePickerCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7258 - DSControlledDateTimePicker:: DateInput: cleareable visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateTimePickerCO.clearable.go();
+      if (errorOnGo) throw errorOnGo;
+      await (await DSControlledDateTimePickerCO.getButton('date-inputs')).click();
+    });
+    it('01: should display date input only empty', async () => {
+      const snapshot = await browser.checkSnapshot(
+        DSControlledDateTimePickerCO.snapshotPath('date-input-clearable-empty'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display date input only empty', async () => {
+      const month = await DSControlledDateTimePickerCO.getMonthInput();
+      const day = await DSControlledDateTimePickerCO.getDayInput();
+      const year = await DSControlledDateTimePickerCO.getYearInput();
+      const clearBtn = await DSControlledDateTimePickerCO.getClearBtn();
+      await month.click();
+      await month.setValue('01');
+      await day.setValue('31');
+      await year.setValue('2021');
+      await clearBtn.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(
+        DSControlledDateTimePickerCO.snapshotPath('date-input-clearable-clear-btn'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-7368 - DSControlledDateTimePicker:: Disabled state showcase', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledDateTimePickerCO.disabledShowCase.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('all showcase should match correct disabled styles', async () => {
+      const snapshot = await browser.checkSnapshot(DSControlledDateTimePickerCO.snapshotPath('disabled-show-case'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}