dimsum-e2e-tests 1.0.0-rc.1

package/ds-global-header/GlobalHeader.visual.spec.js

@@ -0,0 +1,141 @@
+import { Key } from 'webdriverio';
+import GlobalHeader from './GlobalHeaderCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6310 - GlobalHeader: visual test', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display basic GlobalHeader', async () => {
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-header-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6353 - GlobalHeader: breadcrumb', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display first tab focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-header-focused'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display second tab selected', async () => {
+      await (await GlobalHeader.getGHBreadcrumbBtn('loan')).click();
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-header-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should display third tab with onhover state', async () => {
+      if (browser.capabilities.browserName !== 'firefox') {
+        await mouseOver(await GlobalHeader.getGHBreadcrumbBtn('task'));
+      } else {
+        await (await GlobalHeader.getGHBreadcrumbBtn('task')).moveTo();
+      }
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-header-onhover'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6354 - GlobalHeader: toolbar', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display appPicker menu opened', async () => {
+      await (await GlobalHeader.getGHToolbarItem(0)).click();
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-header-appPicker'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6419 - GlobalHeader: One Tab', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.oneTab.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should not display underline when there is only one Tab', async () => {
+      await (await GlobalHeader.getGHBreadcrumbBtn('pipeline')).click();
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-header-no-underline'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6454 - GlobalHeader, Responsive Behavior - Visual Test', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.resizedURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display display globalheader without brand', async () => {
+      await (await GlobalHeader.getToggleWidthButon()).click();
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-header-no-brand'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display display globalheader with brand', async () => {
+      await (await GlobalHeader.getToggleWidthButon()).click();
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-header-with-brand'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8470 - GlobalHeader, Background color prop - Visual Test', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.backgroundURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display display globalheader with red background', async () => {
+      const snapshot = await browser.checkSnapshot(GlobalHeader.snapshotPath('global-custom-background'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9247 - GlobalHeader, Custom Navigation - Visual Test', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.customNavigation.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display custom navigation - menu closed', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(
+        GlobalHeader.snapshotPath('global-custom-navigation-menu-closed'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('01: should display custom navigation - menu opened', async () => {
+      await browser.eyesOpen();
+      const customNavBtn = await GlobalHeader.getCustomNavButton();
+      await customNavBtn.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        GlobalHeader.snapshotPath('global-custom-navigation-menu-opened'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9495 - GlobalHeader, Sanitize CSS - visual - Visual Test', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.sanitizeCss.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display GlobalHeader correctly with sanitize.css imported', async () => {
+      await browser.eyesOpen();
+      const sanitizeCss = await GlobalHeader.sanitizeCssCheck();
+      await sanitizeCss.waitForExist();
+      const snapshot = await browser.eyesCheckSnapshot(GlobalHeader.snapshotPath('global-sanitize-css'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-7693 - GlobalHeader: Submenu icons - Visual Test', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.sanitizeCss.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display GlobalHeader correctly with sanitize.css imported', async () => {
+      await browser.eyesOpen();
+      const thirdActionButton = await GlobalHeader.getGHToolbarItem(1);
+      await thirdActionButton.click();
+      const snapshot = await browser.eyesCheckSnapshot(GlobalHeader.snapshotPath('global-submenu-items'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-global-header/GlobalHeaderCO.js

@@ -0,0 +1,65 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_GLOBAL_HEADER_EXAMPLES, PATH_E2E_GLOBAL_HEADER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class GlobalHeader extends PageObject {
+  static basicURL = new Urlbuilder(PATH_GLOBAL_HEADER_EXAMPLES, 'basic');
+
+  static oneTab = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'one-tab');
+
+  static resizedURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'global-header-resized');
+
+  static backgroundURL = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'background');
+
+  static customNavigation = new Urlbuilder(PATH_GLOBAL_HEADER_EXAMPLES, 'custom-breadcrumb');
+
+  static sanitizeCss = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'sanitize-css');
+
+  static customAttributes = new Urlbuilder(PATH_E2E_GLOBAL_HEADER, 'custom-attributes');
+
+  // Selectors
+  static async getGHBreadcrumbBtn(label) {
+    return $(`//a[@data-testid="gh-breadcrumb-btn"]/span[contains(text(),"${label}")]/ancestor::a`);
+  }
+
+  static async getGHToolbarItem(index) {
+    return $$('[data-testid="gh-toolbar-item"]')[index];
+  }
+
+  static async getToggleWidthButon() {
+    return $('[data-testid="toggle-width"]');
+  }
+
+  static async getCustomNavButton() {
+    return $('button*=I am the reference element');
+  }
+
+  static async sanitizeCssCheck() {
+    return $('//link[contains(@href,"sanitize.css")]');
+  }
+
+  static async getElByDataTestid(datatestid) {
+    return $(`[data-testid=${datatestid}]`);
+  }
+
+  static async getAppPicker() {
+    return $('[data-testid="app-picker__wrapper"]');
+  }
+
+  static async getChipByIndex(index = 0) {
+    return $('[data-testid="ds-app-picker-item"]')[index];
+  }
+
+  static async getPopupContent() {
+    return $('[data-testid="ds-global-header-menubar-item-popupmenu-list"]');
+  }
+
+  static async getMainContent() {
+    return $('[id="my-main-content"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('GlobalHeader', example, 'ds-global-header');
+  }
+}

package/ds-grid/DSGrid.axe-core.func.spec.js

@@ -0,0 +1,93 @@
+import { Key } from 'webdriverio';
+import DSGridCO from './DSGridCO';
+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-11301 - DSGrid - Table - AxeCore Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.tableTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid as table and pass axe-core scan', async () => {
+      const grid = await DSGridCO.getGridByRGBA('30, 121, 194, 0.2');
+      await grid.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11302 - DSGrid - Span - AxeCore Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.span.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with span and pass axe-core scan', async () => {
+      const grid = await DSGridCO.getDivByStyle(
+        'style="background: rgba(30, 121, 194, 0.4); margin: 5px; border-radius: 5px;"',
+      );
+      await grid.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11303 - DSGrid - Multiple cols/rows - AxeCore Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.multipleColsRows.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with multiple columns and rows and pass axe-core scan', async () => {
+      const grid = await DSGridCO.getGridByRGBA('30, 121, 194, 0.2');
+      await grid.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11304 - DSGrid - Scrollable region - AxeCore Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.dynamicRows.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with scrollable region and pass axe-core scan', async () => {
+      const grid = await DSGridCO.getGridByIndex(0);
+      await grid.waitForDisplayed();
+      await browser.keys(Key.Tab);
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11305 - DSGrid - Header/Footer - AxeCore Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.stickyHeaderFooter.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with header and footer and pass axe-core scan', async () => {
+      const grid = await DSGridCO.getDivByStyle(
+        'style="background: rgba(30, 121, 194, 0.4); padding-top: 10px; text-align: center;"',
+      );
+      await grid.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11306 - DSGrid - Breakpoints - AxeCore Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.breakpointsV2.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with breakpoints and pass axe-core scan', async () => {
+      const grid = await DSGridCO.getGridByRGBA('30, 121, 194, 0.2');
+      await grid.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-grid/DSGrid.visual.mobile.spec.js

@@ -0,0 +1,65 @@
+import DSGridCO from './DSGridCO';
+
+if (browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-8330 - DSGrid - Backgrounds - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.backgroundColorUrl.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.setOrientation('LANDSCAPE');
+    });
+    it('01: should display the ds grid with different backgrounds', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-mob-backgrounds'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8329 - DSGrid - Boxshadows - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.boxshadowUrl.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.setOrientation('LANDSCAPE');
+    });
+    it('01: should display the ds grid with different boxshadows', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-mob-boxshadows'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8388 - DSGrid - Border - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.borderUrl.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.setOrientation('LANDSCAPE');
+    });
+    it('01: should display the ds grid with different borders', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-mob-border'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8389 - DSGrid - BorderRadius - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.borderRadiusURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.setOrientation('LANDSCAPE');
+    });
+    it('01: should display the ds grid with different border radiuses', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-mob-border-radius'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8628 - DSGrid - ReadOnly Table - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.tableReadOnlyURL.go();
+      if (errorOnGo) throw errorOnGo;
+      await browser.setOrientation('LANDSCAPE');
+    });
+    it('01: should correctly display the read only table', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-mob-readonly-table'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-grid/DSGrid.visual.spec.js

@@ -0,0 +1,52 @@
+import { Key } from 'webdriverio';
+import DSGridCO from './DSGridCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-8330 - DSGrid - Backgrounds - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.backgroundColorUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with different backgrounds', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-backgrounds'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10547 - DSGrid - Span - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.span.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with span x3', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-span'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-10548 - DSGrid - Sticky header/footer - Visual Test ', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSGridCO.stickyHeaderFooter.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('01: should display the ds grid with sticky header and footer', async () => {
+        await browser.eyesOpen();
+        const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-sticky-footer'));
+        await expect(snapshot).toEqual(0);
+      });
+      it('02: should scroll the ds grid scrolled with sticky header and footer still displayed', async () => {
+        await browser.eyesOpen();
+        const scrollableBody = await DSGridCO.getScrollableBody();
+        await scrollableBody.click();
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.ArrowDown);
+        const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-sticky-header'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  }
+}

package/ds-grid/DSGridCO.js

@@ -0,0 +1,81 @@
+/* eslint-disable import/no-relative-packages */
+import { PATH_E2E_GRID } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSGridCO extends PageObject {
+  // Desktop
+
+  static alignementURL = new Urlbuilder(PATH_E2E_GRID, 'alignment-test');
+
+  static boxshadowUrl = new Urlbuilder(PATH_E2E_GRID, 'box-shadow-test');
+
+  static basicUrl = new Urlbuilder(PATH_E2E_GRID, 'basic-test');
+
+  static columns = new Urlbuilder(PATH_E2E_GRID, 'columns-test');
+
+  static rows = new Urlbuilder(PATH_E2E_GRID, 'rows-test');
+
+  static dynamicRows = new Urlbuilder(PATH_E2E_GRID, 'dynamic-rows-test');
+
+  static gutter = new Urlbuilder(PATH_E2E_GRID, 'gutter-test');
+
+  static multipleColsRows = new Urlbuilder(PATH_E2E_GRID, 'multiple-columns-and-rows-test');
+
+  static backgroundColorUrl = new Urlbuilder(PATH_E2E_GRID, 'background-color-test');
+
+  static borderUrl = new Urlbuilder(PATH_E2E_GRID, 'border-test');
+
+  static borderRadiusURL = new Urlbuilder(PATH_E2E_GRID, 'border-radius-test');
+
+  static sizing = new Urlbuilder(PATH_E2E_GRID, 'sizing-test');
+
+  static spacing = new Urlbuilder(PATH_E2E_GRID, 'spacing-test');
+
+  static span = new Urlbuilder(PATH_E2E_GRID, 'span-test');
+
+  static stickyHeaderFooter = new Urlbuilder(PATH_E2E_GRID, 'sticky-header-and-footer-test');
+
+  static tableReadOnlyURL = new Urlbuilder(PATH_E2E_GRID, 'table-read-only');
+
+  static tableTest = new Urlbuilder(PATH_E2E_GRID, 'table-test');
+
+  static breakpointsV1 = new Urlbuilder(PATH_E2E_GRID, 'with-breakpoints-test');
+
+  static breakpointsV2 = new Urlbuilder(PATH_E2E_GRID, 'with-breakpoints-v-2-test');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_E2E_GRID, component);
+  }
+
+  static async getButton() {
+    return $(`[data-testid="ds-button"]`);
+  }
+
+  static async getGridByIndex(index = 0) {
+    return $$(`div[style="background: rgba(30, 121, 194, 0.4);"]`)[index];
+  }
+
+  static async getGridByRGBA(rgba = '30, 121, 194, 0.4', index = 0) {
+    return $$(`div[style="background: rgba(${rgba});"]`)[index];
+  }
+
+  static async getDivByStyle(
+    style = 'style="background: rgba(30, 121, 194, 0.4); margin: 5px; border-radius: 5px;"',
+    index = 0,
+  ) {
+    return $$(`div[${style}]`)[index];
+  }
+
+  static async getScrollableBody() {
+    return $(`//div[text()="Scrollable Body"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Grid', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-grid/border/DSGrid.border.visual.spec.js

@@ -0,0 +1,37 @@
+import DSGridCO from '../DSGridCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-8329 - DSGrid - Boxshadows - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.boxshadowUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with different boxshadows', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-boxshadows'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8387 - DSGrid - Border - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.borderUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with different borders', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-border-test'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8388 - DSGrid - BorderRadius - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.borderRadiusURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grid with different border radiuses', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-border-radius'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-grid/breakpoints/DSGrid.breakpoints.visual.spec.js

@@ -0,0 +1,25 @@
+import DSGridCO from '../DSGridCO';
+
+describe('PUI-10545 - DSGrid - BreakPoints V1 - Visual Test ', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSGridCO.breakpointsV1.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('01: should display the ds grid with different layout depending on the viewport', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-breakpoints-min'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-10546 - DSGrid - BreakPoints V2 - Visual Test ', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSGridCO.breakpointsV2.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('01: should display the ds grid with different layout depending on the viewport', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-breakpoints-max'));
+    await expect(snapshot).toEqual(0);
+  });
+});

package/ds-grid/columnsnrows/DSGrid.columnsnrows.visual.spec.js

@@ -0,0 +1,66 @@
+import DSGridCO from '../DSGridCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-8628 - DSGrid - Columns - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.columns.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display the grid with columns', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-columns-table'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10542 - DSGrid -  Rows - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.rows.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display the grid with rows', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-rows-test'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10543 - DSGrid -  Dynamic Rows - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.dynamicRows.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should correctly display five grid rows', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-dynrows-test'));
+      await expect(snapshot).toEqual(0);
+    });
+    if (
+      browser.capabilities.browserName !== 'Safari' &&
+      !browser.capabilities['ice:options'].isTablet &&
+      !browser.capabilities['ice:options'].isPhone
+    ) {
+      it('02: should add rows and scroll down', async () => {
+        await browser.eyesOpen();
+        const button = await DSGridCO.getButton();
+        await button.click();
+        const lastGrid = await DSGridCO.getGridByIndex(9);
+        await lastGrid.scrollIntoView();
+        const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-more-dynrows-test'));
+        await expect(snapshot).toEqual(0);
+      });
+    }
+  });
+
+  describe('PUI-10544 - DSGrid -  Multiple cols and rows - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.multipleColsRows.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should correctly display the grid with multiple rows and columns', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-multi-cols-rows'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-grid/display/DSGrid.layout.visual.spec.js

@@ -0,0 +1,39 @@
+import DSGridCO from '../DSGridCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-10540 - DSGrid - Sizing - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.sizing.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grids with fixed sizes', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-sizes'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10541 - DSGrid - Spacing - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.spacing.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grids with different spacings', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-spacing'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10539 - DSGrid - Alignmenent - Visual Test ', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSGridCO.alignementURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the ds grids with different alignments', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(DSGridCO.snapshotPath('dsgrid-alignments'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}