dimsum-e2e-tests 3.27.0-next.3 → 3.27.0-next.4

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.27.0-next.4](https://git.elliemae.io/platform-ui/dimsum/compare/v3.27.0-next.3...v3.27.0-next.4) (2024-01-10)
+
+**Note:** Version bump only for package dimsum-e2e-tests
+
 ## [3.27.0-next.3](https://git.elliemae.io/platform-ui/dimsum/compare/v3.27.0-next.2...v3.27.0-next.3) (2024-01-09)
 
 **Note:** Version bump only for package dimsum-e2e-tests

package/ds-button-v3/DSButtonV3.visual.spec.js

@@ -0,0 +1,56 @@
+import DSButtonV3CO from './DSButtonV3CO';
+import { setTextSize } from '../helpers';
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-12269 - ButtonV3 - Resize, long label -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSButtonV3CO.longlabelURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display default long-labelled buttons showcase correctly', async () => {
+      const button = await DSButtonV3CO.getButtonByIndex(0);
+      await button.waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-longlabel-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display default long-labelled buttons showcase after resize', async () => {
+      const button = await DSButtonV3CO.getButtonByIndex(0);
+      await button.waitForDisplayed({ timeout: 5000 });
+      await setTextSize(32);
+      const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-longlabel-resize'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-12268 - ButtonV3 - Resize, basic -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSButtonV3CO.showcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display button showcase correctly', async () => {
+      const button = await DSButtonV3CO.getButtonByIndex(0);
+      await button.waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-showcase-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display button showcase correctly after resize', async () => {
+      const button = await DSButtonV3CO.getButtonByIndex(0);
+      await button.waitForDisplayed({ timeout: 5000 });
+      await setTextSize(32);
+      const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-showcase-resize'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+
+describe('PUI-12267 - ButtonV3 - Responsive -Visual', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSButtonV3CO.responsiveURL.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('should display button showcase with responsive behavior (small viewport, bigger font)', async () => {
+    const button = await DSButtonV3CO.getButtonByIndex(0);
+    await button.waitForDisplayed({ timeout: 5000 });
+    const snapshot = await browser.checkSnapshot(DSButtonV3CO.snapshotPath('ds-button-v3-responsive'));
+    await expect(snapshot).toEqual(0);
+  });
+});

package/ds-button-v3/DSButtonV3CO.js

@@ -0,0 +1,19 @@
+import { PATH_E2E_BUTTON_V3 } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+export default class DSButtonV2CO extends PageObject {
+  static showcaseURL = new Urlbuilder(PATH_E2E_BUTTON_V3, 'showcase-test');
+
+  static responsiveURL = new Urlbuilder(PATH_E2E_BUTTON_V3, 'responsive-test');
+
+  static longlabelURL = new Urlbuilder(PATH_E2E_BUTTON_V3, 'long-labels-test');
+
+  // selectors
+  static async getButtonByIndex(index) {
+    return $$('[data-testid="ds-button"]')[index];
+  }
+
+  // Snapshot
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ButtonV3', example);
+  }
+}

package/ds-chat/DSChat-loadmore.func.spec.js

@@ -34,8 +34,11 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     it('should scroll to the Load More Btn', async () => {
       const floatBtn = await FloatingButtonCO.getFloatingButton();
       await floatBtn.click();
+      const chatContainer = await DSChatCO.getThreadContainer();
+      await chatContainer.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Home);
       const loadMoreBtn = await DSChatCO.getLoadMoreBtn();
-      await loadMoreBtn.scrollIntoView();
       await expect(loadMoreBtn).toBeDisplayedInViewport();
     });
     it('should click the text input and focus it', async () => {

package/ds-circular-indeterminate-indicator/DSCircularIndicator.axe-core.func.spec.js

@@ -1,7 +1,12 @@
 import DSCircularIndicatorCO from './DSCircularIndicatorCO';
 import { mouseOver, axeCoreCheck } from '../helpers';
 
-if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
   describe('PUI-11275 - Circular Indeterminate Indicator, showcase/tooltip - Axe-Core', () => {
     before('loading page', async () => {
       const errorOnGo = await DSCircularIndicatorCO.showcaseURL.go();
@@ -16,7 +21,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       expect(result.length).toBe(0);
     });
   });
-  describe('PUI-11277 - Circular Indeterminate Indicator, full-screen - Axe-Core', () => {
+  // unskip after PUI-12242 is fixed
+  describe.skip('PUI-11277 - Circular Indeterminate Indicator, full-screen - Axe-Core', () => {
     before('loading page', async () => {
       const errorOnGo = await DSCircularIndicatorCO.fullScreenURL.go();
       if (errorOnGo) throw errorOnGo;
@@ -28,7 +34,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       expect(result.length).toBe(0);
     });
   });
-  describe('PUI-11276 - Circular Indeterminate Indicator, Dialog - Axe-Core', () => {
+  // unskip after PUI-11614 is fixed
+  describe.skip('PUI-11276 - Circular Indeterminate Indicator, Dialog - Axe-Core', () => {
     before('loading page', async () => {
       const errorOnGo = await DSCircularIndicatorCO.insideDialog.go();
       if (errorOnGo) throw errorOnGo;

package/ds-comments-card/DSComments.axe-core.func.spec.js

@@ -2,8 +2,10 @@ import { mouseOver, axeCoreCheck, type } from '../helpers';
 import DSCommentsCO from './DSCommentsCO';
 
 if (
-  (!browser.capabilities['ice:options'].isPhone && browser.capabilities.browserName === 'chrome') ||
-  browser.capabilities.browserName === 'Chrome'
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
 ) {
   describe('PUI-10808 - DSCommentsCard, Basic -AxeCore test', () => {
     before('loading page', async () => {

package/ds-controlled-form/ds-combobox/DSComboboxCO.js

@@ -102,7 +102,7 @@ export default class DSComboboxCO extends PageObject {
   }
 
   static async getComboListbox() {
-    return $('#combo-listbox');
+    return $('[id^="combo-listbox"]');
   }
 
   // PILLS

package/ds-controlled-form/ds-combobox/DSComboboxbox.func.spec.js

@@ -25,4 +25,23 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(combo).toBeFocused();
     });
   });
+  describe('PUI-12245 - ComboboxV3:: Select with Tab - func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSComboboxCO.singleSelectFixedWidth.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should select an option with TAB and focus should leave combo', async () => {
+      const combobox = await DSComboboxCO.getCombobox();
+      const menulist = await DSComboboxCO.getMenuList();
+      await combobox.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Enter);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.Tab);
+      const selectedOption = await DSComboboxCO.getSelectedValues();
+      await expect(combobox).not.toBeFocused();
+      await expect(menulist).not.toBeDisplayed();
+      await expect(selectedOption).toHaveTextContaining('Obi-Wan Kenobi');
+    });
+  });
 }

package/ds-controlled-form/ds-combobox/error-state/DSComboboxbox.with-form-item-block.visual.spec.js

@@ -1,3 +1,4 @@
+import { Key } from 'webdriverio';
 import DSComboboxCO from '../DSComboboxCO';
 
 // eyesOpen() should be modified in order to works with tablet and mobile
@@ -7,7 +8,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const errorOnGo = await DSComboboxCO.withFormLayoutBlockItem.go();
       if (errorOnGo) throw errorOnGo;
     });
-    it('should display error state and highlight', async () => {
+    it('01: should display error state and highlight', async () => {
       await browser.eyesOpen();
       const combobox = await DSComboboxCO.getCombobox();
       await combobox.waitForDisplayed();
@@ -16,7 +17,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
-    it('should display error state and highliht with menu opened', async () => {
+    it('02: should display error state and highliht with menu opened', async () => {
       await browser.eyesOpen();
       const dropDownBtn = await DSComboboxCO.getDropDownMenuBtn();
       await dropDownBtn.waitForExist();
@@ -28,19 +29,17 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
-    it('should display error state and highliht with option selected', async () => {
+    it('03: should display error state and highliht with option selected', async () => {
       await browser.eyesOpen();
       const label = 'Luke Skywalker too long this text is super long';
       const option = await DSComboboxCO.getOptionByLabel(label);
       await option.click();
-      const pill = await DSComboboxCO.getPillByLabel(label);
-      await pill.waitForDisplayed();
       const snapshot = await browser.eyesCheckSnapshot(
         DSComboboxCO.snapshotPath('comboboxV3-error-state-with-highliht-option-selected'),
       );
       await expect(snapshot).toEqual(0);
     });
-    it('should display error state with option selected', async () => {
+    it('04: should display error state with option selected', async () => {
       await browser.eyesOpen();
       const highlightCheckbox = await DSComboboxCO.getCheckboxByLabel('Set Highlight');
       await highlightCheckbox.click();
@@ -49,17 +48,20 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       );
       await expect(snapshot).toEqual(0);
     });
-    it('should display error state focused', async () => {
+    it('05: should display error state focused', async () => {
       await browser.eyesOpen();
-      const closePill = await DSComboboxCO.getPillCloseBtn();
-      await closePill.click();
+      const dropDownBtn = await DSComboboxCO.getDropDownMenuBtn();
+      await dropDownBtn.waitForExist();
+      await dropDownBtn.click();
+      const label = 'Luke Skywalker too long this text is super long';
+      const option = await DSComboboxCO.getOptionByLabel(label);
+      await option.click();
       const snapshot = await browser.eyesCheckSnapshot(DSComboboxCO.snapshotPath('comboboxV3-error-state-focused'));
       await expect(snapshot).toEqual(0);
     });
-    it('should display error state', async () => {
+    it('06: should display error state', async () => {
       await browser.eyesOpen();
-      const combobox = await DSComboboxCO.getCombobox();
-      await combobox.click({ x: 350 });
+      await browser.keys(Key.Tab);
       const snapshot = await browser.eyesCheckSnapshot(DSComboboxCO.snapshotPath('comboboxV3-error-state'));
       await expect(snapshot).toEqual(0);
     });

package/ds-controlled-form/ds-controlled-date-time-picker/date-input/DateInput.auto-advance.func.spec.js

@@ -6,7 +6,7 @@ import DateTimePickerCO from '../DSControlledDateTimePickerCO';
 if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
   describe('PUI-6673 - DSControlledDateTimePicker:: DateInput: auto-advance', () => {
     beforeEach('loading page', async () => {
-      const errorOnGo = await DateTimePickerCO.dateInput.go();
+      const errorOnGo = await DateTimePickerCO.dateShowcase.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should not auto-advance to day input - Enter "1"', async () => {

package/ds-controlled-form/ds-controlled-inputgroup/protected/DSControlledInputGroup.protected.visual.spec.js

@@ -21,7 +21,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await expect(snapshot).toEqual(0);
     });
     it('03: should display the protected group input with hidden characters and disabled', async () => {
-      const hideAddon = await DSControlledInputGroupCO.getRightAddOnByIndex(1);
+      const hideAddon = await DSControlledInputGroupCO.getRightAddOnByIndex(0);
       await hideAddon.click();
       const snapshot = await browser.checkSnapshot(
         DSControlledInputGroupCO.snapshotPath('protectedinput-disabled-hidden'),

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

@@ -25,8 +25,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Space);
-      const cellText = await (await CellCO.getRowCellByIndex(await RowCO.getRowByIndex(2), 1)).getText();
-      await expect(cellText).toBe('2');
+      const row3 = await RowCO.getRowByIndex(2);
+      const firstCellRow3 = await CellCO.getRowCellByIndex(await row3, 1);
+      await expect(firstCellRow3).toHaveTextContaining('2');
     });
     it('should drop the fourth row inside the fifth row', async () => {
       await browser.keys(Key.ArrowDown);
@@ -35,8 +36,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Space);
       const fourthRow = await (await RowCO.getRowByIndex(4)).$('div');
-      const isFourthChildOfFifth = (await (await CellCO.getRowCellByIndex(fourthRow, 1)).getText()) === '4';
-      await expect(isFourthChildOfFifth).toBeTruthy();
+      const isFourthChildOfFifth = await CellCO.getRowCellByIndex(fourthRow, 1);
+      await expect(isFourthChildOfFifth).toHaveTextContaining('4');
     });
   });
 
@@ -57,10 +58,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.Space);
       await browser.keys(Key.ArrowRight);
       await browser.keys(Key.Space);
-      const headerTitleOne = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(4));
-      const headerTitleTwo = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(5));
-      await expect(headerTitleOne).toBe('salary');
-      await expect(headerTitleTwo).toBe('country');
+      const headerTitleOne = await HeaderCO.getHeaderCellByIndex(4);
+      const headerTitleTwo = await HeaderCO.getHeaderCellByIndex(5);
+      await expect(headerTitleOne).toHaveTextContaining(['SALARY', 'Salary']);
+      await expect(headerTitleTwo).toHaveTextContaining(['COUNTRY', 'Country']);
     });
     it('should drop the date range column (backwards) properly', async () => {
       const countryHeaderCell = (await HeaderCO.getHeaderCellByText('DATE RANGE'))[0];
@@ -69,10 +70,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.Space);
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.Space);
-      const headerTitleOne = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(6));
-      const headerTitleTwo = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(7));
-      await expect(headerTitleOne).toBe('date range');
-      await expect(headerTitleTwo).toBe('single date');
+      const headerTitleOne = await HeaderCO.getHeaderCellByIndex(6);
+      const headerTitleTwo = await HeaderCO.getHeaderCellByIndex(7);
+      await expect(headerTitleOne).toHaveTextContaining(['DATE RANGE', 'Date range']);
+      await expect(headerTitleTwo).toHaveTextContaining(['SINGLE DATE', 'Single date']);
     });
   });
 
@@ -93,45 +94,10 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.Space);
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.Space);
-      const headerTitleOne = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(0));
-      const headerTitleTwo = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(5));
-      await expect(headerTitleOne).toBe('info');
-      await expect(headerTitleTwo).toBe('name & position');
-    });
-  });
-  describe('PUI-7157 - DataTable, Dnd, Columns', () => {
-    before('loading page', async () => {
-      const errorOnGo = await DSDataTableCO.dndColumns.go();
-      if (errorOnGo) throw errorOnGo;
-      await DSDataTableCO.waitForDataTable();
-    });
-    it('should focus the country header cell drag handler', async () => {
-      const countryHeaderCell = (await HeaderCO.getHeaderCellByText('COUNTRY'))[0];
-      await countryHeaderCell.click();
-      await browser.keys(Key.Return);
-      const headerDragHandler = await HeaderCO.getHeaderCellDragHandler(countryHeaderCell);
-      await expect(headerDragHandler).toBeFocused();
-    });
-    it('should drop the country header cell (forward) properly', async () => {
-      await browser.keys(Key.Space);
-      await browser.keys(Key.ArrowRight);
-      await browser.keys(Key.Space);
-      const headerTitleOne = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(4));
-      const headerTitleTwo = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(5));
-      await expect(headerTitleOne).toBe('salary');
-      await expect(headerTitleTwo).toBe('country');
-    });
-    it('should drop the date range column (backwards) properly', async () => {
-      const countryHeaderCell = (await HeaderCO.getHeaderCellByText('DATE RANGE'))[0];
-      await countryHeaderCell.click();
-      await browser.keys(Key.Return);
-      await browser.keys(Key.Space);
-      await browser.keys(Key.ArrowLeft);
-      await browser.keys(Key.Space);
-      const headerTitleOne = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(6));
-      const headerTitleTwo = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(7));
-      await expect(headerTitleOne).toBe('date range');
-      await expect(headerTitleTwo).toBe('single date');
+      const headerTitleOne = await HeaderCO.getHeaderCellByIndex(0);
+      const headerTitleTwo = await HeaderCO.getHeaderCellByIndex(5);
+      await expect(headerTitleOne).toHaveTextContaining(['INFO', 'Info']);
+      await expect(headerTitleTwo).toHaveTextContaining(['NAME & POSITION', 'Name & Position']);
     });
   });
 
@@ -153,8 +119,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.ArrowRight);
       await browser.keys(Key.ArrowRight);
       await browser.keys(Key.Return);
-      const lastHeaderTitle = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(8));
-      await expect(lastHeaderTitle).toBe('name');
+      const lastHeader = await HeaderCO.getHeaderCellByIndex(8);
+      await expect(lastHeader).toHaveTextContaining(['NAME', 'Name']);
     });
     it('02: should drop name column in the first position', async () => {
       await browser.keys(Key.Return);
@@ -167,8 +133,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.Return);
-      const lastHeaderTitle = await HeaderCO.getHeaderCellTitle(await HeaderCO.getHeaderCellByIndex(0));
-      await expect(lastHeaderTitle).toBe('name');
+      const firstHeader = await HeaderCO.getHeaderCellByIndex(0);
+      await expect(firstHeader).toHaveTextContaining(['NAME', 'Name']);
     });
   });
   describe('PUI-9849 - DataTable, Dnd click on DND button', () => {
@@ -182,40 +148,36 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await dndBtnRow3.click();
       const row3 = await RowCO.getRowByIndex(2);
       const idCell = await CellCO.getRowCellByIndex(row3, 1);
-      const cellContent = await idCell.getText();
       await browser.pause(500);
+      await expect(idCell).toHaveTextContaining('3');
       await expect(dndBtnRow3).toBeFocused();
-      await expect(cellContent).toBe('3');
     });
     it('02: rows should be expanded and focus should be on "Expand All" button', async () => {
       const headerExpandableBtn = await HeaderCO.getHeaderExpandButton();
       await headerExpandableBtn.click();
       const row3 = await RowCO.getRowByIndex(6);
       const idCell = await CellCO.getRowCellByIndex(row3, 1);
-      const cellContent = await idCell.getText();
       await browser.pause(500);
+      await expect(idCell).toHaveTextContaining('3');
       await expect(headerExpandableBtn).toBeFocused();
-      await expect(cellContent).toBe('3');
     });
     it('03: focus should be on DND button of 4th and the row should be on same position', async () => {
       const dndBtnRow4 = await RowCO.getRowDragHlandlerByIndex(9); // it is expanded
       await dndBtnRow4.click();
       const row4 = await RowCO.getRowByIndex(9);
       const idCell = await CellCO.getRowCellByIndex(row4, 1);
-      const cellContent = await idCell.getText();
       await browser.pause(500);
+      await expect(idCell).toHaveTextContaining('4');
       await expect(dndBtnRow4).toBeFocused();
-      await expect(cellContent).toBe('4');
     });
     it('04: rows should be expanded and focus should be on "Expand All" button', async () => {
       const dndBtn2ndChdRow4 = await RowCO.getRowDragHlandlerByIndex(10);
       await dndBtn2ndChdRow4.click();
       const row4 = await RowCO.getRowByIndex(9);
       const idCell = await CellCO.getRowCellByIndex(row4, 1);
-      const cellContent = await idCell.getText();
       await browser.pause(500);
+      await expect(idCell).toHaveTextContaining('4');
       await expect(dndBtn2ndChdRow4).toBeFocused();
-      await expect(cellContent).toBe('4');
     });
   });
 }

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

@@ -43,28 +43,40 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
   });
 
   describe('PUI-8272 - DataTable, Dnd, Columns - visual', () => {
-    before('loading page', async () => {
+    beforeEach('loading page', async () => {
       const errorOnGo = await DSDataTableCO.dndColumns.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
     });
     it('should display drag handler correctly', async () => {
+      await browser.eyesOpen();
       const countryHeaderCell = (await HeaderCO.getHeaderCellByText('COUNTRY'))[0];
       await countryHeaderCell.click();
       await browser.keys(Key.Return);
       await browser.keys(Key.Space);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('column-drag-handler'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('column-drag-handler'));
       await expect(snapshot).toEqual(0);
     });
     it('should display drag handler - in between position', async () => {
+      await browser.eyesOpen();
+      const countryHeaderCell = (await HeaderCO.getHeaderCellByText('COUNTRY'))[0];
+      await countryHeaderCell.click();
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Space);
       await browser.keys(Key.ArrowRight);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('column-in-between-position'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('column-in-between-position'));
       await expect(snapshot).toEqual(0);
     });
     it('should drop the columns properly', async () => {
+      await browser.eyesOpen();
+      const countryHeaderCell = (await HeaderCO.getHeaderCellByText('COUNTRY'))[0];
+      await countryHeaderCell.click();
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowRight);
       await browser.keys(Key.ArrowRight);
       await browser.keys(Key.Space);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('column-dropped'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('column-dropped'));
       await expect(snapshot).toEqual(0);
     });
   });
@@ -76,56 +88,72 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await DSDataTableCO.waitForDataTable();
     });
     it('should display drag handler correctly', async () => {
+      await browser.eyesOpen();
       const infoGroupHeaderCell = (await HeaderCO.getHeaderCellByText('info'))[0];
       await infoGroupHeaderCell.click();
       await browser.keys(Key.Return);
       await browser.keys(Key.Space);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('column-group-drag-handler'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('column-group-drag-handler'));
       await expect(snapshot).toEqual(0);
     });
     it('should display drag handler - in between position', async () => {
+      await browser.eyesOpen();
       const infoGroupHeaderCell = (await HeaderCO.getHeaderCellByText('info'))[0];
       await infoGroupHeaderCell.click();
       await browser.keys(Key.Return);
       await browser.keys(Key.Space);
       await browser.keys(Key.ArrowLeft);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('column-group-in-between-position'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('column-group-in-between-position'));
       await expect(snapshot).toEqual(0);
     });
     it('should drop the columns properly', async () => {
+      await browser.eyesOpen();
       const infoGroupHeaderCell = (await HeaderCO.getHeaderCellByText('info'))[0];
       await infoGroupHeaderCell.click();
       await browser.keys(Key.Return);
       await browser.keys(Key.Space);
       await browser.keys(Key.ArrowLeft);
       await browser.keys(Key.Space);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('column-group-dropped'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('column-group-dropped'));
       await expect(snapshot).toEqual(0);
     });
   });
   describe('PUI-8705 - DataTable inside Tabs, Dnd, Rows - visual', () => {
-    before('loading page', async () => {
+    beforeEach('loading page', async () => {
       const errorOnGo = await DSDataTableCO.datatableInsideTabs.go();
       if (errorOnGo) throw errorOnGo;
       await DSDataTableCO.waitForDataTable();
     });
-    it('should display drag handler correctly - in between position', async () => {
+    it('01: should display drag handler correctly', async () => {
+      await browser.eyesOpen();
       await (await RowCO.getRowByIndex(0)).click();
       await browser.keys(Key.Tab);
       await browser.keys(Key.Return);
       await browser.keys(Key.Space);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('row-drag-handler'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('inside-tabs-row-drag-handler'));
       await expect(snapshot).toEqual(0);
     });
-    it('should display drag handler - inside position', async () => {
+    it('02: should display drag handler - in between position', async () => {
+      await browser.eyesOpen();
+      await (await RowCO.getRowByIndex(0)).click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Space);
       await browser.keys(Key.ArrowDown);
       await browser.keys(Key.ArrowDown);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('row-drop-inside-position'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('inside-tabs-row-drop-in-betweeen'));
       await expect(snapshot).toEqual(0);
     });
-    it('should display row dropped correctly', async () => {
+    it('03: should display row dropped correctly', async () => {
+      await browser.eyesOpen();
+      await (await RowCO.getRowByIndex(0)).click();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Return);
+      await browser.keys(Key.Space);
+      await browser.keys(Key.ArrowDown);
+      await browser.keys(Key.ArrowDown);
       await browser.keys(Key.Space);
-      const snapshot = await browser.checkSnapshot(DSDataTableCO.snapshotPath('row-dropped'));
+      const snapshot = await browser.eyesCheckSnapshot(DSDataTableCO.snapshotPath('inside-tabs-row-dropped'));
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-datagrids/DSDatagrids-filterable-dates.func.spec.js

@@ -3,7 +3,11 @@
 import { Key } from 'webdriverio';
 import DG from './DatagridObject';
 
-if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName !== 'Safari'
+) {
   describe('PUI-2964 - DatePicker - Single-Range, select date from calendar', () => {
     before('loading page', async () => {
       await DG.filterableForDatesURL.go();

package/ds-datagrids/DSDatagrids-filterable.func.spec.js

@@ -95,6 +95,8 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await pillTitle.waitForDisplayed();
       const removablePill0 = await DG.getRemovablePills(0);
       const removablePill1 = await DG.getRemovablePills(1);
+      await removablePill0.waitForDisplayed();
+      await removablePill1.waitForDisplayed();
       await expect(pillTitle).toHaveTextContaining('Name');
       await expect(removablePill0).toHaveTextContaining('Chris');
       await expect(removablePill1).toHaveTextContaining('Mark');

package/ds-datagrids/DSDatagrids-toolbar.visual.spec.js

@@ -1,6 +1,10 @@
 import DG from './DatagridObject';
 
-if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName !== 'Safari'
+) {
   describe('PUI-6228 - DataGrid, on scrolling toolbar should be sticky', () => {
     beforeEach('loading page', async () => {
       const errorOnGo = await DG.performanceURL.go();

package/ds-dataviz/axecore/DSDataViz.extra.axe-core.func.spec.js

@@ -47,8 +47,8 @@ if (
       expect(result.length).toBe(0);
     });
   });
-
-  describe('PUI-11381 - DSDataViz, Within dialog -AxeCore', () => {
+  // unskip after PUI-11614 is fixed
+  describe.skip('PUI-11381 - DSDataViz, Within dialog -AxeCore', () => {
     before('loading page', async () => {
       const errorOnGo = await DSDataVizCO.dialogTest.go();
       if (errorOnGo) throw errorOnGo;