dimsum-e2e-tests 1.0.0-rc.1

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

@@ -0,0 +1,158 @@
+/* eslint-disable max-len */
+/* eslint-disable prettier/prettier */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { PaginationNavCO, RowCO, HeaderCO, CellCO } from '../components';
+import { type, tabStops } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7477 - DataTable, Pagination -Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.paginatedWithDetail.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have the previous page button disabled', async () => {
+      const prevPageBt = await PaginationNavCO.getPrevPageBt();
+      const disabled = await prevPageBt.getAttribute('aria-disabled');
+      await expect(disabled).toBe('true');
+    });
+    it('02: should expand the dropdown menu of the pages per component when clicking its button', async () => {
+      const elemsPerPage = await PaginationNavCO.getElemsPerPageMenu();
+      await elemsPerPage.click();
+      const elem = await PaginationNavCO.getDropDownMenu();
+      await expect(elem).toBeDisplayedInViewport();
+    });
+    it('03: should start with 10 elements on the DataTable', async () => {
+      const howManyElements = await (await RowCO.getRows()).length;
+      await expect(howManyElements).toBe(10);
+    });
+    it('04: should change the quantity of elements on the page to 25', async () => {
+      const row1 = await RowCO.getRowByIndex(0);
+      await row1.click();
+      await browser.keys(Key.PageDown);
+      const elemsPerPage = await PaginationNavCO.getElemsPerPageMenu();
+      await elemsPerPage.click();
+      const twentyfiveElemsPerPageOpt = await PaginationNavCO.getOpenMenuOptsByIndex(1);
+      await twentyfiveElemsPerPageOpt.click();
+      const howManyElements = await (await RowCO.getRows()).length;
+      await expect(howManyElements).toBe(25);
+    });
+    it('05: should activate segmented pagination when clicking on a header and get content range from the footer', async () => {
+      const chosenHeader = await HeaderCO.getHeaderCellByIndex(1); // name
+      await chosenHeader.click();
+      const segPagCont = await PaginationNavCO.getSegPagContent();
+      const segPagText = await segPagCont.getText();
+      await expect(segPagText).toEqual('Peter - Peter');
+    });
+    it('06: should navigate to another page', async () => {
+      const pageMenu = await PaginationNavCO.getPagesMenu();
+      await pageMenu.click();
+      const thirdPageOpt = await PaginationNavCO.getOpenMenuOptsByIndex(2);
+      await thirdPageOpt.click();
+      const firstCell = await CellCO.getRowCellByIndex(await RowCO.getRowByIndex(0), 0);
+      const content = await CellCO.getCellContent(firstCell);
+      await expect(content).toEqual('357');
+    });
+    it('07: should verify that the content on the datatable is within the ranged pagination', async () => {
+      const startRangeCell = await CellCO.getRowCellByIndex(await RowCO.getRowByIndex(0), 1);
+      const startRangecontent = await CellCO.getCellContent(startRangeCell);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      const finishRangeCell = await CellCO.getRowCellByIndex(await RowCO.getRowByIndex(24), 1);
+      const finishRangecontent = await CellCO.getCellContent(finishRangeCell);
+      const rawRange = await (await PaginationNavCO.getSegPagContent()).getText();
+      const arrayRange = await rawRange.split(' - ');
+      await expect(startRangecontent).toEqual(arrayRange[0]);
+      await expect(finishRangecontent).toEqual(arrayRange[1]);
+    });
+  });
+  describe('PUI-7479 - DataTable, Pagination - Func. Keyboard', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.paginatedWithDetail.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should be able to tab to the elems-per-page menu from the last row of the table', async () => {
+      const elemsPerPage = await PaginationNavCO.getElemsPerPageBtn();
+      const lastRow = await RowCO.getRowByIndex(9);
+      await lastRow.click();
+      await browser.keys(Key.Tab);
+      await expect(elemsPerPage).toBeFocused();
+    });
+    it('should have 10 elems-per-page opt selected', async () => {
+      const elemsPerPageMenu = await PaginationNavCO.getElemsPerPageMenu();
+      const elemsPerPage = await elemsPerPageMenu.getText();
+      await expect(elemsPerPage).toEqual('10 / page');
+    });
+    it('should expand DropDmenu', async () => {
+      await browser.keys(Key.Enter);
+      const elemsPerPageDDMenu = await PaginationNavCO.getDropDownMenu();
+      await expect(elemsPerPageDDMenu).toBeDisplayedInViewport();
+    });
+    it('should select 50 elems-per-page opt', async () => {
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Space);
+      const elemsPerPageMenu = await PaginationNavCO.getElemsPerPageMenu();
+      const elemsPerPage = await elemsPerPageMenu.getText();
+      await expect(elemsPerPage).toEqual('50 / page');
+    });
+    it('Should scroll to the last row and tab to get focus on elems-per-page', async () => {
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.PageDown);
+      await browser.keys(Key.PageDown);
+      await browser.keys(Key.PageDown);
+      await browser.keys(Key.PageDown);
+      await browser.keys(Key.PageDown);
+      const row50Aria = await RowCO.getRowAriaIndex(50);
+      await expect(row50Aria).toBeDisplayedInViewport();
+    });
+    it('should tab to the Pages Navigation Dropdown Menu', async () => {
+      if (browser.capabilities.browserName === 'Safari') {
+        await tabStops(26);
+      } else {
+        await tabStops(27);
+      }
+      const pagesNav = await PaginationNavCO.getPagesBtn();
+      await expect(pagesNav).toBeFocused();
+    });
+    it('should expand the Pages navigation', async () => {
+      await browser.keys(Key.Enter);
+      const openDDMenu = await PaginationNavCO.getDropDownMenu();
+      await expect(openDDMenu).toBeDisplayedInViewport();
+    });
+    it('should choose the desired page with the keyboard and get to that page', async () => {
+      await type('6');
+      await browser.keys(Key.Space);
+      const pages = await PaginationNavCO.getPagesMenu();
+      await expect(pages).toHaveTextContaining('6');
+    });
+  });
+  describe('PUI-9649 - DataTable, Pagination page scrolling - Func', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.perPageScrolling.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should scroll to paginator', async () => {
+      const paginator = await PaginationNavCO.getPaginationNav();
+      await expect(paginator).not.toBeDisplayedInViewport();
+      await paginator.scrollIntoView();
+      await expect(paginator).toBeDisplayedInViewport();
+    });
+    it('02: should not scroll to the first element on the page', async () => {
+      const elemsPerPage = await PaginationNavCO.getElemsPerPageMenu();
+      await elemsPerPage.click();
+      const menu = await PaginationNavCO.getDropDownMenu();
+      await menu.waitForDisplayed();
+      const fiftyElemsPerPageOpt = await PaginationNavCO.getOpenMenuOptsByIndex(2);
+      await fiftyElemsPerPageOpt.click();
+      const elementsPerPage = await PaginationNavCO.getElemsPerPageBtn();
+      const paginator = await PaginationNavCO.getPaginationNav();
+      await expect(elementsPerPage).toBeFocused();
+      await expect(paginator).toBeDisplayedInViewport();
+    });
+  });
+}

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

@@ -0,0 +1,46 @@
+/* eslint-disable max-len */
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO, PaginationNavCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7476 - DataTable, Pagination - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.paginatedWithDetail.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the first page of the DataTable-paginated, previous arrow disabled', async () => {
+      const checkSnap = await browser.checkSnapshot(await DSDataTableCO.snapshotPath('pagination-first-page-default'));
+      await expect(checkSnap).toEqual(0);
+    });
+    it('should display the opened dropdown menu for the elements-per-page', async () => {
+      await (await PaginationNavCO.getElemsPerPageMenu()).click();
+      const checkSnap = await browser.checkSnapshot(
+        await DSDataTableCO.snapshotPath('pagination-elems-per-page-opened'),
+      );
+      await expect(checkSnap).toEqual(0);
+    });
+    it('should display the opened dropdown menu for the pages-nav', async () => {
+      await (await PaginationNavCO.getPagesMenu()).click();
+      const checkSnap = await browser.checkSnapshot(DSDataTableCO.snapshotPath('pagination-pages-nav-opened'));
+      await expect(checkSnap).toEqual(0);
+    });
+    it('should display the segmented pagination mode', async () => {
+      await (await HeaderCO.getHeaderCellByIndex(0)).click();
+      const checkSnap = await browser.checkSnapshot(DSDataTableCO.snapshotPath('pagination-segmented-pag'));
+      await expect(checkSnap).toEqual(0);
+    });
+    it('should display the opened dropdown menu for the pages-nav segmented', async () => {
+      const pageMenu = await PaginationNavCO.getPagesMenu();
+      await pageMenu.click();
+      const checkSnap = await browser.checkSnapshot(DSDataTableCO.snapshotPath('pagination-segmented-pag-opened'));
+      await expect(checkSnap).toEqual(0);
+    });
+    it('should display any other page, prev arrow enabled', async () => {
+      const menuOpt3 = await PaginationNavCO.getOpenMenuOptsByIndex(4);
+      await menuOpt3.click();
+      const checkSnap = await browser.checkSnapshot(DSDataTableCO.snapshotPath('pagination-segmented-any-page'));
+      await expect(checkSnap).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,40 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, HeaderCO } from '../components';
+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-11456 - DataTable:: Resizable column - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.resizableColumnsWithFilters.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should not display blue border in columns headers', async () => {
+      const positionHeader = await HeaderCO.getHeaderCellByIndex(2);
+      await positionHeader.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11458 - DataTable, Column group + hiddenColumn + Resizable - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.groupedResizebleAndHidden.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should correctly render the datatable and the name and country columns shouldnt be visible', async () => {
+      const row = await RowCO.getRowByIndex(1);
+      await row.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,47 @@
+/* eslint-disable max-len */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO, FiltersCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10931 - DataTable:: Resizable column - Enter key', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.resizableColumnsWithFilters.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: focus should not jump to another element when Enter key is pressed', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await countryHeader.click();
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const resizableHandler = await HeaderCO.getResizeHandler(3);
+      await expect(resizableHandler).toBeFocused();
+    });
+  });
+  describe('PUI-11096 - DataTable:: Resizable column - focus after filter selection', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.resizableColumnsWithFilters.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: focus should be on resizable handle', async () => {
+      const positionHeader = await HeaderCO.getHeaderCellByIndex(2);
+      await positionHeader.click();
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const dropdownMenu = await FiltersCO.filterMultiSelectPopper.getPopper();
+      await dropdownMenu.waitForDisplayed();
+      // select an option
+      await browser.keys(Key.Return);
+      // close dropdown menu
+      await browser.keys(Key.Escape);
+      // navigate to resizable handler
+      await browser.keys(Key.Tab);
+      const resizableHandler = await HeaderCO.getResizeHandler(2);
+      await expect(resizableHandler).toBeFocused();
+    });
+  });
+}

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

@@ -0,0 +1,156 @@
+/* eslint-disable max-len */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8300 - DataTable:: Resizable column - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.resizableColumnsWithFilters.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should not display blue border in columns headers', async () => {
+      await browser.eyesOpen();
+      const checkSnap = await browser.eyesCheckSnapshot(await DSDataTableCO.snapshotPath('resizable-column'));
+      await expect(checkSnap).toEqual(0);
+    });
+  });
+  describe('PUI-8614 - DataTable, Column group + hiddenColumn + Resizable - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.groupedResizebleAndHidden.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should correctly render the datatable and the name and country columns shouldnt be visible', async () => {
+      await browser.eyesOpen();
+      const checkSnap = await browser.eyesCheckSnapshot(
+        await DSDataTableCO.snapshotPath('datatable-group-hidden-resize'),
+      );
+      await expect(checkSnap).toEqual(0);
+    });
+  });
+  describe('PUI-10920 - DataTable:: Resizable column - keyboard nav', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.resizableColumnsWithFilters.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should not display blue border in columns headers', async () => {
+      const positionHeader = await HeaderCO.getHeaderCellByIndex(2);
+      await positionHeader.click();
+      await browser.keys([Key.Return]);
+      await browser.keys([Key.Tab]);
+      await browser.keys([Key.Tab]);
+      const checkSnapshot = await browser.checkSnapshot(await DSDataTableCO.snapshotPath('resizable-handler-focused'));
+      await expect(checkSnapshot).toEqual(0);
+    });
+    it('02: resize position column - increase width - ArrowRight', async () => {
+      await browser.keys([Key.ArrowRight]);
+      await browser.keys([Key.ArrowRight]);
+      await browser.keys([Key.ArrowRight]);
+      await browser.keys([Key.ArrowRight]);
+      await browser.keys([Key.ArrowRight]);
+      await browser.keys([Key.ArrowRight]);
+      const checkSnapshot = await browser.checkSnapshot(
+        await DSDataTableCO.snapshotPath('resizable-position-column-incresed'),
+      );
+      await expect(checkSnapshot).toEqual(0);
+    });
+    it('03: resize country column - decrease width - ArrowLeft', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await countryHeader.click();
+      await browser.keys([Key.Return]);
+      await browser.keys([Key.Tab]);
+      await browser.keys(Key.ArrowLeft);
+      await browser.keys(Key.ArrowLeft);
+      await browser.keys(Key.ArrowLeft);
+      await browser.keys(Key.ArrowLeft);
+      await browser.keys(Key.ArrowLeft);
+      const checkSnapshot = await browser.checkSnapshot(
+        await DSDataTableCO.snapshotPath('resizable-country-column-decreased'),
+      );
+      await expect(checkSnapshot).toEqual(0);
+    });
+    it('04: resize position column - decrease width - Shift+ArrowLeft', async () => {
+      const positionHeader = await HeaderCO.getHeaderCellByIndex(2);
+      await positionHeader.click();
+      await browser.keys([Key.Return]);
+      await browser.keys([Key.Tab]);
+      await browser.keys([Key.Tab]);
+      await browser.keys([Key.Shift, Key.ArrowLeft]);
+      await browser.keys([Key.Shift, Key.ArrowLeft]);
+      await browser.keys([Key.Shift, Key.ArrowLeft]);
+      const checkSnapshot = await browser.checkSnapshot(
+        await DSDataTableCO.snapshotPath('resizable-position-column-decreased'),
+      );
+      await expect(checkSnapshot).toEqual(0);
+    });
+    it('05: resize country column - increase width - Shift+ArrowRigth', async () => {
+      const countryHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await countryHeader.click();
+      await browser.keys([Key.Return]);
+      await browser.keys([Key.Tab]);
+      await browser.keys([Key.Shift, Key.ArrowRight]);
+      await browser.keys([Key.Shift, Key.ArrowRight]);
+      await browser.keys([Key.Shift, Key.ArrowRight]);
+      const checkSnapshot = await browser.checkSnapshot(
+        await DSDataTableCO.snapshotPath('resizable-country-column-increased'),
+      );
+      await expect(checkSnapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10949 - DataTable, Resizable columns with filters and DnD - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.resizableColumnsWithFilters.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: menu width should not change after escape column drag action', async () => {
+      await browser.eyesOpen();
+      const positionColumn = await HeaderCO.getHeaderCellByIndex(2);
+      await positionColumn.click();
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Escape);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      const checkSnap = await browser.eyesCheckSnapshot(await DSDataTableCO.snapshotPath('datatable-filter-after-DnD'));
+      await expect(checkSnap).toEqual(0);
+    });
+  });
+  describe('PUI-11345 - DataTable, Resizable columns with constrains - Visual Test', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.resizableWithConstrains.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: the last column should be resized to display at a minimum height', async () => {
+      await browser.eyesOpen();
+      const dateRangeColumn = await HeaderCO.getHeaderCellByIndex(6);
+      await dateRangeColumn.click();
+      await browser.keys(Key.Return);
+      await browser.keys([Key.Shift, Key.Alt, Key.ArrowLeft]);
+      await browser.keys([Key.Shift, Key.Alt, Key.ArrowLeft]);
+      await browser.keys([Key.Shift, Key.Alt, Key.ArrowLeft]);
+      const checkSnap = await browser.eyesCheckSnapshot(
+        await DSDataTableCO.snapshotPath('datatable-resizable-with-constrains'),
+      );
+      await expect(checkSnap).toEqual(0);
+    });
+    it('02: the last column should be resized to display at a maximum height', async () => {
+      await browser.eyesOpen();
+      const dateRangeColumn = await HeaderCO.getHeaderCellByIndex(6);
+      await dateRangeColumn.click();
+      await browser.keys(Key.Return);
+      await browser.keys([Key.Shift, Key.Alt, Key.ArrowRight]);
+      await browser.keys([Key.Shift, Key.Alt, Key.ArrowRight]);
+      await browser.keys([Key.Shift, Key.Alt, Key.ArrowRight]);
+      await browser.keys([Key.Shift, Key.Alt, Key.ArrowRight]);
+      const checkSnap = await browser.eyesCheckSnapshot(
+        await DSDataTableCO.snapshotPath('datatable-resizable-with-constrains'),
+      );
+      await expect(checkSnap).toEqual(0);
+    });
+  });
+}

package/ds-data-table-async/row-variant/DSDataTable.row-styling.visual.spec.js

@@ -0,0 +1,62 @@
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO } from '../components';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6918 - DataTable, Row variants - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.rowVariants.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display the row banding properly', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('row-banding'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display the default rows properly', async () => {
+      await browser.eyesOpen();
+      const firstRowExpandButton = await RowCO.getRowExpandButtonByIndex(0);
+      await firstRowExpandButton.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('default-rows-expanded'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display a row with focus + selection', async () => {
+      await browser.eyesOpen();
+      const defaultRow = await RowCO.getRowByIndex(6);
+      await defaultRow.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('default-rows-focusandselected-row'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: should display the default rows one with hover other with focus', async () => {
+      await browser.eyesOpen();
+      const otherRow = await RowCO.getRowFocuseableByIndex(7);
+      await mouseOver(otherRow);
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('default-rows-interated-rows'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: should display a lower row with focus + selection', async () => {
+      await browser.eyesOpen();
+      const firstRowExpandButton = await RowCO.getRowExpandButtonByIndex(0);
+      await firstRowExpandButton.click();
+      const defaultRow = await RowCO.getRowByIndex(6);
+      await defaultRow.click();
+      expect(
+        await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('default-rows-focusandselected-row-bis')),
+      ).toEqual(0);
+    });
+    it('06: should display the default lower rows properly', async () => {
+      await browser.eyesOpen();
+      const otherRow = await RowCO.getRowByIndex(7);
+      await mouseOver(otherRow);
+      expect(await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('default-rows-interated-rows-bis'))).toEqual(0);
+    });
+    it('07: should display the compact rows properly', async () => {
+      await browser.eyesOpen();
+      const secondRowExpandButton = await RowCO.getRowExpandButtonByIndex(1);
+      await secondRowExpandButton.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('compact-rows'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,27 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import DSDataTableCO from '../DSDataTableCO';
+import { axeCoreCheck } from '../../helpers';
+import { RowCO } from '../components';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-11459 - DataTable, Row variants - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.rowVariants.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display the row variants  and pass axe-core scan', async () => {
+      const row = await RowCO.getRowByIndex(1);
+      await row.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,101 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, HeaderCO } from '../components';
+import { tabStops } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9605 - DataTable, Row group header, expand with keyboard', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.rowVariants.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: tab to 1st row group', async () => {
+      await tabStops(9);
+      const firstRow = await $$('[data-testid="data-table-row-header-content"]')[0];
+      await expect(firstRow).toBeFocused();
+    });
+    it('02: first Enter (drilldown)', async () => {
+      await browser.keys(Key.Return);
+      const firstRow = await $$('[data-testid="data-table-row-header-content"]')[0];
+      const arrowCollapsed = await RowCO.getRowExpandButtonByRow(firstRow);
+      await expect(arrowCollapsed).toBeFocused();
+    });
+    it('03: second Enter (expand)', async () => {
+      await browser.keys(Key.Return);
+      const firstRow = await $$('[data-testid="data-table-row-header-content"]')[0];
+      const arrowCollapsed = await RowCO.getRowExpandButtonByRow(firstRow);
+      const arrowIsExpanded = await RowCO.isExpanded(arrowCollapsed);
+      await expect(arrowIsExpanded).toBe('true');
+    });
+    it('04: third Enter (collapse)', async () => {
+      await browser.keys(Key.Return);
+      const firstRow = await $$('[data-testid="data-table-row-header-content"]')[0];
+      const arrowCollapsed = await RowCO.getRowExpandButtonByRow(firstRow);
+      const arrowIsExpanded = await RowCO.isExpanded(arrowCollapsed);
+      await expect(arrowIsExpanded).toBe('false');
+    });
+  });
+
+  describe('PUI-9604 - DataTable, Row group header expand/collapse, expand-all/collapse-all', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.rowVariants.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: Should expand a row group with click', async () => {
+      const firstRow = await $$('[data-testid="data-table-row-header-content"]')[0];
+      const expandBtn = await RowCO.getRowExpandButtonByRow(firstRow);
+      await expandBtn.click();
+      const expandBtnexpandBtnState = await RowCO.isExpanded(expandBtn);
+      await expect(expandBtnexpandBtnState).toBe('true');
+    });
+    it('02: Should expand another row group with click', async () => {
+      const secondRow = await $$('[data-testid="data-table-row-header-content"]')[1];
+      const expandBtn = await RowCO.getRowExpandButtonByRow(secondRow);
+      await expandBtn.click();
+      const expandBtnexpandBtnState = await RowCO.isExpanded(expandBtn);
+      await expect(expandBtnexpandBtnState).toBe('true');
+    });
+    it('03: Should collapse a row each group with click', async () => {
+      const firstRow = await $$('[data-testid="data-table-row-header-content"]')[0];
+      const expandBtn = await RowCO.getRowExpandButtonByRow(firstRow);
+      await expandBtn.click();
+      const secondRow = await $$('[data-testid="data-table-row-header-content"]')[1];
+      const secondRowExpandBtn = await RowCO.getRowExpandButtonByRow(secondRow);
+      await secondRowExpandBtn.click();
+      const isFirstExpanded = await RowCO.isExpanded(expandBtn);
+      const isSecondExpadned = await RowCO.isExpanded(secondRowExpandBtn);
+      await expect(isFirstExpanded).toBe('false');
+      await expect(isSecondExpadned).toBe('false');
+    });
+    it('04: Should expand all row groups clicking the expand all btn', async () => {
+      const expandAllBtn = await HeaderCO.getHeaderCellByIndex(0);
+      await expandAllBtn.click();
+      const firstRow = await $$('[data-testid="data-table-row-header-content"]')[0];
+      const expandBtn = await RowCO.getRowExpandButtonByRow(firstRow);
+      const isFirstExpanded = await RowCO.isExpanded(expandBtn);
+      const secondRow = await $$('[data-testid="data-table-row-header-content"]')[1];
+      const secondRowExpandBtn = await RowCO.getRowExpandButtonByRow(secondRow);
+      const isSecondExpadned = await RowCO.isExpanded(secondRowExpandBtn);
+      const rows = (await RowCO.getRows()).length;
+      await expect(rows).toBe(33);
+      await expect(isFirstExpanded).toBe('true');
+      await expect(isSecondExpadned).toBe('true');
+    });
+    it('05: Should collapse all row groups clicking the expand all btn', async () => {
+      const expandAllBtn = await HeaderCO.getHeaderCellByIndex(0);
+      await expandAllBtn.click();
+      const firstRow = await $$('[data-testid="data-table-row-header-content"]')[0];
+      const expandBtn = await RowCO.getRowExpandButtonByRow(firstRow);
+      const isFirstExpanded = await RowCO.isExpanded(expandBtn);
+      const secondRow = await $$('[data-testid="data-table-row-header-content"]')[1];
+      const secondRowExpandBtn = await RowCO.getRowExpandButtonByRow(secondRow);
+      const isSecondExpadned = await RowCO.isExpanded(secondRowExpandBtn);
+      const rows = (await RowCO.getRows()).length;
+      await expect(rows).toBe(13);
+      await expect(isFirstExpanded).toBe('false');
+      await expect(isSecondExpadned).toBe('false');
+    });
+  });
+}