dimsum-e2e-tests 1.0.0-rc.1

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

@@ -0,0 +1,255 @@
+/* eslint-disable import/no-relative-packages */
+/* eslint-disable max-lines */
+import { PATH_DATA_TABLE, PATH_E2E_DATATABLE } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+import { CellCO } from './components';
+
+export default class DataTableCO extends PageObject {
+  static dndRows = new Urlbuilder(PATH_DATA_TABLE, 'drag-and-drop-rows');
+
+  static dndColumns = new Urlbuilder(PATH_DATA_TABLE, 'drag-and-drop-columns');
+
+  static singleSelect = new Urlbuilder(PATH_DATA_TABLE, 'select-single');
+
+  static multiSelect = new Urlbuilder(PATH_DATA_TABLE, 'select-multiple');
+
+  static groupByCol = new Urlbuilder(PATH_DATA_TABLE, 'group-by-column');
+
+  static selectWithNoControl = new Urlbuilder(PATH_DATA_TABLE, 'select-without-column');
+
+  static basic = new Urlbuilder(PATH_DATA_TABLE, 'basic');
+
+  static columnLayout = new Urlbuilder(PATH_DATA_TABLE, 'basic-column-layout');
+
+  static rowVariants = new Urlbuilder(PATH_E2E_DATATABLE, 'row-variants-test');
+
+  static toolbarIntegration = new Urlbuilder(PATH_DATA_TABLE, 'toolbar-integration');
+
+  static expandable = new Urlbuilder(PATH_DATA_TABLE, 'expandable');
+
+  static filterableWithFilterBarAddon = new Urlbuilder(
+    PATH_E2E_DATATABLE,
+    'filtered-column-with-custom-filter-bar-addon-test',
+  );
+
+  static filterableWithFilterBar = new Urlbuilder(PATH_E2E_DATATABLE, 'filtered-column-with-filter-bar');
+
+  static masterDatailMultiLevel = new Urlbuilder(PATH_DATA_TABLE, 'master-detail-with-subrows-with-details');
+
+  static exportCsv = new Urlbuilder(PATH_DATA_TABLE, 'export-csv');
+
+  static filteredMultipleTables = new Urlbuilder(PATH_DATA_TABLE, 'filtered-multiple-tables');
+
+  static paginatedWithDetail = new Urlbuilder(PATH_DATA_TABLE, 'paginated-table-with-details');
+
+  static performance = new Urlbuilder(PATH_DATA_TABLE, 'performance');
+
+  static emptyState = new Urlbuilder(PATH_DATA_TABLE, 'empty-state');
+
+  static emptyStateCustomMsg = new Urlbuilder(PATH_DATA_TABLE, 'empty-state-customized-messages');
+
+  static emptyStateFullCustom = new Urlbuilder(PATH_DATA_TABLE, 'empty-state-full-custom');
+
+  static sortByColumn = new Urlbuilder(PATH_DATA_TABLE, 'sort-by-column');
+
+  static requiredColumns = new Urlbuilder(PATH_DATA_TABLE, 'required-columns');
+
+  static textWrapTruncColumn = new Urlbuilder(PATH_DATA_TABLE, 'text-wrap-truncate-column');
+
+  static editableCells = new Urlbuilder(PATH_DATA_TABLE, 'editable-cells');
+
+  static customCellRowHeader = new Urlbuilder(PATH_DATA_TABLE, 'custom-cell-row-and-header');
+
+  static onRowClick = new Urlbuilder(PATH_E2E_DATATABLE, 'on-row-click');
+
+  static customCellText = new Urlbuilder(PATH_E2E_DATATABLE, 'custom-cell-text');
+
+  static customWithDate = new Urlbuilder(PATH_E2E_DATATABLE, 'custom-render-w-date');
+
+  static dndDefectTest = new Urlbuilder(PATH_E2E_DATATABLE, 'drag-and-drop-rows-test');
+
+  static filterbarTest = new Urlbuilder(PATH_E2E_DATATABLE, 'filter-bar-test');
+
+  static filteredColumnWithControlledFilterbar = new Urlbuilder(
+    PATH_E2E_DATATABLE,
+    'filtered-column-with-controlled-filter-bar',
+  );
+
+  static responsive = new Urlbuilder(PATH_DATA_TABLE, 'responsive');
+
+  static DNDRestricted = new Urlbuilder(PATH_DATA_TABLE, 'drag-and-drop-rows-restricted');
+
+  // E2E FOLDER
+
+  static singleSelectDisabledSelectionUC = new Urlbuilder(PATH_E2E_DATATABLE, 'single-select-disabled-selection');
+
+  static multiSelectDisabledSelectionUC = new Urlbuilder(PATH_E2E_DATATABLE, 'multi-select-disabled-selection');
+
+  static expandableWithToolbarUC = new Urlbuilder(PATH_E2E_DATATABLE, 'expandable-with-toolbar');
+
+  static multiSelectEmpty = new Urlbuilder(PATH_E2E_DATATABLE, 'multi-select-empty');
+
+  static toolbarTriggers = new Urlbuilder(PATH_E2E_DATATABLE, 'toolbar-triggers-test');
+
+  static withCombobox = new Urlbuilder(PATH_E2E_DATATABLE, 'with-combobox');
+
+  static selectableSections = new Urlbuilder(PATH_E2E_DATATABLE, 'selectable-sections');
+
+  static selectableColumns = new Urlbuilder(PATH_E2E_DATATABLE, 'selectable-columns');
+
+  static skeletonPropTest = new Urlbuilder(PATH_E2E_DATATABLE, 'skeleton-prop-test');
+
+  static skeletonCellTest = new Urlbuilder(PATH_E2E_DATATABLE, 'skeleton-cells-test');
+
+  static skeletonRowTest = new Urlbuilder(PATH_E2E_DATATABLE, 'skeleton-rows-variant-test');
+
+  static toggleColumnVisibility = new Urlbuilder(PATH_E2E_DATATABLE, 'toggle-column-visibility');
+
+  static resizableColumnsWithFilters = new Urlbuilder(PATH_E2E_DATATABLE, 'resizable-columns-with-filters');
+
+  static expandableWithModalSlide = new Urlbuilder(PATH_E2E_DATATABLE, 'expandable-with-modal-slide');
+
+  static paginatedWithFilters = new Urlbuilder(PATH_E2E_DATATABLE, 'responsive-pagination-filterbar');
+
+  static groupedResizebleAndHidden = new Urlbuilder(PATH_E2E_DATATABLE, 'grouping-with-hidden-and-resizable-columns');
+
+  static emptyMaxWidth = new Urlbuilder(PATH_E2E_DATATABLE, 'empty-state-full-width');
+
+  static datatableInsideTabs = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-8529-datatable-inside-tabs');
+
+  static selectMultipleNoGlobalDisabled = new Urlbuilder(PATH_E2E_DATATABLE, 'select-multiple-no-global-disabled');
+
+  static selectMultipleNoGlobal = new Urlbuilder(PATH_DATA_TABLE, 'select-multiple-no-global');
+
+  static filteredCreatable = new Urlbuilder(PATH_DATA_TABLE, 'filtered-creatable-column-with-dropdown-menu-addon');
+
+  static filterableTablesE2e = new Urlbuilder(PATH_E2E_DATATABLE, 'filtered-multiple-tables-e-2-e');
+
+  static disabledRowsAndPopper = new Urlbuilder(PATH_E2E_DATATABLE, 'disabled-rows-and-popper');
+
+  static sortWithHeaderGroups = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-9362-sort-with-header-groups');
+
+  static selectMultipleSticky = new Urlbuilder(PATH_DATA_TABLE, 'select-multiple-sticky');
+
+  static perPageScrolling = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-9545-per-page-scrolling');
+
+  static DndColumnsFixedWidth = new Urlbuilder(PATH_E2E_DATATABLE, 'dnd-columns-fixed-width');
+
+  static pui9624IncompleteWheninsideTabs = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-9624-incomplete-when-inside-tabs');
+
+  static truncatedWithExpandable = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-9690-truncated-with-expandable');
+
+  static skipLinkTest = new Urlbuilder(PATH_E2E_DATATABLE, 'skip-link-test');
+
+  static filterInsideDialog = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-10042-datatable-inside-dialog-filter-scroll');
+
+  static emptyStateNoHeight = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-10761-empty-state-no-height');
+
+  static filteredColumnWithCustomFilterBarAddon = new Urlbuilder(
+    PATH_DATA_TABLE,
+    'filtered-column-with-custom-filter-bar-addon',
+  );
+
+  static multiSelectDisabledWithUniqueRowAccessor = new Urlbuilder(
+    PATH_E2E_DATATABLE,
+    'multi-select-disabled-selection-with-unique-row-accessor',
+  );
+
+  static filterEmpty = new Urlbuilder(PATH_E2E_DATATABLE, 'filter-empty');
+
+  static resizableWithConstrains = new Urlbuilder(PATH_E2E_DATATABLE, 'pui-8896-resizable-with-constrains');
+
+  static skeletonCellTestFast = new Urlbuilder(PATH_E2E_DATATABLE, 'skeleton-cells-fast-test');
+
+  static requiredColumnsMulti = new Urlbuilder(PATH_E2E_DATATABLE, 'required-columns-multi');
+
+  // SELECTORS
+
+  static getTable = async () => $('[data-testid="data-table-table"]');
+
+  static waitForDataTable = async () => {
+    const table = await this.getTable();
+    await table.waitForDisplayed({
+      timeout: 2000,
+    });
+  };
+
+  static dTID = {
+    CHANGE_ORDER_BUTTON: 'change-order-button',
+    SELECT_0_BUTTON: 'select-0-button',
+    SELECT_1_BUTTON: 'select-1-button',
+  };
+
+  static getElementByDataTestid = async (dTID) => $(`[data-testid="${dTID}"]`);
+
+  static getAllColumnResults = async (results, columnIndex) =>
+    Promise.all(results.map(async (result) => (await CellCO.getRowCellByIndex(result, columnIndex)).getText()));
+
+  static type = async (chars = '1234567890') => {
+    const numbers = await [...chars];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const char of numbers) {
+      // https://github.com/webdriverio/webdriverio/issues/5092
+      // using keys char by char results in correct order
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(char);
+    }
+  };
+
+  static getCheckboxes = async () => $$('[data-testid="ds-checkbox"]');
+
+  static async isChecked(checkBoxes) {
+    if (Array.isArray(checkBoxes)) {
+      const checks = await Promise.all(
+        checkBoxes.map(async (checkBox) => {
+          const checked = await checkBox.getProperty('checked');
+          return checked;
+        }),
+      );
+      return checks.every((checked) => checked === true);
+    }
+    const checked = await checkBoxes.getProperty('checked');
+    return checked === true;
+  }
+
+  static getToggleBtn() {
+    return $('button*=Toggle');
+  }
+
+  static getOpenSlideBtn() {
+    return $('button*=Open Slide');
+  }
+
+  static getSkeletonByIndex(index = 0) {
+    return $$('[data-testid="ds-skeleton-root"]')[index];
+  }
+
+  static getCloseSlideBtn() {
+    return $('[data-testid="modal-slider-header-close"]');
+  }
+
+  static getPopoverContainer() {
+    return $('[data-testid="popover-container"]');
+  }
+
+  static getPopoverContainers() {
+    return $$('[data-testid="popover-container"]');
+  }
+
+  static getButtons(index) {
+    return $$('[data-testid="ds-button"]')[index];
+  }
+
+  static async getSkipToButton() {
+    return $(`[id="storybook-root"] button`);
+  }
+
+  static async getNextContent() {
+    return $(`[id="next_content_id"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DataTable', example, 'ds-data-table');
+  }
+}

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

@@ -0,0 +1,120 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, HeaderCO, OnRowClickCO, ExportCsvCO } from '../components';
+import { axeCoreCheck, type } from '../../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-11422 - DataTable, Disabled -AxeCore', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectWithNoControl.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have a disabled row and its addons all with disabled state and pass axe-core scan', async () => {
+      const row = await RowCO.getRowFocuseableByIndex(3); // due to virtualization. Is actually the fourth row
+      await row.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11424 - DataTable, Sort column -AxeCore', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.paginatedWithDetail.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should sort and pass axe-core scan after sorting ', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await countryHeader.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11425 - DataTable:: SkipTo', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skipLinkTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: SkipTo button should be present and pass axe-core scan', async () => {
+      const skipToBtn = await DSDataTableCO.getSkipToButton();
+      await skipToBtn.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: SkipTo button should have been activated and still pass axe-core scan', async () => {
+      const mainContent = await DSDataTableCO.getNextContent();
+      await mainContent.waitForDisplayed();
+      await browser.keys(Key.Enter);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11426 - DataTable, Custom Cell Text -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.customCellText.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should click and write on the custom input and pass axe-core scan', async () => {
+      const textBox = await OnRowClickCO.getInputTextByIndex(0);
+      await textBox.click();
+      await type('Buenas tardes');
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11427 - DataTable, With  ComboBox - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.withCombobox.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: 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 result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display a datatable with combobox within (option selected)', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Enter);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11428 - 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('01: should group by id and show all items collapsed but one and pass axe-core scan', async () => {
+      const groupByIdBtn = await ExportCsvCO.getButtonsByIndex(0);
+      await groupByIdBtn.click();
+      const itemExpand = await RowCO.getRowExpandButtonByIndex(2);
+      await itemExpand.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should group by position and expand the first items group and pass axe-core scan', async () => {
+      const groupByIdBtn = await ExportCsvCO.getButtonsByIndex(1);
+      await groupByIdBtn.click();
+      const itemExpand = await RowCO.getRowExpandButtonByIndex(0);
+      await itemExpand.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,78 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+/* eslint-disable prettier/prettier */
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, HeaderCO, CellCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7271 - DataTable, Scroll mantain focus when scrolling down -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should focus on the first row and scroll down untill it is not displayed anymore', async () => {
+      const firstRow = await RowCO.getRowByIndex(0);
+      await firstRow.click();
+      const twentyFiveRow = await RowCO.getRowByIndex(24);
+      await twentyFiveRow.scrollIntoView();
+      const lastRow = await RowCO.getRowByIndex(40); // first 10 rows are removed when scrolling down
+      await lastRow.scrollIntoView();
+      await browser.pause(2000);
+      await expect(lastRow).toBeDisplayed();
+    });
+    it('Should scroll to up to the top and the focus should still be in the same row', async () => {
+      let topRow = await RowCO.getRowByIndex(0);
+      await topRow.scrollIntoView();
+      topRow = await RowCO.getRowByIndex(0);
+      await topRow.scrollIntoView();
+      topRow = await RowCO.getRowByIndex(0);
+      await topRow.scrollIntoView();
+      topRow = await RowCO.getRowByIndex(0); // action must be repited due to virtualization
+      await topRow.scrollIntoView();
+      await browser.pause(2000);
+      const firstRow = await RowCO.getRowFocuseableByIndex(0);
+      await expect(firstRow).toBeFocused();
+    });
+  });
+  describe('PUI-7801 - DataTable, Sort column -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.paginatedWithDetail.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should click on country header and sort the rows descending by this column ', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await countryHeader.click();
+      const firstRow = await RowCO.getRowByIndex(0);
+      const secondRow = await RowCO.getRowByIndex(1);
+      const firstRowCountryCell = await CellCO.getRowCellByIndex(firstRow, 3);
+      const secondRowCountryCell = await CellCO.getRowCellByIndex(secondRow, 3);
+      await expect(firstRowCountryCell).toHaveTextContaining('Uruguay');
+      await expect(secondRowCountryCell).toHaveTextContaining('Uruguay');
+    });
+    it('Should click on country header and sort the rows ascending by this column ', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await countryHeader.click();
+      const firstRow = await RowCO.getRowByIndex(0);
+      const secondRow = await RowCO.getRowByIndex(1);
+      const firstRowCountryCell = await CellCO.getRowCellByIndex(firstRow, 3);
+      const secondRowCountryCell = await CellCO.getRowCellByIndex(secondRow, 3);
+      await expect(firstRowCountryCell).toHaveTextContaining('Argentina');
+      await expect(secondRowCountryCell).toHaveTextContaining('Argentina');
+    });
+  });
+  describe('PUI-8381 - DataTable, Disabeld row -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectWithNoControl.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should have a disabled row and its addons all with disabled state', async () => {
+      const row = await RowCO.getRowFocuseableByIndex(3); // due to virtualization. Is actually the fourth row
+      await row.click();
+      await expect(row).toBeFocused();
+      await expect(row).toHaveAttr('aria-disabled', 'true');
+    });
+  });
+}

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

@@ -0,0 +1,144 @@
+/* eslint-disable no-await-in-loop */
+/* eslint-disable max-len */
+/* eslint-disable prettier/prettier */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, HeaderCO } from '../components';
+import { asyncMouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6982  - DataTable, Basic column layout -visual.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.columnLayout.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display basic column layout', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-basic-column-layout'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6988 - DataTable, Custom cell and row header -visual.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.customCellRowHeader.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the custom cell and row header', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-custom-cell-and-row'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-7139 - DataTable, Visual Layout Master Detail -visual.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.masterDatailMultiLevel.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the layout by default', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-master-detail-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the layout with a row expanded', async () => {
+      const expandBtn = await RowCO.getRowExpandButtonByIndex(2);
+      await expandBtn.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-master-detail-rowexpanded'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-7140 - DataTable, Visual Layout Master Detail subrows -visual.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.masterDatailMultiLevel.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the layout with a subbrow expanded and its child expanded', async () => {
+      const expandBtn = await RowCO.getRowExpandButtonByIndex(2);
+      await expandBtn.click();
+      const subrowExpandBtn = await RowCO.getRowExpandButtonByIndex(3);
+      await subrowExpandBtn.click();
+      const snapshot = await browser.checkSnapshot(
+        DSDataTableCO.snapshotPath('datatable-master-detail-subrowexpanded'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6983 - DataTable, Column header when sorting  -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 () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(2);
+      await countryHeader.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-column-header-descending'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('Should click on country header and sort the rows ascending by this column changing the headers icon', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(2);
+      await countryHeader.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-column-header-ascending'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6983 - 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 () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(1);
+      await countryHeader.click();
+      await asyncMouseOver(countryHeader);
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(1000);
+      const snapshot = await browser.checkSnapshot(
+        DSDataTableCO.snapshotPath('datatable-column-header-truncated-wtooltip'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-7039 - DataTable, Multi select empty  -visual', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelectEmpty.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should properly display the datatable multiselect empty ', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-multiselect-empty'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8052 - DataTable, Scroll with arrows  -visual', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.basic.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should scroll with arrows to the bottom of the datatable ', async () => {
+      const row = await RowCO.getRowByIndex(10);
+      await row.click();
+      // eslint-disable-next-line no-plusplus
+      for (let i = 0; i < 90; i++) await browser.keys(Key.ArrowDown);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-fullscrolled-down'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8380 - DataTable, Disabeld row -Visual', async () => {
+    before('loading page', async () => {
+      // eslint-disable-next-line max-lines
+      const errorOnGo = await DSDataTableCO.selectWithNoControl.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('Should have a disabled row and its addons all with disabled state', async () => {
+      const disabledRow = await RowCO.getRowByIndex(3);
+      await disabledRow.click();
+      await asyncMouseOver(disabledRow);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('datatable-disabled-row'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}