dimsum-e2e-tests 1.0.0-rc.1

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

@@ -0,0 +1,152 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import { Key } from 'webdriverio';
+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-11462 - DataTable, single select - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.singleSelect.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display the row selected (single select) and pass axe-core scan', async () => {
+      const secondRow = await RowCO.getRowByIndex(1);
+      const radiobtn = await RowCO.getRowRadioButtonByRow(secondRow);
+      await radiobtn.click();
+      await secondRow.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11463 - DataTable, Selectable columns -AxeCore.', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectableColumns.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: Should select a single row checkbox and pass axe-core scan', async () => {
+      const checkbox = await RowCO.getCheckBoxByIndex(8);
+      await checkbox.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Should select all columns when checking the header checkbox and pass axe-core scan', async () => {
+      const writeAllCheckbox = await HeaderCO.getWriteAllCheckbox();
+      const readAllCheckbox = await HeaderCO.getReadAllCheckbox();
+      await writeAllCheckbox.click();
+      await readAllCheckbox.click();
+      const checkboxes = await DSDataTableCO.getCheckboxes();
+      const areChecked = await checkboxes.every((checkbox) => DSDataTableCO.isChecked(checkbox));
+      await expect(areChecked).toBeTruthy();
+    });
+  });
+
+  describe('PUI-11464 - DataTable, multi select - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelect.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display the row selected and focused', async () => {
+      const secondRow = await RowCO.getRowByIndex(1);
+      await secondRow.click();
+      const thirdRow = await RowCO.getRowByIndex(2);
+      await thirdRow.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11465 - DataTable, Multi select empty state -AxeCore', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelectEmpty.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: Should properly display the datatable multiselect empty state and pass axe-core scan', async () => {
+      const header = await DSDataTableCO.getElementByDataTestid('header-cell-title');
+      await header.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11467  - DataTable, Select All - disabled - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectMultipleNoGlobalDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display select all checkbox disabled', async () => {
+      const header = await DSDataTableCO.getElementByDataTestid('header-cell-title');
+      await header.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11466 - DataTable, Select All - No Global - AxeCore', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectMultipleNoGlobal.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should not display select all checkbox', async () => {
+      const header = await DSDataTableCO.getElementByDataTestid('header-cell-title');
+      await header.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11468 - DataTable, Selectable Sections - AxeCore', async () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectableSections.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should display a datatable with selectable sections (closed)', async () => {
+      const firstSectionArrowHead = await RowCO.getArrowHeadByIndex(2);
+      await firstSectionArrowHead.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should display a datatable with selectable sections (one expanded)', async () => {
+      const firstSectionArrowHead = await RowCO.getArrowHeadByIndex(2);
+      await firstSectionArrowHead.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: should display a datatable with selectable sections (all checked)', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('04: should display a datatable with selectable sections (all not checked)', async () => {
+      await browser.keys(Key.Space);
+      await browser.keys([Key.Shift, Key.Tab]);
+      await browser.keys(Key.Space);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('05: should display a datatable with selectable sections (all expanded)', async () => {
+      const firstSectionArrowHead = await RowCO.getArrowHeadMixed();
+      await firstSectionArrowHead.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,191 @@
+/* eslint-disable max-lines */
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSDataTableCO from '../DSDataTableCO';
+import { HeaderCO, RowCO } from '../components';
+import { getRadioValue, pressShiftKey, releaseShiftKey } from '../helpers';
+import { tabStops, isChecked } from '../../helpers';
+import DSToggleCO from '../../ds-toggle/DSToggleCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-7043 - DataTable, Single select disabled selection', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.singleSelectDisabledSelectionUC.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should show the first row selected', async () => {
+      await (await DSDataTableCO.getElementByDataTestid(DSDataTableCO.dTID.SELECT_0_BUTTON)).click();
+      const radioValue = await getRadioValue(await RowCO.getRowRadioButtonByIndex(0));
+      await expect(radioValue).toBe('true');
+    });
+    it('should show the fourth row selected', async () => {
+      await (await DSDataTableCO.getElementByDataTestid(DSDataTableCO.dTID.SELECT_1_BUTTON)).click();
+      const radioValue = await getRadioValue(await RowCO.getRowRadioButtonByIndex(3));
+      await expect(radioValue).toBe('true');
+    });
+    it('should not be able to select the disabled row', async () => {
+      const firstRowRadioButton = await RowCO.getRowRadioButtonByIndex(0);
+      await firstRowRadioButton.click();
+      const radioValue = await getRadioValue(firstRowRadioButton);
+      await expect(radioValue).toBe('false');
+    });
+  });
+  describe('PUI-7044 - DataTable, Multi select disabled selection', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelectDisabledSelectionUC.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should show the checkbox of the first row selected', async () => {
+      await (await DSDataTableCO.getElementByDataTestid(DSDataTableCO.dTID.SELECT_0_BUTTON)).click();
+      const checkBoxChecked = await (await RowCO.getRowCheckBoxByIndex(0)).getAttribute('aria-checked');
+      await expect(checkBoxChecked).toBe('true');
+    });
+    it('should show the checkbox of the fourth row selected', async () => {
+      await (await DSDataTableCO.getElementByDataTestid(DSDataTableCO.dTID.SELECT_1_BUTTON)).click();
+      const checkBoxChecked = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+      await expect(checkBoxChecked).toBe('true');
+    });
+    it('should not be able to select the disabled row', async () => {
+      const firstRowCheckboxButton = await RowCO.getRowCheckBoxByIndex(0);
+      await expect(firstRowCheckboxButton).not.toBeClickable();
+    });
+  });
+  if (browser.capabilities.browserName !== 'Firefox') {
+    describe('PUI-7219 - DataTable, Row selection with shift + click', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSDataTableCO.multiSelect.go();
+        if (errorOnGo) throw errorOnGo;
+        await DSDataTableCO.waitForDataTable();
+      });
+      it('should select all the rows in the range except the ones that are disabled', async () => {
+        const checkbox1 = await RowCO.getRowCheckBoxByIndex(1);
+        const checkbox4 = await RowCO.getRowCheckBoxByIndex(4);
+        await pressShiftKey('Shift');
+        await browser.pause(200);
+        await checkbox1.click();
+        await checkbox4.click();
+        await browser.pause(200);
+        await releaseShiftKey('Shift');
+        const checkBoxRow1 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
+        const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
+        const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+        const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
+        await expect(checkBoxRow1).toBe('true');
+        await expect(checkBoxRow2).toBe('true');
+        await expect(checkBoxRow3).toBe('false');
+        await expect(checkBoxRow4).toBe('true');
+      });
+      it('should unselect all the rows in the range', async () => {
+        const checkbox1 = await RowCO.getRowCheckBoxByIndex(1);
+        const checkbox4 = await RowCO.getRowCheckBoxByIndex(4);
+        await pressShiftKey('Shift');
+        await browser.pause(200);
+        await checkbox4.click();
+        await checkbox1.click();
+        await browser.pause(200);
+        await releaseShiftKey('Shift');
+        const checkBoxRow1 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
+        const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
+        const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+        const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
+        await expect(checkBoxRow1).toBe('false');
+        await expect(checkBoxRow2).toBe('false');
+        await expect(checkBoxRow3).toBe('false');
+        await expect(checkBoxRow4).toBe('false');
+      });
+    });
+  }
+  describe('PUI-7220 - DataTable, Row selection with shift + space - keyboard', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelect.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should select all the rows in the range except the ones that are disabled', async () => {
+      await tabStops(10);
+      await browser.keys(Key.Space);
+      await browser.pause(200);
+      await browser.keys([Key.Shift, Key.ArrowDown]);
+      await browser.keys([Key.Shift, Key.ArrowDown]);
+      await browser.keys([Key.Shift, Key.ArrowDown]);
+      await browser.keys([Key.Shift, Key.Space]);
+      const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
+      const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
+      const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+      const checkBoxRow5 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
+      await expect(checkBoxRow2).toBe('true');
+      await expect(checkBoxRow3).toBe('true');
+      await expect(checkBoxRow4).toBe('false');
+      await expect(checkBoxRow5).toBe('true');
+    });
+    it('should unselect all the rows in the range', async () => {
+      await browser.keys(Key.Space);
+      await browser.pause(200);
+      await browser.keys([Key.Shift, Key.ArrowUp]);
+      await browser.keys([Key.Shift, Key.ArrowUp]);
+      await browser.keys([Key.Shift, Key.ArrowUp]);
+      await browser.keys([Key.Shift, Key.Space]);
+      const checkBoxRow2 = await (await RowCO.getRowCheckBoxByIndex(1)).getAttribute('aria-checked');
+      const checkBoxRow3 = await (await RowCO.getRowCheckBoxByIndex(2)).getAttribute('aria-checked');
+      const checkBoxRow4 = await (await RowCO.getRowCheckBoxByIndex(3)).getAttribute('aria-checked');
+      const checkBoxRow5 = await (await RowCO.getRowCheckBoxByIndex(4)).getAttribute('aria-checked');
+      await expect(checkBoxRow2).toBe('false');
+      await expect(checkBoxRow3).toBe('false');
+      await expect(checkBoxRow4).toBe('false');
+      await expect(checkBoxRow5).toBe('false');
+    });
+  });
+  describe('PUI-11233 - DataTable, Multi select disabled selection with uniqueRowAccessor', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelectDisabledWithUniqueRowAccessor.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should select all rows correctly', async () => {
+      const selectAllCheckbox = await HeaderCO.getHeaderSelectCheckBox();
+      const disabledRows = await RowCO.getDisabledRows();
+      const availableRows = await RowCO.getAvailableRows();
+      const disabledCheckboxes = await RowCO.getRowCheckBoxByRow(disabledRows);
+      const availableCheckboxes = await RowCO.getRowCheckBoxByRow(availableRows);
+      await selectAllCheckbox.click();
+      const selectAllisChecked = await DSDataTableCO.isChecked(selectAllCheckbox);
+      const disabledCheckboxesisChecked = await DSDataTableCO.isChecked(disabledCheckboxes);
+      const availableCheckboxesisChecked = await DSDataTableCO.isChecked(availableCheckboxes);
+      await expect(selectAllisChecked).toBe(true);
+      await expect(disabledCheckboxesisChecked).toBe(false);
+      await expect(availableCheckboxesisChecked).toBe(true);
+    });
+    it('02: should unselect all rows correctly', async () => {
+      const selectAllCheckbox = await HeaderCO.getHeaderSelectCheckBox();
+      const disabledRows = await RowCO.getDisabledRows();
+      const availableRows = await RowCO.getAvailableRows();
+      const disabledCheckboxes = await RowCO.getRowCheckBoxByRow(disabledRows);
+      const availableCheckboxes = await RowCO.getRowCheckBoxByRow(availableRows);
+      await selectAllCheckbox.click();
+      const selectAllisChecked = await DSDataTableCO.isChecked(selectAllCheckbox);
+      const disabledCheckboxesisChecked = await DSDataTableCO.isChecked(disabledCheckboxes);
+      const availableCheckboxesisChecked = await DSDataTableCO.isChecked(availableCheckboxes);
+      await expect(selectAllisChecked).toBe(false);
+      await expect(disabledCheckboxesisChecked).toBe(false);
+      await expect(availableCheckboxesisChecked).toBe(false);
+    });
+  });
+  describe('PUI-11928 - DataTable - Toggle switcher stop propagation test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.requiredColumnsMulti.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should not select first row after click on toggle button', async () => {
+      const toggleButtonRow1 = await DSToggleCO.getToggleFocuseableByIndex(0);
+      await toggleButtonRow1.click();
+      const checkBoxRow1 = await RowCO.getRowCheckBoxByIndex(0);
+      const isToggleChecked = await isChecked(toggleButtonRow1);
+      const isCheckBoxRow1 = await isChecked(checkBoxRow1);
+      await expect(isCheckBoxRow1).toBe(false);
+      await expect(isToggleChecked).toBe(false);
+    });
+  });
+}

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

@@ -0,0 +1,119 @@
+import DSDataTableCO from '../DSDataTableCO';
+import { RowCO, CellCO, HeaderCO } from '../components';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6917 - DataTable, Row styling, focus and selection, single select - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.singleSelect.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the row selected and focused', async () => {
+      const secondRow = await RowCO.getRowByIndex(1);
+      const radiobtn = await RowCO.getRowRadioButtonByRow(secondRow);
+      await radiobtn.click();
+      await secondRow.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('selected-single-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6919 - DataTable, Row styling, focus and selection, multi select - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelect.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the row selected and focused', async () => {
+      const secondRow = await RowCO.getRowByIndex(1);
+      await secondRow.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('selected-multi-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the row unselected and focused', async () => {
+      const secondRow = await RowCO.getRowByIndex(1);
+      await secondRow.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('unselected-multi-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the row selected and focused clicking checkbox', async () => {
+      const secondRow = await RowCO.getRowByIndex(1);
+      const checkbox = await RowCO.getRowCheckBoxByRow(secondRow);
+      await checkbox.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('selected-multi-focused-checkbox'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6981 - DataTable, No control click selection - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectWithNoControl.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the row selected and focused', async () => {
+      const secondRow = await RowCO.getRowByIndex(1);
+      await (await CellCO.getRowCellByIndex(secondRow, 1)).click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('selected-no-control-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the selected row properly with no focus', async () => {
+      const headerCell = await HeaderCO.getHeaderCellByIndex(1);
+      await headerCell.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('selected-no-control-not-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-7184 - DataTable, Multi selectable rows, header icon - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.multiSelect.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display the selectable icon in the header in none selected state', async () => {
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('none-selected-state'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the selectable icon in the header in mixed state', async () => {
+      const checkBox = await RowCO.getRowCheckBoxByIndex(1);
+      await checkBox.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('one-selected-mixed-state'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the selectable icon in the header in all selected state', async () => {
+      const headerSelect = await HeaderCO.getHeaderSelectCheckBox();
+      await headerSelect.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('all-selected-state'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the selectable icon in the header in none selected state, after', async () => {
+      const headerSelect = await HeaderCO.getHeaderSelectCheckBox();
+      await headerSelect.click();
+      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('none-selected-state'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9129 - DataTable, Select All - disabled - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectMultipleNoGlobalDisabled.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should display select all checkbox disabled', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('select-all-disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9130 - DataTable, Select All - No Global - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.selectMultipleNoGlobal.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('should not display select all checkbox', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('select-all-not-displayed'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

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

@@ -0,0 +1,57 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable max-len */
+
+import DSDataTableCO from '../DSDataTableCO';
+import { axeCoreCheck } from '../../helpers';
+import PaginationNavCO from '../components/PaginationNavCO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-11653 - DataTable, Cell skeleton - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skeletonCellTest.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have cell skeletons passing axe-core scan', async () => {
+      const skeleton = await DSDataTableCO.getSkeletonByIndex();
+      await skeleton.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11652 - DataTable, Prop skeleton - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skeletonPropTest.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have table skeleton (using prop) passing axe-core scan', async () => {
+      const skeleton = await DSDataTableCO.getSkeletonByIndex();
+      await skeleton.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11654 - DataTable, Row skeleton  - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skeletonRowTest.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have row skeleton variant and pass axe-core scan', async () => {
+      const nextPage = await PaginationNavCO.getNextPageBt();
+      await nextPage.click();
+      const skeleton = await DSDataTableCO.getSkeletonByIndex();
+      await skeleton.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

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

@@ -0,0 +1,51 @@
+import DSDataTableCO from '../DSDataTableCO';
+import PaginationNavCO from '../components/PaginationNavCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11650 - DataTable, Cell skeleton - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skeletonCellTestFast.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have cell skeletons matching baseline', async () => {
+      await browser.eyesOpen();
+      const skeleton = await DSDataTableCO.getSkeletonByIndex();
+      await skeleton.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('cell-skeleton'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11651 - DataTable, Prop skeleton - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skeletonPropTest.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have table skeleton (using prop) matching baseline', async () => {
+      await browser.eyesOpen();
+      const skeleton = await DSDataTableCO.getSkeletonByIndex();
+      await skeleton.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('table-skeleton'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-11649 - DataTable, Row skeleton  - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDataTableCO.skeletonRowTest.go();
+      if (errorOnGo) throw errorOnGo;
+      await DSDataTableCO.waitForDataTable();
+    });
+    it('01: should have row skeleton variant matching baseline', async () => {
+      await browser.eyesOpen();
+      const nextPage = await PaginationNavCO.getNextPageBt();
+      await nextPage.click();
+      const skeleton = await DSDataTableCO.getSkeletonByIndex();
+      await skeleton.waitForDisplayed();
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('row-skeleton'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}