dimsum-e2e-tests 3.22.0-next.36

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

@@ -0,0 +1,230 @@
+/* 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.filterbarTest.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.filterableWithFilterBar.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.filterableWithFilterBar.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.filterableWithFilterBar.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.filterableWithFilterBar.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();
+    });
+  });
+}

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 PUI-11469 is fixed
+  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);
+    });
+  });
+}

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

@@ -0,0 +1,152 @@
+/* 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 } 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 () => {
+      const twentyFiveRow = await RowCO.getRowByIndex(24);
+      await twentyFiveRow.scrollIntoView();
+      const row30 = await RowCO.getRowByIndex(30); // first 10 rows are removed when scrolling down
+      await row30.scrollIntoView();
+      const row50 = await RowCO.getRowAriaIndex(50);
+      await expect(row50).toBeDisplayedInViewport();
+    });
+    it('should tab to the Pages Navigation Dropdown Menu', async () => {
+      await browser.keys(Key.Tab);
+      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();
+    });
+  });
+}