dimsum-e2e-tests 3.22.0-next.36

package/ds-mobile/Tooltip/TooltipCO.js

@@ -0,0 +1,23 @@
+import { PATH_MOBILE_TOOLTIP } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class TooltipCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_MOBILE_TOOLTIP, 'basic');
+
+  static async getPortal() {
+    return $('[data-testid="portal"]');
+  }
+
+  static async getLeftIconButton() {
+    return $('[data-testid="left-icon-button"]');
+  }
+
+  static async getRightIconButton() {
+    return $('[data-testid="right-icon-button"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('MobileTooltip', example, 'ds-mobile');
+  }
+}

package/ds-mobile/helpers.js

@@ -0,0 +1,7 @@
+export * from '../helpers';
+export const DEVICE = {
+  IPHONE_5: 'iPhone 5',
+  IPHONE_6: 'iPhone 6',
+  IPHONE_8: 'iPhone 8',
+  IPHONE_X: 'iPhone X',
+};

package/ds-modal/Modal.func.spec.js

@@ -0,0 +1,35 @@
+import ModalCO from './ModalCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('Modal', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ModalCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('width less than or equal 1600px for xxl variant', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getSelectionTypeRadio()).click();
+      await (await ModalCO.getXXLSizeTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getXXLSizeTypeRadio()).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      const isModalSized = (await (await ModalCO.getModal()).getSize()).width <= 1600;
+      await expect(isModalSized).toBe(true);
+    });
+  });
+}
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5888 - Modal - Minimum width', () => {
+    before('loading page', async () => {
+      const errorOnGo = await ModalCO.informationURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the information modal with a minimum width of 300px', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      const informationModal = await ModalCO.getInformationModal();
+      await informationModal.waitForDisplayed();
+      const modalWidth = (await informationModal.getSize()).width;
+      await expect(modalWidth).toBeGreaterThanOrEqual(300);
+    });
+  });
+}

package/ds-modal/Modal.visual.spec.js

@@ -0,0 +1,84 @@
+import ModalCO from './ModalCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-5182 - Modal: visual tests', () => {
+    beforeEach(async () => {
+      const errorOnGo = await ModalCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('information variant', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getSelectionTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('information-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('selection variant', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getSelectionTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getSelectionTypeRadio()).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('selection-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('selection XXL variant - should keep 24px margin', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getSelectionTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getSelectionTypeRadio()).click();
+      await (await ModalCO.getXXLSizeTypeRadio()).waitForClickable({ timeout: 5000 });
+      await (await ModalCO.getXXLSizeTypeRadio()).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('selection-xxl-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-7036 - Modal: centered prop', () => {
+    beforeEach(async () => {
+      const errorOnGo = await ModalCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a decision modal type - centered', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getLabel('Decision')).click();
+      await (await ModalCO.getLabel('Centered')).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('decision-centered'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a selection modal type - size xx-large - centered', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getLabel('Selection')).click();
+      await (await ModalCO.getLabel('Centered')).click();
+      await (await ModalCO.getLabel('xx-large')).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('selection-xxlarge-centered'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a form modal type - size small - centered', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getLabel('Form')).click();
+      await (await ModalCO.getLabel('Centered')).click();
+      await (await ModalCO.getLabel('small')).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('form-small-centered'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a form modal type - size medium - centered', async () => {
+      await ModalCO.wait();
+      await (await ModalCO.getLabel('Form')).click();
+      await (await ModalCO.getLabel('Centered')).click();
+      await (await ModalCO.getLabel('medium')).click();
+      await (await ModalCO.getModalTriggerBtn()).click();
+      await (await ModalCO.getModal()).waitForDisplayed({ timeout: 5000 });
+      const snapshot = await browser.checkSnapshot(ModalCO.snapshotPath('form-medium-centered'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-modal/ModalCO.js

@@ -0,0 +1,43 @@
+import { PATH_END_OF_LIFE_MODAL } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class ModalCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_MODAL, 'basic');
+
+  static informationURL = new Urlbuilder(PATH_END_OF_LIFE_MODAL, 'information');
+
+  static async getModalTriggerBtn() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  static async getSelectionTypeRadio() {
+    // eslint-disable-next-line no-return-await
+    return await $('[data-testid="ds-storybook-modal-selection"]').$('span');
+  }
+
+  static async getXXLSizeTypeRadio() {
+    // eslint-disable-next-line no-return-await
+    return await $('[data-testid="ds-storybook-modal-xxl"]').$('span');
+  }
+
+  static async getModal() {
+    return $('[data-testid="ds-storybook-modal"]');
+  }
+
+  static async wait() {
+    await (await this.getModalTriggerBtn()).waitForDisplayed({ timeout: 5000 });
+  }
+
+  static async getInformationModal() {
+    return $('.em-ds-modal-v2__modal-wrapper');
+  }
+
+  static async getLabel(text) {
+    return $(`span*=${text}`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Modal', example, 'ds-modal');
+  }
+}

package/ds-modal-slide/ModalSlide.func.spec.js

@@ -0,0 +1,69 @@
+import { Key } from 'webdriverio';
+import ModalSlideCO from './ModalSlideCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4707 - ModalSlide:: open/close funcionality', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should be opened correctly', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      const modalSlide = await ModalSlideCO.getModalSlide();
+      await expect(modalSlide).toBeDisplayed();
+    });
+    it('slide should be closed correctly [x]', async () => {
+      await (await ModalSlideCO.getHeaderCloserBtn()).waitForClickable();
+      await (await ModalSlideCO.getHeaderCloserBtn()).click();
+      await (await ModalSlideCO.getToggleSlide()).waitForClickable();
+      const modalSlide = await ModalSlideCO.getModalSlide();
+      await expect(modalSlide).not.toBeDisplayed();
+    });
+    it('slide should be re-opened correctly', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForClickable();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      const modalSlide = await ModalSlideCO.getModalSlide();
+      await expect(modalSlide).toBeDisplayed();
+    });
+    it('slide should be closed correctly [Cancel]', async () => {
+      await (await ModalSlideCO.getRejectedBtn()).waitForClickable();
+      await (await ModalSlideCO.getRejectedBtn()).click();
+      await (await ModalSlideCO.getToggleSlide()).waitForClickable();
+      const modalSlide = await ModalSlideCO.getModalSlide();
+      await expect(modalSlide).not.toBeDisplayed();
+    });
+  });
+  describe('PUI-9521 - ModalSlide:: TabStops, focus order -Funcionality', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should focus close icon when modal slide open, auto focus', async () => {
+      await (await ModalSlideCO.getOpenModal()).waitForDisplayed();
+      await (await ModalSlideCO.getOpenModal()).click();
+      const closeBtn = await ModalSlideCO.getHeaderCloserBtn();
+      await expect(closeBtn).toBeFocused();
+    });
+    it('02: should focus the body content as next tab stop', async () => {
+      await browser.keys(Key.Tab);
+      const rejectBtn = await ModalSlideCO.getBodyContent();
+      await expect(rejectBtn).toBeFocused();
+    });
+    it('03: should focus the cancel button as next tab stop', async () => {
+      await browser.keys(Key.Tab);
+      const rejectBtn = await ModalSlideCO.getRejectedBtn();
+      await expect(rejectBtn).toBeFocused();
+    });
+    it('04: should focus the confirm button as next tab stop', async () => {
+      await browser.keys(Key.Tab);
+      const confirmBtn = await ModalSlideCO.getModalButton();
+      await expect(confirmBtn).toBeFocused();
+    });
+    it('05: should focus the close button again as next tab stop, focus trap', async () => {
+      await browser.keys(Key.Tab);
+      const closeBtn = await ModalSlideCO.getHeaderCloserBtn();
+      await expect(closeBtn).toBeFocused();
+    });
+  });
+}

package/ds-modal-slide/ModalSlide.visual.spec.js

@@ -0,0 +1,120 @@
+/* eslint-disable wdio/no-pause */
+import ModalSlideCO from './ModalSlideCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4434 - ModalSlide:: with datagrid', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.withDataGrid.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should cover all the screen', async () => {
+      await (await ModalSlideCO.getRadio('Extra Tall Body')).waitForDisplayed();
+      await (await ModalSlideCO.getRadio('Extra Tall Body')).click();
+      await (await ModalSlideCO.getToggle(0)).click();
+      await (await $('div*=ON')).waitForDisplayed({ timeout: 10000 });
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('with-data-grid'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-5414 - ModalSlide:: Half container', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should cover half screen', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('half-open-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9519 - ModalSlide:: Without footer', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.withoutFooterURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should cover half screen', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('without-footer-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9516 - ModalSlide:: Full Container & Custom Header', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.customHeaderURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should cover the full container', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('full-open-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9517 - ModalSlide:: Within Modal', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.modalURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should be correctly displayed within a modal', async () => {
+      await browser.eyesOpen();
+      await browser.maximizeWindow();
+      const openModal = await ModalSlideCO.getOpenModal();
+      await openModal.waitForDisplayed();
+      await openModal.click();
+      const modalButton = await ModalSlideCO.getModalButton();
+      await modalButton.waitForDisplayed();
+      await modalButton.click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.eyesCheckSnapshot(ModalSlideCO.snapshotPath('modal-modal-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9518 - ModalSlide:: Without Header', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.withoutHeaderURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('slide should not have a header', async () => {
+      await (await ModalSlideCO.getToggleSlide()).waitForDisplayed();
+      await (await ModalSlideCO.getToggleSlide()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.checkSnapshot(ModalSlideCO.snapshotPath('without-header-slide'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+if (browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-9692 - ModalSlide:: Resize - portrait and landscape on tablet', () => {
+    before(async () => {
+      const errorOnGo = await ModalSlideCO.resize.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display modalslide opened - Portrait', async () => {
+      await browser.eyesOpen();
+      await (await ModalSlideCO.getOpenModalBtn()).waitForDisplayed();
+      await (await ModalSlideCO.getOpenModalBtn()).click();
+      await ModalSlideCO.waitModalSlide();
+      const snapshot = await browser.eyesCheckSnapshot(ModalSlideCO.snapshotPath('modalslide-portrait'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should display modalslide opened - Landscape', async () => {
+      await browser.eyesOpen();
+      await browser.setOrientation('LANDSCAPE');
+      await browser.pause(2000);
+      const snapshot = await browser.eyesCheckSnapshot(ModalSlideCO.snapshotPath('modalslide-landscape'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-modal-slide/ModalSlideCO.js

@@ -0,0 +1,71 @@
+import { PATH_MODAL_SLIDE, PATH_E2E_MODALSLIDE } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class ModalSlideCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'basic-test');
+
+  static customHeaderURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'custom-header-test');
+
+  static modalURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'modal-test');
+
+  static withoutHeaderURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'without-header-test');
+
+  static cardsURL = new Urlbuilder(PATH_MODAL_SLIDE, 'cards');
+
+  static withDataGrid = new Urlbuilder(PATH_MODAL_SLIDE, 'with-data-grid');
+
+  static pui3844 = new Urlbuilder(PATH_E2E_MODALSLIDE, 'pui-3844-date-time-modal-slide');
+
+  static withoutFooterURL = new Urlbuilder(PATH_E2E_MODALSLIDE, 'without-footer-test');
+
+  static resize = new Urlbuilder(PATH_E2E_MODALSLIDE, 'resize');
+
+  static async getModalSlide() {
+    return $('[data-testid="ds-modal-slide"]');
+  }
+
+  static async getRadio(label) {
+    return $(`span*=${label}`);
+  }
+
+  static async getToggle(index) {
+    return $$('[data-testid="em-ds-toggle"]')[index];
+  }
+
+  static async getToggleSlide() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async getRejectedBtn() {
+    return $('[data-testid="modal-footer-reject-btn"]');
+  }
+
+  static async getHeaderCloserBtn() {
+    return $('[data-testid="modal-slider-header-close"]');
+  }
+
+  static async getOpenModal() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async getModalButton() {
+    return $('[data-testid="modal-footer-confirm-btn"]');
+  }
+
+  static async getBodyContent() {
+    return $('[role="contentinfo"]');
+  }
+
+  static async waitModalSlide() {
+    await (await this.getModalSlide()).waitForDisplayed({ timeout: 5000 });
+  }
+
+  static async getOpenModalBtn() {
+    return $('[data-testid="open-modal-slide-button"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('ModalSlide', example, 'ds-modal-slide');
+  }
+}

package/ds-notification-badge/DSNotificationBadge.axe-core.func.spec.js

@@ -0,0 +1,62 @@
+import DSNotificationBadgeCO from './DSNotificationBadgeCO';
+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-11414:: [NotificationBadge] Relate to component - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.relateToComponent.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core when relate to component', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11415:: [NotificationBadge] Background color - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.backgroundColor.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core when have custom background', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+
+  describe('PUI-11416:: [NotificationBadge] Alphanumerical - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.alphaNumerical.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core - Alphanumerical', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11417:: [NotificationBadge] Chip, Icon and Button integration - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.componentCasesTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core - component integration', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+  describe('PUI-11418:: [NotificationBadge] Custom Component Integration - Axe-core Validation', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSNotificationBadgeCO.customComponentTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Evaluate NotificationBadge accessibility with axe-core - custom component integration', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-notification-badge/DSNotificationBadge.visual.spec.js

@@ -0,0 +1,72 @@
+import DSNotificationBadgeCO from './DSNotificationBadgeCO';
+
+describe('PUI-9354:: Notification Badge: Relate to component', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.relateToComponent.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display relate to component', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-relate-to-component'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-9353:: Notification Badge: Disabled', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.disabled.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display disabled badge', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-disabled'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-9352:: Notification Badge: Background color', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.backgroundColor.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display custom background color badges', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-background-color'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-9355:: Notification Badge: Alphanumerical', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.alphaNumerical.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display custom background color badges', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-alpha-chars'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-11412:: Notification Badge: Chip, Icon and Button integration', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.componentCasesTest.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display integration with Chips and Button components correctly', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-component-cases'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+describe('PUI-11413:: Notification Badge: Custom Component Integration', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSNotificationBadgeCO.customComponentTest.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('Should display integration with custom components correctly', async () => {
+    await browser.eyesOpen();
+    const snapshot = await browser.eyesCheckSnapshot(DSNotificationBadgeCO.snapshotPath('badge-custom-component'));
+    await expect(snapshot).toEqual(0);
+  });
+});

package/ds-notification-badge/DSNotificationBadgeCO.js

@@ -0,0 +1,26 @@
+import { PATH_NOTIFICATION_BADGE, PATH_E2E_NOTIFICATION_BADGE } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSPillsCO extends PageObject {
+  // Desktop
+  static relateToComponent = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'relate-to-component-test');
+
+  static backgroundColor = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'background-color-test');
+
+  static disabled = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'disabled-test');
+
+  static alphaNumerical = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'alpha-characters-test');
+
+  static componentCasesTest = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'component-cases-test');
+
+  static customComponentTest = new Urlbuilder(PATH_E2E_NOTIFICATION_BADGE, 'custom-component-test');
+
+  static getUrl(component = 'relate-to-component') {
+    return PageObject.getUrl(PATH_NOTIFICATION_BADGE, component);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'relate-to-component') {
+    return PageObject.getSnapshotPathBuilder('NotificationBadge', example);
+  }
+}