dimsum-e2e-tests 3.50.0-next.2 → 3.50.0-rc.2

package/ds-data-table-async/DSDataTableCO.js

@@ -188,6 +188,10 @@ export default class DataTableCO extends PageObject {
 
   static customCellRowAndHeaderTest = new Urlbuilder(PATH_DATA_TABLE, 'custom-cell-row-and-header');
 
+  static groupingWithHiddenColumnsTest = new Urlbuilder(PATH_E2E_DATATABLE, 'column-grouping-with-hidden-columns-test');
+
+  static pui15245 = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-15245');
+
   // SELECTORS
 
   static getTable = async () => $('[data-testid="data-table-table"]');
@@ -247,6 +251,10 @@ export default class DataTableCO extends PageObject {
     return $('button*=Toggle');
   }
 
+  static getButtonByLabel(label) {
+    return $(`button*=${label}`);
+  }
+
   static getOpenSlideBtn() {
     return $('button*=Open Slide');
   }

package/ds-data-table-async/basic/DSDataTable.basic.visual.spec.js

@@ -90,13 +90,13 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
-  describe('PUI-6983 - DataTable, Column header truncated  -visual', async () => {
+  describe('PUI-7041 - DataTable, Column header truncated  -visual', async () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataTableCO.sortByColumn.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
     });
-    it('Should click on country header and sort the rows descending by this column changing the headers icon', async () => {
+    it('Should click on name header and sort the rows ascending by this column changing the headers icon', async () => {
       const countryHeader = await HeaderCO.getHeaderCellByIndex(1);
       await countryHeader.click();
       await asyncMouseOver(countryHeader);

package/ds-data-table-async/basic/DSDataTable.usecases.func.spec.js

@@ -14,13 +14,14 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
         if (errorOnGo) throw errorOnGo;
         await DSDataTableCO.waitForDataTable();
       });
-      it('should open the filter', async () => {
+      it('01: should open the filter', async () => {
         await FiltersCO.openFilterPopperByColumnName('position', 0);
         const inputSingleSelect = await FiltersCO.getFilterSingleSelectInput();
         await expect(inputSingleSelect).toBeFocused();
       });
-      it('Should interact the datatable and get the AllDataCSV correctly', async () => {
+      it('02: should interact the datatable and get the AllDataCSV correctly', async () => {
         await type('Dev');
+        await browser.keys(Key.ArrowDown);
         await browser.keys(Key.Enter);
         const checkBox1 = await RowCO.getRowCheckBoxByIndex(2);
         await checkBox1.click();
@@ -51,7 +52,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
 "19","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","7/19/2020","7/19/2019"
 "20","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","8/20/2020","8/20/2019"`);
       });
-      it('Should have the datatable previously interacted and export the SelectedCSV', async () => {
+      it('03: should have the datatable previously interacted and export the SelectedCSV', async () => {
         const getSelectedBtn = await ExportCsvCO.getBtnSelectedDataCSV();
         await getSelectedBtn.click();
         const getSelectedTxt = await ExportCsvCO.getSelectedDataCSV();
@@ -60,7 +61,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
 "5","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","5/5/2020","5/5/2019"
 "11","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","11/11/2020","11/11/2019"`);
       });
-      it('Should have the datatable previously interacted and export the FilteredCSV', async () => {
+      it('04: should have the datatable previously interacted and export the FilteredCSV', async () => {
         const getFilteredBtn = await ExportCsvCO.getBtnFilteredDataCSV();
         await getFilteredBtn.click();
         const getFilteredTxt = await ExportCsvCO.getFilteredDataCSV();

package/ds-data-table-async/basic/DSDataTable.usecases.visual.spec.js

@@ -134,6 +134,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('Should show datatable with filterbar', async () => {
       await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-filterbar-present'));
       await expect(snapshot).toEqual(0);

package/ds-data-table-async/components/FiltersCOextra.js

@@ -4,7 +4,7 @@ import { getElementByIndex, throttleTyping } from '../helpers';
 export default class FiltersCOextra extends PageObject {
   static filterCurrencyPopper = async () => $('[data-testid="data-table-currency-range"]');
   static async filterCurrencyInputs() {
-    return (await this.filterCurrencyPopper()).$$('[data-testid="ds-input-text-input"]');
+    return (await this.filterCurrencyPopper()).$$('[data-testid="ds-inputtext-input"]');
   }
   static async filterCurrencyLeftInput() {
     return getElementByIndex(await this.filterCurrencyInputs.bind(this), 0);

package/ds-data-table-async/components/HeaderCO.js

@@ -35,7 +35,7 @@ export default class HeaderCO extends PageObject {
 
   static getWriteAllCheckbox = async () => $('[id="write-all"]');
 
-  static getHeaderWrapperByIndex = async (index = 0) => $$('[data-testid="ds-data-table-header-cell-wrapper"]')[index];
+  static getHeaderWrapperByIndex = async (index = 0) => $$('[data-testid="ds-datatable-header-cell-wrapper"]')[index];
 
   static getResizeHandler = async (index) => $$('[data-testid="column"],[aria-label="Resize column"]')[index];
 

package/ds-data-table-async/components/OnRowClickCO.js

@@ -20,7 +20,7 @@ export default class OnRowClickCO extends PageObject {
 
   static getPickerTrigger = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
 
-  static getInputText = async () => $$('[data-testid="ds-input-text-input"]');
+  static getInputText = async () => $$('[data-testid="ds-inputtext-input"]');
 
   static getInputTextByIndex = async (index) => getElementByIndex(this.getInputText, index);
 }

package/ds-data-table-async/components/RowCO.js

@@ -43,6 +43,10 @@ export default class RowCO extends PageObject {
     return rows.$('[data-testid="data-table-checkbox"]');
   };
 
+  static getCheckboxById(id) {
+    return $(`[id*="checkbox-${id}"]`);
+  }
+
   static getRowExpandButtonByRow = async (row) => row.$('[data-testid="data-table-row-expand-cell"]');
 
   static getRowExpandButtonByIndex = async (index) => $$('[data-testid="data-table-row-expand-cell"]')[index];
@@ -71,4 +75,6 @@ export default class RowCO extends PageObject {
   static isExpanded = async (expandBtn) => expandBtn.getAttribute('aria-expanded');
 
   static getExpandedRow = async (index) => $$('[data-is-row-expanded="true"]')[index];
+
+  static getToolbarTrigger = async () => $('[data-testid="data-table-toolbar-trigger"');
 }

package/ds-data-table-async/dnd/DSDataTable.dnd.visual.spec.js

@@ -183,7 +183,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
     });
-    it('Should show expanded rows, row 1 below (not within) row 3', async () => {
+    it('Should show expanded rows, row 1 within row 3', async () => {
       const globalExpandBtn = await HeaderCO.getHeaderExpandButton();
       await globalExpandBtn.click();
       const secondRow = await RowCO.getRowByIndex(1);

package/ds-data-table-async/filters/DSDataTable.filters-creatable.func.spec.js

@@ -29,6 +29,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('03: should create a new option', async () => {
       await type('OHN');
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const pill = await FilterBarCO.getPillByText('JOHN');
       await expect(pill).toBeDisplayedInViewport();
@@ -38,6 +39,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await pillCloseBtn.click();
       await FiltersCO.openFilterPopperByColumnName('name', 0);
       await type('John');
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const results = await RowCO.getRows();
       const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
@@ -68,6 +70,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('03: should create a new option', async () => {
       await type('act');
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const pill = await FilterBarCO.getPillByText('React');
       const menuItems = await FiltersCO.getFilterMultiSelectMenuItems();
@@ -77,6 +80,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
     it('04: type a valid value', async () => {
       await type('React dev');
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const results = await RowCO.getRows();
       const filteredNames = await DSDataTableCO.getAllColumnResults(results, 2);

package/ds-data-table-async/filters/DSDataTable.text-filters.func.spec.js

@@ -35,6 +35,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(inputSingleSelect).toBeFocused();
     });
     it('05: should show only one value on the datatable and focus should be on filter button', async () => {
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Enter);
       const dataTableValues = (await RowCO.getRows()).length;
       const filterBtn = await HeaderCO.getFilterBtnByIndex(0);

package/ds-data-table-async/more/DSDataTable.extraactions.func.spec.js

@@ -0,0 +1,33 @@
+/* eslint-disable max-lines */
+/* eslint-disable max-len */
+/* eslint-disable prettier/prettier */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO } from '../components';
+import DSTypographyCO from '../../ds-typography/DSTypographyCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-15282 - DataTable: Dropdown extra dropdown actions - Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterEmpty.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should trigger extra dropdown menu actions with KB', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Return);
+      const counter = await (await DSTypographyCO.getTypography()).getText();
+      await expect(counter).toBe('Test Action triggered: 1');
+    });
+    it('02: should trigger extra dropdown menu actions with MOUSE', async () => {
+      const filterBarMenuBtn = await FilterBarCO.getFilterBarDropdownMenuButton();
+      await filterBarMenuBtn.click();
+      const clearFilters = await FilterBarCO.getFilterBarDropDownOption('Clear Filters');
+      await clearFilters.click();
+      const counter = await (await DSTypographyCO.getTypography()).getText();
+      await expect(counter).toBe('Test Action triggered: 2');
+    });
+  });
+}

package/ds-data-table-async/select/DSDataTable.select.axe-core.func.spec.js

@@ -67,6 +67,8 @@ if (
     });
     it('02: should scroll to last row and pass axe-core', async () => {
       await browser.keys(Key.End);
+      const lastRow = await RowCO.getRowAriaIndex(99);
+      await lastRow.waitForDisplayed();
       const result = await axeCoreCheck();
       await expect(result.length).toBe(0);
     });

package/ds-data-table-async/select/DSDataTable.select.func.spec.js

@@ -3,7 +3,7 @@
 import { Key } from 'webdriverio';
 import DSDataTableCO from '../DSDataTableCO';
 import { HeaderCO, RowCO, FiltersCO } from '../components';
-import { getRadioValue, pressShiftKey, releaseShiftKey } from '../helpers';
+import { getRadioValue } from '../helpers';
 import { tabStops, isChecked, type } from '../../helpers';
 import DSToggleCO from '../../ds-toggle/DSToggleCO';
 
@@ -52,91 +52,6 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(firstRowCheckboxButton).not.toBeClickable();
     });
   });
-  if (browser.capabilities.browserName !== 'Firefox') {
-    describe('PUI-7219 - DataTable, Row selection with shift + click', () => {
-      before('loading page', async () => {
-        const errorOnGo = await DSDataTableCO.multiSelect.go();
-        if (errorOnGo) throw errorOnGo;
-        await DSDataTableCO.waitForDataTable();
-      });
-      it('should select all the rows in the range except the ones that are disabled', async () => {
-        const checkbox1 = await RowCO.getRowCheckBoxByIndex(1);
-        const checkbox4 = await RowCO.getRowCheckBoxByIndex(4);
-        await pressShiftKey('Shift');
-        await browser.pause(200);
-        await checkbox1.click();
-        await checkbox4.click();
-        await browser.pause(200);
-        await releaseShiftKey('Shift');
-        const checkBoxRow1 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
-        const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
-        const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
-        const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
-        await expect(checkBoxRow1).toBe('true');
-        await expect(checkBoxRow2).toBe('true');
-        await expect(checkBoxRow3).toBe('false');
-        await expect(checkBoxRow4).toBe('true');
-      });
-      it('should unselect all the rows in the range', async () => {
-        const checkbox1 = await RowCO.getRowCheckBoxByIndex(1);
-        const checkbox4 = await RowCO.getRowCheckBoxByIndex(4);
-        await pressShiftKey('Shift');
-        await browser.pause(200);
-        await checkbox4.click();
-        await checkbox1.click();
-        await browser.pause(200);
-        await releaseShiftKey('Shift');
-        const checkBoxRow1 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
-        const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
-        const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
-        const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
-        await expect(checkBoxRow1).toBe('false');
-        await expect(checkBoxRow2).toBe('false');
-        await expect(checkBoxRow3).toBe('false');
-        await expect(checkBoxRow4).toBe('false');
-      });
-    });
-  }
-  describe('PUI-7220 - DataTable, Row selection with shift + space - keyboard', () => {
-    before('loading page', async () => {
-      const errorOnGo = await DSDataTableCO.multiSelect.go();
-      if (errorOnGo) throw errorOnGo;
-      await DSDataTableCO.waitForDataTable();
-    });
-    it('should select all the rows in the range except the ones that are disabled', async () => {
-      await tabStops(10);
-      await browser.keys(Key.Space);
-      await browser.pause(200);
-      await browser.keys([Key.Shift, Key.ArrowDown]);
-      await browser.keys([Key.Shift, Key.ArrowDown]);
-      await browser.keys([Key.Shift, Key.ArrowDown]);
-      await browser.keys([Key.Shift, Key.Space]);
-      const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
-      const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
-      const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
-      const checkBoxRow5 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
-      await expect(checkBoxRow2).toBe('true');
-      await expect(checkBoxRow3).toBe('true');
-      await expect(checkBoxRow4).toBe('false');
-      await expect(checkBoxRow5).toBe('true');
-    });
-    it('should unselect all the rows in the range', async () => {
-      await browser.keys(Key.Space);
-      await browser.pause(200);
-      await browser.keys([Key.Shift, Key.ArrowUp]);
-      await browser.keys([Key.Shift, Key.ArrowUp]);
-      await browser.keys([Key.Shift, Key.ArrowUp]);
-      await browser.keys([Key.Shift, Key.Space]);
-      const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
-      const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
-      const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
-      const checkBoxRow5 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
-      await expect(checkBoxRow2).toBe('false');
-      await expect(checkBoxRow3).toBe('false');
-      await expect(checkBoxRow4).toBe('false');
-      await expect(checkBoxRow5).toBe('false');
-    });
-  });
   describe('PUI-11233 - DataTable, Multi select disabled selection with uniqueRowAccessor', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataTableCO.multiSelectDisabledWithUniqueRowAccessor.go();
@@ -236,6 +151,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await rowCheckBox.click();
       await FiltersCO.openFilterPopperByColumnName('id', 0);
       await type('1');
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       const globalCheckbox = await (await HeaderCO.getHeaderSelectCheckBox()).getAttribute('aria-checked');
       const items = (await RowCO.getRows()).length;

package/ds-data-table-async/select/DSDataTable.select.shift.func.spec.js

@@ -0,0 +1,126 @@
+/* eslint-disable max-lines */
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO } from '../components';
+import { pressShiftKey, releaseShiftKey } from '../helpers';
+import { tabStops } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  if (browser.capabilities.browserName !== 'Firefox') {
+    describe('PUI-7219 - DataTable, Row selection with shift + click', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSDataTableCO.multiSelect.go();
+        if (errorOnGo) throw errorOnGo;
+        await DSDataTableCO.waitForDataTable();
+      });
+      it('01: should select all the rows in the range except the ones that are disabled', async () => {
+        const checkbox1 = await RowCO.getRowCheckBoxByIndex(1);
+        const checkbox4 = await RowCO.getRowCheckBoxByIndex(4);
+        await pressShiftKey('Shift');
+        await browser.pause(200);
+        await checkbox1.click();
+        await checkbox4.click();
+        await browser.pause(200);
+        await releaseShiftKey('Shift');
+        const checkBoxRow1 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
+        const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
+        const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+        const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
+        await expect(checkBoxRow1).toBe('true');
+        await expect(checkBoxRow2).toBe('true');
+        await expect(checkBoxRow3).toBe('false');
+        await expect(checkBoxRow4).toBe('true');
+      });
+      it('02: should unselect all the rows in the range', async () => {
+        const checkbox1 = await RowCO.getRowCheckBoxByIndex(1);
+        const checkbox4 = await RowCO.getRowCheckBoxByIndex(4);
+        await pressShiftKey('Shift');
+        await browser.pause(200);
+        await checkbox4.click();
+        await checkbox1.click();
+        await browser.pause(200);
+        await releaseShiftKey('Shift');
+        const checkBoxRow1 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
+        const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
+        const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+        const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
+        await expect(checkBoxRow1).toBe('false');
+        await expect(checkBoxRow2).toBe('false');
+        await expect(checkBoxRow3).toBe('false');
+        await expect(checkBoxRow4).toBe('false');
+      });
+      it('03: should select all the rows in the range from the begining to the middle of the table', async () => {
+        const checkbox1 = await RowCO.getRowCheckBoxByIndex(1);
+        await checkbox1.click();
+        await browser.pause(200);
+        await browser.keys(Key.PageDown);
+        await pressShiftKey('Shift');
+        const checkbox31 = await RowCO.getCheckboxById(31);
+        await checkbox31.click();
+        await browser.pause(200);
+        await releaseShiftKey('Shift');
+        const checkBoxRow11 = await (await RowCO.getCheckboxById(11)).getAttribute('aria-checked');
+        const checkBoxRow21 = await (await RowCO.getCheckboxById(21)).getAttribute('aria-checked');
+        const checkBoxRow31 = await (await RowCO.getCheckboxById(31)).getAttribute('aria-checked');
+        await expect(checkBoxRow11).toBe('true');
+        await expect(checkBoxRow21).toBe('true');
+        await expect(checkBoxRow31).toBe('true');
+      });
+      it('04: should select all the rows in the table', async () => {
+        await browser.keys(Key.End);
+        await pressShiftKey('Shift');
+        const checkbox100 = await RowCO.getCheckboxById(100);
+        await checkbox100.click();
+        await browser.pause(200);
+        await releaseShiftKey('Shift');
+        const checkBoxRow81 = await (await RowCO.getCheckboxById(81)).getAttribute('aria-checked');
+        const checkBoxRow91 = await (await RowCO.getCheckboxById(91)).getAttribute('aria-checked');
+        const checkBoxRow100 = await (await RowCO.getCheckboxById(100)).getAttribute('aria-checked');
+        await expect(checkBoxRow81).toBe('true');
+        await expect(checkBoxRow91).toBe('true');
+        await expect(checkBoxRow100).toBe('true');
+      });
+    });
+  }
+  describe('PUI-7220 - DataTable, Row selection with shift + space - keyboard', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelect.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should select all the rows in the range except the ones that are disabled', async () => {
+      await tabStops(10);
+      await browser.keys(Key.Space);
+      await browser.pause(200);
+      await browser.keys([Key.Shift, Key.ArrowDown]);
+      await browser.keys([Key.Shift, Key.ArrowDown]);
+      await browser.keys([Key.Shift, Key.ArrowDown]);
+      await browser.keys([Key.Shift, Key.Space]);
+      const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
+      const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
+      const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+      const checkBoxRow5 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
+      await expect(checkBoxRow2).toBe('true');
+      await expect(checkBoxRow3).toBe('true');
+      await expect(checkBoxRow4).toBe('false');
+      await expect(checkBoxRow5).toBe('true');
+    });
+    it('02: should unselect all the rows in the range', async () => {
+      await browser.keys(Key.Space);
+      await browser.pause(200);
+      await browser.keys([Key.Shift, Key.ArrowUp]);
+      await browser.keys([Key.Shift, Key.ArrowUp]);
+      await browser.keys([Key.Shift, Key.ArrowUp]);
+      await browser.keys([Key.Shift, Key.Space]);
+      const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
+      const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
+      const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+      const checkBoxRow5 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
+      await expect(checkBoxRow2).toBe('false');
+      await expect(checkBoxRow3).toBe('false');
+      await expect(checkBoxRow4).toBe('false');
+      await expect(checkBoxRow5).toBe('false');
+    });
+  });
+}

package/ds-data-table-async/toolbar/DSDataTable.Toolbar.visual.spec.js

@@ -31,4 +31,19 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
   });
+  describe('PUI-15362 - DataTable, Verify Scroll Behavior in DSDataTable -visual.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.pui15245.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('The row should remain fully visible and accessible', async () => {
+      await browser.eyesOpen();
+      const toolbar = await RowCO.getToolbarTrigger();
+      await toolbar.click();
+      await toolbar.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('datatable-scrollbar-behavior'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
 }

package/ds-data-table-async/vissibility/DSDataTable.vissibility.visual.spec.js

@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 /* eslint-disable max-len */
 import { Key } from 'webdriverio';
 import DSDataTableCO from '../DSDataTableCO';
@@ -60,22 +61,60 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     it('should display two row of pills and the pagination correctly rendered', async () => {
       await browser.eyesOpen();
       await FiltersCO.openFilterPopperByColumnName('id', 0);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       await FiltersCO.openFilterPopperByColumnName('position', 0);
       await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Return);
       const checkSnap = await browser.eyesCheckSnapshot(await DSDataTableCO.snapshotPath('datatable-double-pill-row'));
       await expect(checkSnap).toEqual(0);
     });
   });
+  describe('PUI-15277 - DataTable, Grouping with Hidden Columns  - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.groupingWithHiddenColumnsTest.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display all columns', async () => {
+      await browser.eyesOpen();
+      const checkSnap = await browser.eyesCheckSnapshot(await DSDataTableCO.snapshotPath('all-columns-displayed'));
+      await expect(checkSnap).toEqual(0);
+    });
+    it('02: should hide Name column correctly', async () => {
+      await browser.eyesOpen();
+      const toggleBtn = await DSDataTableCO.getButtonByLabel('Name');
+      await toggleBtn.click();
+      const checkSnap = await browser.eyesCheckSnapshot(await DSDataTableCO.snapshotPath('name-column-hidden'));
+      await expect(checkSnap).toEqual(0);
+    });
+    it('03: should hide Date Range column correctly', async () => {
+      await browser.eyesOpen();
+      const toggleBtn = await DSDataTableCO.getButtonByLabel('Date Range');
+      await toggleBtn.click();
+      const checkSnap = await browser.eyesCheckSnapshot(await DSDataTableCO.snapshotPath('date-range-column-hidden'));
+      await expect(checkSnap).toEqual(0);
+    });
+    it('04: should hide Info (group) column correctly', async () => {
+      await browser.eyesOpen();
+      const toggleBtn = await DSDataTableCO.getButtonByLabel('Info');
+      await toggleBtn.click();
+      const checkSnap = await browser.eyesCheckSnapshot(await DSDataTableCO.snapshotPath('info-column-hidden'));
+      await expect(checkSnap).toEqual(0);
+    });
+  });
 }