dimsum-e2e-tests 3.22.0-next.36

package/ds-toast/DSToast.axe-core.func.spec.js

@@ -0,0 +1,35 @@
+import DSToastCO from './DSToastCO';
+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-10331 -  Toast:: axe-core accessibility test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.multipleToastURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display 4 toasts after clicking the button', async () => {
+      const triggerButton = await DSToastCO.getBtn();
+      await triggerButton.click();
+
+      // eslint-disable-next-line wdio/no-pause
+      await browser.pause(500);
+      const toast1 = await DSToastCO.getToastBoxesByIndex(0);
+      const toast2 = await DSToastCO.getToastBoxesByIndex(1);
+      const toast3 = await DSToastCO.getToastBoxesByIndex(2);
+      const toast4 = await DSToastCO.getToastBoxesByIndex(3);
+
+      await toast1.waitForDisplayed({ timeout: 5000 });
+      await toast2.waitForDisplayed({ timeout: 5000 });
+      await toast3.waitForDisplayed({ timeout: 5000 });
+      await toast4.waitForDisplayed({ timeout: 5000 });
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-toast/DSToast.func.spec.js

@@ -0,0 +1,29 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSToastCO from './DSToastCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9472 -  Toast, success long text visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.withLinkURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should open toast and focus close button', async () => {
+      // await browser.keys(Key.Tab);
+      const triggerButton = await DSToastCO.getBtn();
+      await triggerButton.click();
+      const closeButton = await DSToastCO.getCloseButton();
+      await expect(closeButton).toBeFocused();
+    });
+    it('02: should tab to focus content with link', async () => {
+      await browser.keys(Key.Tab);
+      const closeButton = await DSToastCO.getContent();
+      await expect(closeButton).toBeFocused();
+    });
+    it('03: should tab to focus close button again', async () => {
+      await browser.keys(Key.Tab);
+      const closeButton = await DSToastCO.getCloseButton();
+      await expect(closeButton).toBeFocused();
+    });
+  });
+}

package/ds-toast/DSToast.visual.spec.js

@@ -0,0 +1,222 @@
+/* eslint-disable wdio/no-pause */
+import { mouseOver } from '../helpers';
+import DSToastCO from './DSToastCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4245 -  Toast, success long text visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.longTextURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('toast should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToastCO.getBtn()).waitForDisplayed({ timeout: 5000 });
+      await (await DSToastCO.getBtn()).click();
+      const toast = await DSToastCO.getToastBox();
+      await toast.waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('toast-success-long'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-5506 -  Toast with link', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.withLinkURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('toast with link should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToastCO.getBtn()).waitForDisplayed({ timeout: 5000 });
+      await (await DSToastCO.getBtn()).click();
+      const toast = await DSToastCO.getToastBox();
+      await toast.waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('with-link'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9466 -  Toast Error', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.errorURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display error toast correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToastCO.getBtn()).waitForDisplayed({ timeout: 5000 });
+      await (await DSToastCO.getBtn()).click();
+      const toast = await DSToastCO.getToastBox();
+      await toast.waitForDisplayed({ timeout: 5000 });
+      await mouseOver(toast);
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('toast-error'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9467 -  Toast Info', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.infoURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('shoudl display info toast correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToastCO.getBtn()).waitForDisplayed({ timeout: 5000 });
+      await (await DSToastCO.getBtn()).click();
+      const toast = await DSToastCO.getToastBox();
+      await toast.waitForDisplayed({ timeout: 5000 });
+      await mouseOver(toast);
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('toast-info'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9468 -  Toast Warning', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.warningURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display warning toast correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToastCO.getBtn()).waitForDisplayed({ timeout: 5000 });
+      await (await DSToastCO.getBtn()).click();
+      const toast = await DSToastCO.getToastBox();
+      await toast.waitForDisplayed({ timeout: 5000 });
+      await mouseOver(toast);
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('toast-warning'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9469 -  Toast long with link', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.longTextWithLinkURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display long toast with link correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToastCO.getBtn()).waitForDisplayed({ timeout: 5000 });
+      await (await DSToastCO.getBtn()).click();
+      const toast = await DSToastCO.getToastBox();
+      await toast.waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('toast-long-with-link'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9470 -  Toast before dialog (and above dialog)', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.withDialogTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display toast above dialog even if displayed before', async () => {
+      await browser.eyesOpen();
+      const openToastBtn = await DSToastCO.openToastBtn();
+      await openToastBtn.click();
+      const toast = await DSToastCO.getToastBox();
+      await toast.waitForDisplayed({ timeout: 5000 });
+      const openDialogButton = await DSToastCO.getOpenDialogBtn();
+      await openDialogButton.click();
+      await mouseOver(toast);
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('toast-dialog'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display a second toast above dialog', async () => {
+      await browser.eyesOpen();
+      const openToastBtnInsideDialog = await DSToastCO.openToastBtnInsideDialog();
+      await openToastBtnInsideDialog.click();
+      const toast = await DSToastCO.getToastBoxes();
+      await toast[1].waitForDisplayed({ timeout: 5000 });
+      await mouseOver(toast[1]);
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('second-toast-dialog'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10329 -  Toast:: position test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.positionURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    // eslint-disable-next-line max-statements
+    it('01: toast should be displayed correctly in every position', async () => {
+      await browser.eyesOpen();
+      const topLeftBtn = await DSToastCO.openToastPositionBtn('top-left');
+      const topCenterBtn = await DSToastCO.openToastPositionBtn('top-center');
+      const topRigthBtn = await DSToastCO.openToastPositionBtn('top-right');
+      const bottomLeftBtn = await DSToastCO.openToastPositionBtn('bottom-left');
+      const bottomCenterBtn = await DSToastCO.openToastPositionBtn('bottom-center');
+      const bottomRightBtn = await DSToastCO.openToastPositionBtn('bottom-right');
+      await topLeftBtn.click();
+      await topCenterBtn.click();
+      await topRigthBtn.click();
+      await bottomLeftBtn.click();
+      await bottomCenterBtn.click();
+      await bottomRightBtn.click();
+      await browser.pause(2000);
+
+      const topLeftToast = await DSToastCO.getToastByPosition('top-left');
+      const topCenterToast = await DSToastCO.getToastByPosition('top-center');
+      const topRightToast = await DSToastCO.getToastByPosition('top-right');
+      const bottomLeftToast = await DSToastCO.getToastByPosition('bottom-left');
+      const bottomCenterToast = await DSToastCO.getToastByPosition('bottom-center');
+      const bottomRightToast = await DSToastCO.getToastByPosition('bottom-right');
+
+      await topLeftToast.waitForDisplayed({ timeout: 5000 });
+      await topCenterToast.waitForDisplayed({ timeout: 5000 });
+      await topRightToast.waitForDisplayed({ timeout: 5000 });
+      await bottomLeftToast.waitForDisplayed({ timeout: 5000 });
+      await bottomCenterToast.waitForDisplayed({ timeout: 5000 });
+      await bottomRightToast.waitForDisplayed({ timeout: 5000 });
+
+      const snapshot = await browser.eyesCheckSnapshot(DSToastCO.snapshotPath('toast-position'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-10330 - Toast::  Multiple toast test - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.multipleToastURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display 4 toasts after clicking the button', async () => {
+      await browser.eyesOpen();
+
+      const triggerButton = await DSToastCO.getBtn();
+      await triggerButton.click();
+
+      await browser.pause(500);
+
+      const toast1 = await DSToastCO.getToastBoxesByIndex(0);
+      const toast2 = await DSToastCO.getToastBoxesByIndex(1);
+      const toast3 = await DSToastCO.getToastBoxesByIndex(2);
+      const toast4 = await DSToastCO.getToastBoxesByIndex(3);
+
+      await toast1.waitForDisplayed({ timeout: 5000 });
+      await toast2.waitForDisplayed({ timeout: 5000 });
+      await toast3.waitForDisplayed({ timeout: 5000 });
+      await toast4.waitForDisplayed({ timeout: 5000 });
+
+      const snapshot = await browser.eyesCheckSnapshot('toast-multiple');
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10346 - Toast::  Custom Color test - visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToastCO.customColorURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display error toast with custom color', async () => {
+      await browser.eyesOpen();
+
+      const triggerButton = await DSToastCO.getBtn();
+      await triggerButton.click();
+
+      await browser.pause(500);
+
+      const toast1 = await DSToastCO.getToastBox();
+      await toast1.waitForDisplayed({ timeout: 5000 });
+
+      const snapshot = await browser.eyesCheckSnapshot('toast-custom-color');
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-toast/DSToastCO.js

@@ -0,0 +1,84 @@
+import { PATH_E2E_TOAST } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSToastCO extends PageObject {
+  // Desktop
+  static customColorURL = new Urlbuilder(PATH_E2E_TOAST, 'custom-color-test');
+
+  static errorURL = new Urlbuilder(PATH_E2E_TOAST, 'error-test');
+
+  static infoURL = new Urlbuilder(PATH_E2E_TOAST, 'info-test');
+
+  static longTextURL = new Urlbuilder(PATH_E2E_TOAST, 'long-text-test');
+
+  static longTextWithLinkURL = new Urlbuilder(PATH_E2E_TOAST, 'long-text-with-link');
+
+  static multipleToastURL = new Urlbuilder(PATH_E2E_TOAST, 'multiple-toast-test');
+
+  static positionURL = new Urlbuilder(PATH_E2E_TOAST, 'position-test');
+
+  static warningURL = new Urlbuilder(PATH_E2E_TOAST, 'warning-test');
+
+  static withDialogTest = new Urlbuilder(PATH_E2E_TOAST, 'with-dialog-test');
+
+  static withLinkURL = new Urlbuilder(PATH_E2E_TOAST, 'with-link-test');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Toast', example);
+  }
+
+  static async getBtn() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async getButtons() {
+    return $$('[data-testid="ds-button"]');
+  }
+
+  static getButtonsByIndex = async (index) => getElementByIndex(this.getButtons, index);
+
+  static async getToastBox() {
+    return $('[data-testid="ds-toast-render"]');
+  }
+
+  static async getToastBoxes() {
+    return $$('[data-testid="ds-toast-render"]');
+  }
+
+  static getToastBoxesByIndex = async (index) => getElementByIndex(this.getToastBoxes, index);
+
+  static async getOpenDialogBtn() {
+    return $('[data-testid="open-dialog-button"]');
+  }
+
+  static async openToastBtn() {
+    return $('[data-testid="open-toast-button"]');
+  }
+
+  static async openToastBtnInsideDialog() {
+    return $('[data-testid="open-toast-button-inside-dialog"]');
+  }
+
+  static async openToastPositionBtn(position) {
+    return $(`[data-testid="ds-button-${position}"]`);
+  }
+
+  static async getCloseButton() {
+    return $(`[data-testid="ds-toast-close-button"]`);
+  }
+
+  static async getContent() {
+    return $(`[data-testid="ds-toast-action-root"]`);
+  }
+
+  static async getToastByPosition(position) {
+    // Reemplaza 'top-left' en la clase por la posición proporcionada
+    const positionClass = `Toastify__toast-container--${position}`;
+    const toastSelector = `.Toastify__toast-container.${positionClass}`;
+
+    return $(toastSelector);
+  }
+
+  static getToastBoxByIndex = async (index) => getElementByIndex(this.getToastBoxes, index);
+}

package/ds-toolbar/Toolbar.func.spec.js

@@ -0,0 +1,26 @@
+import ToolbarCO from './ToolbarCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4327 - Toolbar, auto close after copying', () => {
+    before(async () => {
+      const errorOnGo = await ToolbarCO.pui3487.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Datagrid should be displayed', async () => {
+      const toolbarBtn = await ToolbarCO.getToolbarButton(0);
+      await expect(toolbarBtn).toBeDisplayed();
+    });
+    it('should display tooltip', async () => {
+      await (await ToolbarCO.getToolbarButton(0)).moveTo();
+      await (await ToolbarCO.getToolbarButton(0)).click();
+      const phoneIcon = await ToolbarCO.getPhoneIcon();
+      await expect(phoneIcon).toBeDisplayed();
+    });
+    it('tooltip should be closed after copying', async () => {
+      await (await ToolbarCO.getPhoneIcon()).click();
+      await (await ToolbarCO.getCopyBtn()).click();
+      const phoneIcon = await ToolbarCO.getPhoneIcon();
+      await expect(phoneIcon).not.toBeExisting();
+    });
+  });
+}

package/ds-toolbar/ToolbarCO.js

@@ -0,0 +1,23 @@
+import { PATH_E2E_DATA_GRID } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class ToolbarCO extends PageObject {
+  static pui3487 = new Urlbuilder(PATH_E2E_DATA_GRID, 'pui-3487-icon-bar-with-ddwn');
+
+  static async getToolbarButton(index) {
+    return $$('[data-testid="toolbar-trigger"]')[index];
+  }
+
+  static async getPhoneIcon() {
+    return $('#phone-icon');
+  }
+
+  static async getCopyBtn() {
+    return $('[data-testid="dg-toolbar-btn"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Toolbar', example, 'ds-toolbar');
+  }
+}

package/ds-toolbar-v2/DSToolbarV2.func.spec.js

@@ -0,0 +1,61 @@
+import { Key } from 'webdriverio';
+import DSToolbarV2CO from './DSToolbarV2CO';
+
+if (
+  !browser.capabilities['ice:options'].isPhone &&
+  !browser.capabilities['ice:options'].isTablet &&
+  browser.capabilities.browserName !== 'Safari'
+) {
+  describe('PUI-8955 - Toolbar, click interaction', () => {
+    before(async () => {
+      const errorOnGo = await DSToolbarV2CO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Should focus the clicked item', async () => {
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      await toolbarItem.click();
+      await expect(toolbarItem).toBeFocused();
+    });
+    it('Should change focus when clicking other item', async () => {
+      const firstToolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(1);
+      await toolbarItem.click();
+      await expect(toolbarItem).toBeFocused();
+      await expect(firstToolbarItem).not.toBeFocused();
+    });
+  });
+  describe('PUI-8956 - Toolbar, keyboard interaction', () => {
+    before(async () => {
+      const errorOnGo = await DSToolbarV2CO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Should focus first toolbar item after tab is pressed', async () => {
+      await browser.keys(Key.Tab);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      await expect(toolbarItem).toBeFocused();
+    });
+    it('Should move focus using arrow keys', async () => {
+      await browser.keys(Key.ArrowRight);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(1);
+      await expect(toolbarItem).toBeFocused();
+    });
+    it('Should cyrcle back to start after pressing RightArrow from the last item', async () => {
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowRight);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      await expect(toolbarItem).toBeFocused();
+    });
+    it('Should focus out of the toolbar with tab', async () => {
+      await browser.keys(Key.Tab);
+      const toolbarItem = await DSToolbarV2CO.getToolbarItem(0);
+      const toolbarItem2 = await DSToolbarV2CO.getToolbarItem(1);
+      const toolbarItem3 = await DSToolbarV2CO.getToolbarItem(2);
+      const toolbarItem4 = await DSToolbarV2CO.getToolbarItem(3);
+      await expect(toolbarItem).not.toBeFocused();
+      await expect(toolbarItem2).not.toBeFocused();
+      await expect(toolbarItem3).not.toBeFocused();
+      await expect(toolbarItem4).not.toBeFocused();
+    });
+  });
+}

package/ds-toolbar-v2/DSToolbarV2.visual.spec.js

@@ -0,0 +1,94 @@
+import { Key } from 'webdriverio';
+import { mouseOver } from '../helpers';
+import DSToolbarV2CO from './DSToolbarV2CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8958 -  Toolbar V2, left aligned', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.aligneLeftURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 left aligned should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      await browser.keys(Key.Tab);
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-left-aligned'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8960 -  Toolbar V2, compact', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.compactURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 compact should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-compact'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8962 -  Toolbar V2, responsive', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.responsiveURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 responsive  should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-responsive'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8959 -  Toolbar V2, no depth', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.withoutDepthURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 without depth should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      await mouseOver(await DSToolbarV2CO.getToolbarItem(0));
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-without-depth'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8961 -  Toolbar V2, with groups', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.groupsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 with groups should be displayed correctly', async () => {
+      await browser.eyesOpen();
+      await (await DSToolbarV2CO.getToolbarItem(0)).waitForDisplayed({ timeout: 5000 });
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.ArrowRight);
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-with-groups'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8957 -  Toolbar V2, basic interaction states', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSToolbarV2CO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Toolbar v2 styles (hover one and focus other) be displayed correctly', async () => {
+      await browser.eyesOpen();
+      const toolbarItem1 = await DSToolbarV2CO.getToolbarItem(0);
+      const toolbarItem2 = await DSToolbarV2CO.getToolbarItem(1);
+      await toolbarItem1.click();
+      await mouseOver(toolbarItem2);
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-basic-two-interacted'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('Toolbar v2 styles (hover and focus) be displayed correctly', async () => {
+      await browser.eyesOpen();
+      const toolbarItem1 = await DSToolbarV2CO.getToolbarItem(0);
+      await toolbarItem1.click();
+      await mouseOver(toolbarItem1);
+      const snapshot = await browser.eyesCheckSnapshot(DSToolbarV2CO.snapshotPath('toolbarv2-basic-one-interacted'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-toolbar-v2/DSToolbarV2CO.js

@@ -0,0 +1,31 @@
+import { PATH_TOOLBAR_V2, PATH_E2E_TOOLBAR_V2 } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSToolbarV2CO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'basic-e-2-e');
+
+  static aligneLeftURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'align-left-e-2-e');
+
+  static compactURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'compact-e-2-e');
+
+  static fullexampleURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'full-example-e-2-e');
+
+  static groupsURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'groups-e-2-e');
+
+  static responsiveURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'responsive-e-2-e');
+
+  static withoutDepthURL = new Urlbuilder(PATH_E2E_TOOLBAR_V2, 'without-depth-e-2-e');
+
+  static async getToolbarWrapper() {
+    return $('[data-testid="ds-toolbar-wrapper"]');
+  }
+
+  static async getToolbarItem(index) {
+    return $$('[data-testid="ds-toolbar-item"] button')[index];
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ToolbarV2', example, 'ds-toolbar-v2');
+  }
+}