dimsum-e2e-tests 1.0.0-rc.1

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

@@ -0,0 +1,281 @@
+/* eslint-disable max-statements */
+/* eslint-env mocha */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { FilterBarCO, FiltersCO, HeaderCO, RowCO } from '../components';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6956 - DataTable, Filter, Keyboard navigation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBar.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should focus the filter bar elipsis button', async () => {
+      await browser.keys(Key.Tab);
+      const filterBarElipsisBt = await FilterBarCO.getFilterBarDropdownMenuButton();
+      await expect(filterBarElipsisBt).toBeFocused();
+    });
+    it('02: should focus ID column', async () => {
+      await browser.keys(Key.Tab);
+      const headerIdColumn = await HeaderCO.getHeaderCellByIndex(0);
+      await expect(headerIdColumn).toBeFocused();
+    });
+    it('03: should focus the filter icon', async () => {
+      await browser.keys(Key.Return);
+      const idColumnFilterIcon = await HeaderCO.getHeaderCellByIndex(0);
+      const iconIdColumn = await FiltersCO.getHeaderCellFilterButtonByHeaderCell(idColumnFilterIcon, 0);
+      await expect(iconIdColumn).toBeFocused();
+    });
+    it('04: should open the dropdown and focus the input', async () => {
+      await browser.keys(Key.Return);
+      const inputSingleSelect = await FiltersCO.filterSingleSelectPopper.getInput();
+      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.Enter);
+      const dataTableValues = (await RowCO.getRows()).length;
+      const filterBtn = await HeaderCO.getFilterBtnByIndex(0);
+      await expect(filterBtn).toBeFocused();
+      await expect(dataTableValues).toEqual(1);
+    });
+  });
+
+  describe('PUI-6958 - DataTable, Filter, Select filter', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBarAddon.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open the popup and focus the text input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const inputSingleSelect = await FiltersCO.filterSingleSelectPopper.getInput();
+      await expect(inputSingleSelect).toBeFocused();
+    });
+    it('02: should filter the menu items', async () => {
+      await type('JOHN');
+      const menuItems = await FiltersCO.filterSingleSelectPopper.getMenuItems();
+      const menuItemsCuant = menuItems.length;
+      const textFirstItem = await menuItems[0];
+      await expect(menuItemsCuant).toEqual(1);
+      await expect(textFirstItem).toHaveTextContaining('John');
+    });
+    it('03: all the results should contain the chosen option and focus return to filter button', async () => {
+      await (await FiltersCO.filterSingleSelectPopper.getMenuItem(0)).click();
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFiltered = filteredNames.every((name) => name.toLowerCase() === 'john');
+      const filterBtn = await HeaderCO.getFilterBtnByIndex(1);
+      await expect(filterBtn).toBeFocused();
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('04: should display only the option selected in the menu', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const menuItems = await FiltersCO.filterSingleSelectPopper.getMenuItems();
+      const menuItemsCuant = menuItems.length;
+      const textFirstItem = await menuItems[0];
+      await expect(menuItemsCuant).toEqual(1);
+      await expect(textFirstItem).toHaveTextContaining('John');
+    });
+    it('05: should show all options after removing the filter from filterbar', async () => {
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click();
+      const results = await RowCO.getRows();
+      const filteredNames = await DSDataTableCO.getAllColumnResults(results, 1);
+      const isFiltered = filteredNames.every((name) => name.toLowerCase() === 'john');
+      await expect(isFiltered).not.toBeTruthy();
+    });
+  });
+
+  describe('PUI-6959 - DataTable, Filter, Multi select filter', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBarAddon.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the popup and focus the text input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const inputMultiSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await expect(inputMultiSelect).toBeFocused();
+    });
+    it('should filter the menu items', async () => {
+      await type('react');
+      const menuItems = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      await menuItems[0].click();
+      const dataTableValues = menuItems.length;
+      const textFirstItem = await menuItems[0];
+      await expect(dataTableValues).toEqual(1);
+      await expect(textFirstItem).toHaveTextContaining('React');
+    });
+    it('all the records should contain the chosen option', async () => {
+      const filterMultiInput = await FiltersCO.filterMultiSelectPopper.getInput();
+      await FiltersCO.clearInput(filterMultiInput);
+      await type('vue');
+      const menuItems = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      await menuItems[0].click();
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredPositions.every(
+        (position) => position.toLowerCase().includes('react') || position.toLowerCase().includes('vue'),
+      );
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('should show all options after removing the filter from filterbar', async () => {
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click();
+      // click 0 again since the the pill in the index position 1 does not exist anymore
+      await (await FilterBarCO.getPillCloseButtonByIndex(0)).click();
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredPositions.every(
+        (position) => position.toLowerCase().includes('react') || position.toLowerCase().includes('vue'),
+      );
+      await expect(isFiltered).not.toBeTruthy();
+    });
+  });
+  describe('PUI-7748 - DataTable, Filter, multiple selections', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBarAddon.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should select an option from name column', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const options = await FiltersCO.filterSingleSelectPopper.getMenuItems();
+      const dropdownMenu = await FiltersCO.filterSingleSelectPopper.getPopper();
+      await options[1].waitForDisplayed();
+      await options[1].click();
+      const pill = await FilterBarCO.getPillByText('Francisco');
+      await expect(pill).toBeDisplayed();
+      await expect(dropdownMenu).not.toBeDisplayed();
+    });
+    it('should select two options from position column', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const inputMultiSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await inputMultiSelect.waitForDisplayed();
+      const options = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      await options[0].click();
+      await options[1].click();
+      const pill1 = await FilterBarCO.getPillByText('React');
+      const pill2 = await FilterBarCO.getPillByText('Full');
+      await expect(pill1).toBeDisplayed();
+      await expect(pill2).toBeDisplayed();
+    });
+    it('should remove correctly an option from position column', async () => {
+      const options = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      await options[1].click();
+      const pill = await FilterBarCO.getPillByText('Full');
+      await expect(pill).not.toBeDisplayed();
+    });
+    it('should remove correctly an option from name column', async () => {
+      const removePill = await FilterBarCO.getPillCloseButtonByName('Remove Francisco');
+      await removePill.click();
+      const pill = await FilterBarCO.getPillByText('Francisco');
+      await expect(pill).not.toBeDisplayed();
+    });
+  });
+  describe('PUI-6957 - DataTable, TextFilter, export CSV', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.exportCsv.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should open the popup and focus the text input', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const input = await $('[data-testid="combobox-input"]');
+      await expect(input).toBeFocused();
+    });
+    it('all the records should contain the chosen option', async () => {
+      await type('john');
+      const menuItems = await FiltersCO.filterSingleSelectPopper.getMenuItems();
+      await menuItems[0].click();
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredPositions.every((position) => position.toLowerCase().includes('john'));
+      await expect(isFiltered).toBeTruthy();
+    });
+    it('should show all options after removing the filter from filterbar', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const menuItems = await FiltersCO.filterSingleSelectPopper.getMenuItems();
+      await menuItems[0].click();
+      const results = await RowCO.getRows();
+      const filteredPositions = await DSDataTableCO.getAllColumnResults(results, 2);
+      const isFiltered = filteredPositions.every((position) => position.toLowerCase().includes('john'));
+      await expect(isFiltered).not.toBeTruthy();
+    });
+  });
+  describe('PUI-9216 - DataTable, Filter, toggle behavior', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBarAddon.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should open and close correctly the menu by clicking the search btn', async () => {
+      await FiltersCO.openFilterPopperByColumnName('name', 0);
+      const dropdownMenu = await FiltersCO.filterSingleSelectPopper.getPopper();
+      await dropdownMenu.waitForDisplayed();
+      await FiltersCO.clickHeaderFilterBtnByHeader('name', 0);
+      await expect(dropdownMenu).not.toBeDisplayed();
+    });
+    it('02: should open and close correctly the menu after selecting an option', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const dropdownMenu = await FiltersCO.filterMultiSelectPopper.getPopper();
+      const options = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      await dropdownMenu.waitForDisplayed();
+      await options[1].click();
+      await dropdownMenu.waitForDisplayed();
+      await FiltersCO.clickHeaderFilterBtnByHeader('position', 0);
+      await expect(dropdownMenu).not.toBeDisplayed();
+    });
+  });
+  describe('PUI-11840 - DataTable, Filterbar, remove all items from filterbar', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.filterableWithFilterBarAddon.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should select two options from position column and clear all - mouse nav', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const inputMultiSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await inputMultiSelect.waitForDisplayed();
+      const options = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      await options[0].click();
+      await options[1].click();
+      const pill1 = await FilterBarCO.getPillByText('React');
+      const pill2 = await FilterBarCO.getPillByText('Full');
+      await pill1.waitForDisplayed();
+      await pill2.waitForDisplayed();
+      const filterBarMenuBtn = await FilterBarCO.getFilterBarDropdownMenuButton();
+      await filterBarMenuBtn.click();
+      const filterBarMenu = await FilterBarCO.getFilterBarDropdownMenu();
+      await filterBarMenu.waitForDisplayed();
+      const clearFilters = await FilterBarCO.getFilterBarDropDownOption('Clear Filters');
+      await clearFilters.click();
+      await expect(pill1).not.toBeDisplayed();
+      await expect(pill2).not.toBeDisplayed();
+    });
+    it('02: should open filterbar dropdown menu and clear all using - keyboard nav', async () => {
+      await FiltersCO.openFilterPopperByColumnName('position', 0);
+      const inputMultiSelect = await FiltersCO.filterMultiSelectPopper.getInput();
+      await inputMultiSelect.waitForDisplayed();
+      const options = await FiltersCO.filterMultiSelectPopper.getMenuItems();
+      await options[0].click();
+      await options[1].click();
+      const pill1 = await FilterBarCO.getPillByText('React');
+      const pill2 = await FilterBarCO.getPillByText('Full');
+      await pill1.waitForDisplayed();
+      await pill2.waitForDisplayed();
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Enter);
+      const filterBarMenu = await FilterBarCO.getFilterBarDropdownMenu();
+      await filterBarMenu.waitForDisplayed();
+      await browser.keys(Key.Return);
+      await expect(pill1).not.toBeDisplayed();
+      await expect(pill2).not.toBeDisplayed();
+    });
+  });
+}

package/ds-data-table-async/helpers/asyncFilter.js

@@ -0,0 +1,4 @@
+export const asyncFilter = async (arr, predicate) => {
+  const results = await Promise.all(arr.map(predicate));
+  return arr.filter((_v, index) => results[index]);
+};

package/ds-data-table-async/helpers/asyncShiftPress.js

@@ -0,0 +1,19 @@
+export async function pressShiftKey() {
+  await browser.performActions([
+    {
+      type: 'key',
+      id: 'keyboard',
+      actions: [{ type: 'keyDown', value: '\uE008' }],
+    },
+  ]);
+}
+
+export async function releaseShiftKey() {
+  await browser.performActions([
+    {
+      type: 'key',
+      id: 'keyboard',
+      actions: [{ type: 'keyUp', value: '\uE008' }],
+    },
+  ]);
+}

package/ds-data-table-async/helpers/getElementBoundingRect.js

@@ -0,0 +1,2 @@
+export const getElementBoundingRect = (selector) =>
+  browser.execute((element) => element.getBoundingClientRect(), selector);

package/ds-data-table-async/helpers/getElementByIndex.js

@@ -0,0 +1,12 @@
+export async function getElementByIndex(selectorFn, index) {
+  return browser.waitUntil(
+    async () => {
+      const selector = await selectorFn();
+      return selector.length > index ? selector[index] : false;
+    },
+    {
+      timeout: 5000,
+      timeoutMsg: 'element not displayed after 5 seconds',
+    },
+  );
+}

package/ds-data-table-async/helpers/getElementDragHandler.js

@@ -0,0 +1,3 @@
+export async function getElementDragHandler(element) {
+  return element.$('[data-testid="data-table-drag-handle"]');
+}

package/ds-data-table-async/helpers/getRadioValue.js

@@ -0,0 +1 @@
+export const getRadioValue = async (selector) => selector.getAttribute('aria-checked');

package/ds-data-table-async/helpers/index.js

@@ -0,0 +1,7 @@
+export * from './getElementByIndex';
+export * from './getElementDragHandler';
+export * from './asyncFilter';
+export * from './getRadioValue';
+export * from './getElementBoundingRect';
+export * from './throttleTyping';
+export * from './asyncShiftPress';

package/ds-data-table-async/helpers/throttleTyping.js

@@ -0,0 +1,6 @@
+export const throttleTyping = async (text) => {
+  for (let charIndex = 0; charIndex < text.length; charIndex += 1) {
+    // eslint-disable-next-line no-await-in-loop
+    await browser.keys(text[charIndex]);
+  }
+};

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

@@ -0,0 +1,31 @@
+/* eslint-disable max-lines */
+/* eslint-disable max-len */
+/* eslint-disable prettier/prettier */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { CellCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8828 - DataTable: Custom cell with datepicker - Func.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.customWithDate.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should be possible open date time picker with Enter key', async () => {
+      const yearInput = await CellCO.getYearInput();
+      await yearInput.click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      const dateTimePicker = await CellCO.getDateTimePickerCalendar();
+      await expect(dateTimePicker).toBeDisplayedInViewport();
+    });
+    it('02: should be possible close date time picker with Escape key', async () => {
+      await browser.keys(Key.Escape);
+      const dateTimePicker = await CellCO.getDateTimePickerCalendar();
+      const dateTimePickerBtn = await CellCO.getDateTimePickerBtn();
+      await expect(dateTimePicker).not.toBeDisplayedInViewport();
+      await expect(dateTimePickerBtn).toBeFocused();
+    });
+  });
+}

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

@@ -0,0 +1,70 @@
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO } from '../components';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7205 - DataTable, Header, Sort by Column - Visual Test', () => {
+    // PUI-7054
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.sortByColumn.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should focus position header and show its icons properly', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-focus-header'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should hover country header and show its icons properly', async () => {
+      const positionHeader = await HeaderCO.getHeaderCellByIndex(3);
+      await mouseOver(positionHeader);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-hover-header'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should hover truncated name header and show its icons and tooltip properly', async () => {
+      const nameLongHeader = await HeaderCO.getHeaderCellByIndex(1);
+      await mouseOver(nameLongHeader, 50, 10);
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-hover-longheader-wtooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('04: should sort descending by first column and get the proper sort icon', async () => {
+      const idHeader = await HeaderCO.getHeaderCellByIndex(0);
+      await idHeader.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-descending-icon-id'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('05: should sort ascending by first column and get the proper sort icon', async () => {
+      const idHeader = await HeaderCO.getHeaderCellByIndex(0);
+      await idHeader.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('headers-ascending-icon-id'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6978  - DataTable, Header, Required Column - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.requiredColumns.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the required column properly', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('required-column'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-7042  - DataTable, Header, Text Wrap Truncated Columns - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.textWrapTruncColumn.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the text wrapped truncated columns properly', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('text-wrap-trunc-column'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,40 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO } 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-11444  - DataTable, Header, Required Column - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.requiredColumns.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display the required column and pass axe-core scan', async () => {
+      const row = await RowCO.getRowByIndex(1);
+      await row.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  // Unskip after Tabs a11y is done
+  describe.skip('PUI-11434 - DataTable inside Tabs, Dnd, Rows - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.datatableInsideTabs.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display data table inside tabs and pass axe-core scan', async () => {
+      await (await RowCO.getRowByIndex(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,52 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO, PaginationNavCO } 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-11448 - 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 result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('should display the opened dropdown menu for the elements-per-page', async () => {
+      await (await PaginationNavCO.getElemsPerPageMenu()).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('should display the opened dropdown menu for the pages-nav', async () => {
+      await (await PaginationNavCO.getPagesMenu()).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('should display the segmented pagination mode', async () => {
+      await (await HeaderCO.getHeaderCellByIndex(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('should display the opened dropdown menu for the pages-nav segmented', async () => {
+      const pageMenu = await PaginationNavCO.getPagesMenu();
+      await pageMenu.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('should display any other page, prev arrow enabled', async () => {
+      const menuOpt3 = await PaginationNavCO.getOpenMenuOptsByIndex(4);
+      await menuOpt3.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}