dimsum-e2e-tests 1.0.0-rc.1

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

@@ -0,0 +1,315 @@
+/* eslint-disable max-lines */
+/* eslint-disable max-len */
+/* eslint-disable prettier/prettier */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { ExportCsvCO, FilterBarCO, FiltersCO, CellCO, RowCO, HeaderCO, OnRowClickCO } from '../components';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  if (browser.capabilities.browserName !== 'Safari') {
+    describe('PUI-7976 - DataTable, Export csv -Func.', async () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSDataTableCO.exportCsv.go();
+        if (errorOnGo) throw errorOnGo;
+        await DSDataTableCO.waitForDataTable();
+      });
+      it('should open the filter', async () => {
+        await FiltersCO.openFilterPopperByColumnName('position', 0);
+        const inputSingleSelect = await FiltersCO.filterSingleSelectPopper.getInput();
+        await expect(inputSingleSelect).toBeFocused();
+      });
+      it('Should interact the datatable and get the AllDataCSV correctly', async () => {
+        await type('Dev');
+        await browser.keys(Key.Enter);
+        const checkBox1 = await RowCO.getRowCheckBoxByIndex(2);
+        await checkBox1.click();
+        const checkBox2 = await RowCO.getRowCheckBoxByIndex(5);
+        await checkBox2.click();
+        const getAllBtn = await ExportCsvCO.getBtnAllDataCSV();
+        await getAllBtn.click();
+        const getAllTxt = await ExportCsvCO.getAllDataCSV();
+        await expect(getAllTxt).toHaveTextContaining(`"id","name","position","country","salary","singleDate","dateRange"
+"1","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","1/1/2020","1/1/2019"
+"2","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","2/2/2020","2/2/2019"
+"3","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","3/3/2020","3/3/2019"
+"4","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","4/4/2020","4/4/2019"
+"5","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","5/5/2020","5/5/2019"
+"6","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","6/6/2020","6/6/2019"
+"7","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","7/7/2020","7/7/2019"
+"8","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","8/8/2020","8/8/2019"
+"9","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","9/9/2020","9/9/2019"
+"10","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","10/10/2020","10/10/2019"
+"11","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","11/11/2020","11/11/2019"
+"12","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","12/12/2020","12/12/2019"
+"13","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","1/13/2020","1/13/2019"
+"14","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","2/14/2020","2/14/2019"
+"15","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","3/15/2020","3/15/2019"
+"16","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","4/16/2020","4/16/2019"
+"17","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","5/17/2020","5/17/2019"
+"18","Francisco 'the singer' de la vega","Designer || U.I. master","ARG","0,123.451235 !@#$%^&*() bitcoins","6/18/2020","6/18/2019"
+"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 () => {
+        const getSelectedBtn = await ExportCsvCO.getBtnSelectedDataCSV();
+        await getSelectedBtn.click();
+        const getSelectedTxt = await ExportCsvCO.getSelectedDataCSV();
+        await expect(getSelectedTxt)
+          .toHaveTextContaining(`"id","name","position","country","salary","singleDate","dateRange"
+"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 () => {
+        const getFilteredBtn = await ExportCsvCO.getBtnFilteredDataCSV();
+        await getFilteredBtn.click();
+        const getFilteredTxt = await ExportCsvCO.getFilteredDataCSV();
+        await expect(getFilteredTxt)
+          .toHaveTextContaining(`"id","name","position","country","salary","singleDate","dateRange"
+"1","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","1/1/2020","1/1/2019"
+"3","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","3/3/2020","3/3/2019"
+"5","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","5/5/2020","5/5/2019"
+"7","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","7/7/2020","7/7/2019"
+"9","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","9/9/2020","9/9/2019"
+"11","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","11/11/2020","11/11/2019"
+"13","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","1/13/2020","1/13/2019"
+"15","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","3/15/2020","3/15/2019"
+"17","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","5/17/2020","5/17/2019"
+"19","John ""lil finger"" doe","Developer/Coffe-maker, $_maker","","9856","7/19/2020","7/19/2019"`);
+      });
+    });
+  }
+}
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8056 - DataTable, Selectable columns -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectableColumns.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should select all columns when checking the header checkbox', async () => {
+      const writeAllCheckbox = await HeaderCO.getWriteAllCheckbox();
+      const readAllCheckbox = await HeaderCO.getReadAllCheckbox();
+      await writeAllCheckbox.click();
+      await readAllCheckbox.click();
+      const checkboxes = await DSDataTableCO.getCheckboxes();
+      const areChecked = await checkboxes.every((checkbox) => DSDataTableCO.isChecked(checkbox));
+      await expect(areChecked).toBeTruthy();
+    });
+    if (browser.capabilities.browserName !== 'Firefox') {
+      it('Should deselect a single row checkbox and the global checkbox should lose its checked state', async () => {
+        const checkbox = await RowCO.getCheckBoxByIndex(8);
+        await checkbox.click();
+        const writeAllCheckbox = await HeaderCO.getWriteAllCheckbox();
+        const readAllCheckbox = await HeaderCO.getReadAllCheckbox();
+        const checkboxChecked = await DSDataTableCO.isChecked(checkbox);
+        const readAllChecked = await readAllCheckbox.getAttribute('aria-checked');
+        const writeAllChecked = await DSDataTableCO.isChecked(writeAllCheckbox);
+        await expect(checkboxChecked).not.toBeTruthy();
+        await expect(readAllChecked).toBe('mixed');
+        await expect(writeAllChecked).toBeTruthy();
+      });
+    }
+    it('Should deselect the write global checkbox and unselect all the checkboxes below', async () => {
+      const writeAllCheckbox = await HeaderCO.getWriteAllCheckbox();
+      await writeAllCheckbox.click();
+      const checkbox9 = await RowCO.getCheckBoxByIndex(9);
+      const checkbox11 = await RowCO.getCheckBoxByIndex(11);
+      const checkbox15 = await RowCO.getCheckBoxByIndex(15);
+      const checkbox9Checked = await DSDataTableCO.isChecked(checkbox9);
+      const checkbox11Checked = await DSDataTableCO.isChecked(checkbox11);
+      const checkbox15Checked = await DSDataTableCO.isChecked(checkbox15);
+      await expect(checkbox9Checked).not.toBeTruthy();
+      await expect(checkbox11Checked).not.toBeTruthy();
+      await expect(checkbox15Checked).not.toBeTruthy();
+    });
+  });
+  describe('PUI-8441 - DataTable, OnRowClick -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.onRowClick.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should click the row and the row-click counter should equal 1', async () => {
+      const row = await RowCO.getRowByIndex(0);
+      const cell = await CellCO.getRowCellByIndex(row, 1);
+      await cell.click();
+      const counter = await OnRowClickCO.getCounter();
+      const counterValue = await counter.getText();
+      await expect(counterValue).toEqual('1');
+    });
+    it('Should click the checkbox and the row-click counter should equal 1', async () => {
+      const checkbox = await OnRowClickCO.getCheckboxByIndex(0);
+      await checkbox.click();
+      const counter = await OnRowClickCO.getCounter();
+      const counterValue = await counter.getText();
+      await expect(counterValue).toEqual('1');
+    });
+    it('Should click the toolbar and toolbar item and the row-click counter should equal 1', async () => {
+      const toolbar = await OnRowClickCO.getToolbarByIndex(1);
+      await toolbar.click();
+
+      const toolbarItem = await OnRowClickCO.getToolbarItemByIndex(1);
+      await toolbarItem.click();
+      const counter = await OnRowClickCO.getCounter();
+      const counterValue = await counter.getText();
+      await expect(counterValue).toEqual('1');
+    });
+    it('Should click the row and press spacebar and the row-click counter should equal 3', async () => {
+      const row = await RowCO.getRowByIndex(0);
+      const cell = await CellCO.getRowCellByIndex(row, 1);
+      await cell.click();
+      await browser.keys(Key.Space);
+      const counter = await OnRowClickCO.getCounter();
+      const counterValue = await counter.getText();
+      await expect(counterValue).toEqual('3');
+    });
+  });
+
+  describe('PUI-8472 - DataTable, Custom Textbox -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.customCellText.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should click and write on the custom textbox', async () => {
+      const textBox = await OnRowClickCO.getInputTextByIndex(0);
+      await textBox.click();
+      await type('Buenas tardes');
+      await expect(textBox).toBeFocused();
+    });
+    it('Should retrieve the text from the input and it should match what we have written before', async () => {
+      const textBox = await OnRowClickCO.getInputTextByIndex(0);
+      const textBoxText = await textBox.getAttribute('value');
+      await expect(textBoxText).toEqual('Buenas tardes');
+    });
+  });
+
+  if (browser.capabilities.browserName !== 'Safari') {
+    describe('PUI-8908 - DataTable, Clear filters with keyboard -Func.', async () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+        if (errorOnGo) throw errorOnGo;
+        await DSDataTableCO.waitForDataTable();
+      });
+      it('Should add and have two selected filters', async () => {
+        await FiltersCO.openFilterPopperByColumnName('name', 0);
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.Enter);
+        await FiltersCO.openFilterPopperByColumnName('id', 0);
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.Enter);
+        const pills = (await FilterBarCO.getAllPillCloseButtons()).length;
+        await expect(pills).toEqual(2);
+      });
+      it('Should remove all filter accesing the CLEAR ALL and pressing it with keyboard', async () => {
+        const firstHeader = await HeaderCO.getHeaderCellByIndex(0);
+        await firstHeader.click();
+        await browser.keys([Key.Shift, Key.Tab]);
+        await browser.keys(Key.Enter);
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.Space);
+        const pills = (await FilterBarCO.getAllPillCloseButtons()).length;
+        await expect(pills).toEqual(0);
+      });
+    });
+  }
+  describe('PUI-8974 - DataTable, Focus on filter close/cancel -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should get the focus on the elipsis button after removing a filter', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Enter);
+      const closePill = await FilterBarCO.getPillCloseButtonByIndex(0);
+      await closePill.click();
+      const elipsisBtn = await FilterBarCO.getFilterBarDropdownMenuButton();
+      await expect(elipsisBtn).toBeFocused();
+    });
+    it('Should get the focus on the filter trigger button after pressing ESC within filter menu', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await browser.keys(Key.Escape);
+      const headerCell = await HeaderCO.getHeaderCellByIndex(1);
+      const filterMenuTrigger = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(headerCell, 0);
+      await expect(filterMenuTrigger).toBeFocused();
+    });
+  });
+  describe('PUI-9108 - DataTable, Should not scroll up on filter menu trigger', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableTablesE2e.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should scroll to the third datatable', async () => {
+      const bottomTableHeaderCell = await HeaderCO.getHeaderCellByIndex(23);
+      const headerTrigger = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(bottomTableHeaderCell, 0);
+      await bottomTableHeaderCell.scrollIntoView();
+      await bottomTableHeaderCell.click();
+      await headerTrigger.click();
+      await expect(bottomTableHeaderCell).toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-9505 - DataTable, disabled rows and popper', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.disabledRowsAndPopper.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: tooltip should be displayed', async () => {
+      const button1 = await DSDataTableCO.getButtons(1);
+      await button1.click();
+      const tooltip = await DSDataTableCO.getPopoverContainer();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('02: only one tooltip should be displayed', async () => {
+      const button2 = await DSDataTableCO.getButtons(2);
+      await button2.click();
+      const tooltip = await DSDataTableCO.getPopoverContainer();
+      const tooltipCount = await DSDataTableCO.getPopoverContainers().length;
+      await expect(tooltip).toBeDisplayedInViewport();
+      await expect(tooltipCount).toBe(1);
+    });
+  });
+  describe('PUI-9986 - DataTable, filterbar button aria-label', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filteredColumnWithControlledFilterbar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: aria-label should be present', async () => {
+      const filterbarButton = await FilterBarCO.getFilterBarDropdownMenuButton();
+      await expect(filterbarButton).toHaveAttribute('aria-label', 'Filter bar addon');
+    });
+  });
+
+  describe('PUI-10204 - DataTable:: SkipTo', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skipLinkTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: SkipTo button should be focused after first tab', async () => {
+      const skipToBtn = await DSDataTableCO.getSkipToButton();
+      await browser.keys(Key.Tab);
+      await expect(skipToBtn).toBeFocused();
+    });
+    it('02: Next content should be focused after tabbing out of the SkipTo', async () => {
+      const firstCell = await HeaderCO.getHeaderCellByIndex(0);
+      await browser.keys(Key.Tab);
+      await expect(firstCell).toBeFocused();
+    });
+    it('03: SkipTo button should be focused after shift + tab from next component', async () => {
+      const skipToBtn = await DSDataTableCO.getSkipToButton();
+      await browser.keys([Key.Shift, Key.Tab]);
+      await expect(skipToBtn).toBeFocused();
+    });
+    it('04: Main content (below) should be focused after activating the skipTo with enter', async () => {
+      const mainContent = await DSDataTableCO.getNextContent();
+      await browser.keys(Key.Enter);
+      await expect(mainContent).toBeFocused();
+    });
+  });
+}

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

@@ -0,0 +1,226 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import TabsCO from '../../ds-tabs/DSTabsCO';
+import { ExportCsvCO, RowCO, OnRowClickCO, FiltersCO, FilterBarCO, HeaderCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7854 - DataTable, With  ComboBox - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.withCombobox.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display a datatable with combobox within (closed)', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-combo-closed'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a datatable with combobox within (opened)', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-combo-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a datatable with combobox within (option selected)', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Enter);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-combo-filled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8054 - DataTable, Selectable Sections - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectableSections.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display a datatable with selectable sections (closed)', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('datatable-selectableS-closed'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a datatable with selectable sections (one expanded)', async () => {
+      await browser.eyesOpen();
+      const firstSectionArrowHead = await RowCO.getArrowHeadByIndex(2);
+      await firstSectionArrowHead.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('datatable-selectableS-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a datatable with selectable sections (all checked)', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('datatable-selectableS-allchecked'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a datatable with selectable sections (all not checked)', async () => {
+      await browser.eyesOpen();
+      await browser.keys(Key.Space);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Space);
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSDataTableCO.snapshotPath('datatable-selectableS-allnotchecked'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a datatable with selectable sections (all expanded)', async () => {
+      await browser.eyesOpen();
+      const firstSectionArrowHead = await RowCO.getArrowHeadMixed();
+      await firstSectionArrowHead.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('datatable-selectableS-allexpanded'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8055 - DataTable, Group by column - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.groupByCol.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should group by id and show all items collapsed but one', async () => {
+      const groupByIdBtn = await ExportCsvCO.getButtonsByIndex(0);
+      await groupByIdBtn.click();
+      const itemExpand = await RowCO.getRowExpandButtonByIndex(2);
+      await itemExpand.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-groupBy-id'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should group by position and expand the first items group', async () => {
+      const groupByIdBtn = await ExportCsvCO.getButtonsByIndex(1);
+      await groupByIdBtn.click();
+      const itemExpand = await RowCO.getRowExpandButtonByIndex(0);
+      await itemExpand.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-groupBy-position1'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should group by position and expand the second items group', async () => {
+      const itemExpand = await RowCO.getRowExpandButtonByIndex(0);
+      await itemExpand.click();
+      const itemExpand2 = await RowCO.getRowExpandButtonByIndex(1);
+      await itemExpand2.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-groupBy-position2'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8471 - DataTable, Custom cell with datepicker -Visual.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.customWithDate.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should show datatable with date time picker (closed)', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-custom-closed-picker'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('Should show datatable with date time picker (open)', async () => {
+      const pickerTrigger = await OnRowClickCO.getPickerTrigger();
+      await pickerTrigger.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-custom-open-picker'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9383 - DataTable, Filterbar removed when no filters -Visual.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterbarTest.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should show datatable with filterbar', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      await browser.keys(Key.Return);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-filterbar-present'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('Should show datatable without filterbar after removing all filters, no space for it either', async () => {
+      const removePillBtn = await FilterBarCO.getPillCloseButton();
+      await removePillBtn.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-no-filterbar'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9502 - DataTable, sort with header groups - visual', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.sortWithHeaderGroups.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display a row selected after expand all and sort by Duration', async () => {
+      await browser.eyesOpen();
+      const expandAll = await HeaderCO.getHeaderExpandButton();
+      await expandAll.click();
+      const rowRadioBtn = await RowCO.getRowRadioButtonByIndex(3);
+      await rowRadioBtn.click();
+      const durationColumn = await HeaderCO.getHeaderCellByText('AMOUNT');
+      await durationColumn[0].click();
+      const snapshot = await browser.checkSnapshot(
+        DSDataTableCO.snapshotPath('datatable-sorted-with-header-group-desc'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display sorted ascending. Null values at last', async () => {
+      await browser.eyesOpen();
+      const durationColumn = await HeaderCO.getHeaderCellByText('AMOUNT');
+      await durationColumn[0].click();
+      const snapshot = await browser.checkSnapshot(
+        DSDataTableCO.snapshotPath('datatable-sorted-with-header-group-asc'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9504 - DataTable, Select multiple in a sticky column - visual', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectMultipleSticky.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display a row selected in a sticky column after scroll', async () => {
+      await browser.eyesOpen();
+      const checkbox2ndRow = await RowCO.getCheckBoxByIndex(2);
+      await checkbox2ndRow.click();
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-select-multiple-sticky'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9787 - DataTable - tabs integration - visual', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.pui9624IncompleteWheninsideTabs.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display datatable inside second tab', async () => {
+      await browser.eyesOpen();
+      const tab2 = await TabsCO.getTabsByIndex(1);
+      await tab2.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-inside-second-tab'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10205 - DataTable:: SkipTo -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skipLinkTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: SkipTo button should be focused after first tab', async () => {
+      const skipToBtn = await DSDataTableCO.getSkipToButton();
+      await browser.keys(Key.Tab);
+      await expect(skipToBtn).toBeFocused();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-skipto'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,29 @@
+import { PageObject } from '../../helpers';
+import { getElementByIndex } from '../helpers';
+
+export default class CellCO extends PageObject {
+  static getRowCellByIndex = async (row, index) =>
+    getElementByIndex(async () => row.$$('[data-testid="data-table-cell"]'), index);
+
+  static getCells = async () => $$('[data-testid="data-table-cell"]');
+
+  static getCellByIndex = async (index = 0) => $$('[data-testid="data-table-cell"]')[index];
+
+  static getCellContent = async (cell) => cell.$('div').getText();
+
+  static getCellFocuseableDiv = async (cell) => cell.$('div');
+
+  // Custom Cell
+
+  static getDateTimePickerCalendar() {
+    return $('[data-testid="ds-controlled-date-time-picker-calendar-context-content-wrapper"]');
+  }
+
+  static getYearInput() {
+    return $('[data-testid="ds-controlled-date-time-picker-year-input"]');
+  }
+
+  static getDateTimePickerBtn() {
+    return $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
+  }
+}

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

@@ -0,0 +1,44 @@
+/* eslint-disable max-len */
+/* eslint-disable prettier/prettier */
+import { PageObject } from '../../helpers';
+import { getElementByIndex } from '../helpers';
+
+export default class DateSwitcherCO extends PageObject {
+  static getRangeCheckbox = async () => $('[id="date-range-switcher-id-internal"]');
+
+  static getDateSwitcherDDMenu = async () => $('[data-testid="data-table-date-range"]');
+
+  static getLeftMMInputWhenAlone = async () => $('[data-testid="ds-controlled-date-time-picker-month-input"]');
+
+  static getMMInputs = async () => $$('[data-testid="ds-controlled-date-time-picker-month-input"]');
+
+  static getLeftMMInput = async () => getElementByIndex(this.getMMInputs, 0);
+
+  static getRightMMInput = async () => getElementByIndex(this.getMMInputs, 1);
+
+  static getCenterMenuText = async () =>
+    $('[data-testid="ds-controlled-date-time-picker-calendar-controller-wrapper"] h3');
+
+  static getNextAndPrevBts = async () =>
+    $$(
+      '[data-testid="ds-controlled-date-time-picker-calendar-controller-wrapper"] [class="em-ds-icon em-ds-icon--default"]',
+    );
+
+  static getPrevYearBt = async () => getElementByIndex(this.getNextAndPrevBts, 0);
+
+  static getPrevMonthBt = async () => getElementByIndex(this.getNextAndPrevBts, 1);
+
+  static getNextMonthBt = async () => getElementByIndex(this.getNextAndPrevBts, 2);
+
+  static getNextYearBt = async () => getElementByIndex(this.getNextAndPrevBts, 3);
+
+  static getCurrentMonthDays = async () => $$('[class="dayWrapper "]');
+
+  static getDayByIndex = async (index) => getElementByIndex(this.getCurrentMonthDays, index);
+
+  static getSelectedDay = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-selected-day"]');
+
+  static getFocusedDay = async () => $('[data-testid="ds-controlled-date-time-picker-calendar-selected-focused-day"]');
+
+  static getCheckboxLabel = async () => $('[data-testid="ds-checkbox-label"]');
+}

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

@@ -0,0 +1,22 @@
+import { PageObject } from '../../helpers';
+import { getElementByIndex } from '../helpers';
+
+export default class ExportCsvCO extends PageObject {
+  static getTexts = async () => $$('div > pre');
+
+  static getAllDataCSV = async () => getElementByIndex(this.getTexts, 2);
+
+  static getSelectedDataCSV = async () => getElementByIndex(this.getTexts, 3);
+
+  static getFilteredDataCSV = async () => getElementByIndex(this.getTexts, 4);
+
+  static getButtons = async () => $$('[data-testid="ds-button"]');
+
+  static getButtonsByIndex = async (index) => getElementByIndex(this.getButtons, index);
+
+  static getBtnAllDataCSV = async () => getElementByIndex(this.getButtons, 5);
+
+  static getBtnSelectedDataCSV = async () => getElementByIndex(this.getButtons, 6);
+
+  static getBtnFilteredDataCSV = async () => getElementByIndex(this.getButtons, 7);
+}