dimsum-e2e-tests 3.22.0-next.36

package/ds-query-builder/DSQueryBuilder.func.spec.js

@@ -0,0 +1,69 @@
+/* eslint-disable wdio/no-pause */
+import DSQueryBuilderCO from './DSQueryBuilderCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5883 - QueryBuilder - Async init - Adding filter', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.asyncInitURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the selected value from a combobox', async () => {
+      await browser.pause(6000);
+      const comboBox = await DSQueryBuilderCO.getComboBox(5);
+      await comboBox.waitForDisplayed();
+      await comboBox.click();
+      const comboOption = await DSQueryBuilderCO.getComboboxOption(2);
+      await comboOption.waitForDisplayed();
+      const comboOptionText = await comboOption.getText();
+      await comboOption.click();
+      const comboInputText = await (await DSQueryBuilderCO.getComboBoxText(5)).getText();
+      await expect(comboOptionText).toBe(comboInputText);
+    });
+  });
+  describe('PUI-5898 - QueryBuilder - Tootip in modal', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.inModalURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the toolbar after pressing any vertical elipses button', async () => {
+      await (await DSQueryBuilderCO.getOpenModalButton()).click();
+      const moreOptionsButton = await DSQueryBuilderCO.getMoreOptionsButton();
+      await moreOptionsButton.click();
+      const queryAddBtn = await DSQueryBuilderCO.getQueryAddButton();
+      await expect(queryAddBtn).toBeDisplayed();
+    });
+  });
+  describe('PUI-6010 - QueryBuilder - Advanced Dependencies', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.advancedDependencies.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display dependency correctly', async () => {
+      await (await DSQueryBuilderCO.getSearchBtn()).waitForDisplayed();
+      await (await DSQueryBuilderCO.getSearchBtn()).click();
+      await (await DSQueryBuilderCO.getModal()).waitForDisplayed();
+      await (await DSQueryBuilderCO.getRadioBtn(5)).click();
+      await (await DSQueryBuilderCO.getApplyBtn()).click();
+      const comboBoxText = await DSQueryBuilderCO.getComboBoxText();
+      const verificationField = await DSQueryBuilderCO.getVerificationField();
+      await expect(comboBoxText).toHaveTextContaining('name 5');
+      await expect(verificationField).toBeDisplayed();
+    });
+  });
+  describe('PUI-6733 - QueryBuilder - Array conditions', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.arrayConditionsURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display additionalInfo: empty', async () => {
+      await (await DSQueryBuilderCO.getAdvDepsButton(0)).click();
+      const depsResult = await DSQueryBuilderCO.getAdvDepsResult();
+      await expect(depsResult).toHaveTextContaining('empty');
+    });
+    it('should display additionalInfo: length 2', async () => {
+      await (await DSQueryBuilderCO.getAdvDepsButton(1)).click();
+      const depsResult = await DSQueryBuilderCO.getAdvDepsResult();
+      await expect(depsResult).toHaveTextContaining('length');
+    });
+  });
+}

package/ds-query-builder/DSQueryBuilder.visual.spec.js

@@ -0,0 +1,121 @@
+import DSQueryBuilderCO from './DSQueryBuilderCO';
+import { mouseOver, type } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6391 - QueryBuilder - Field Date Range Picker', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.dateRangeV2.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should be displayed date range inputs empties', async () => {
+      await (await DSQueryBuilderCO.getDatePickerBtn()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-date-range-empty'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should be displayed calendar opened and range selected', async () => {
+      await (await DSQueryBuilderCO.getDatePickerBtn()).click();
+      await (await DSQueryBuilderCO.getDate(12)).waitForDisplayed();
+      await (await DSQueryBuilderCO.getDate(12)).click();
+      await (await DSQueryBuilderCO.getDate(16)).click();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-date-range-calendar-opened'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should be displayed date range values entered', async () => {
+      await (await DSQueryBuilderCO.getDatePickerBtn()).click();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-date-range-completed'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-6724 - QueryBuilder, Error States', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.errorStatesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the error state properly', async () => {
+      await (await DSQueryBuilderCO.getTextBox(0)).click();
+      await type('this is a test string');
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-error-state'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a tooltip with an error description', async () => {
+      const getErrorIcon = await DSQueryBuilderCO.getErrorIcon();
+      await mouseOver(getErrorIcon, 10, 15);
+      const tooltip = await DSQueryBuilderCO.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+  });
+
+  describe('PUI-6731 - QueryBuilder, Combo Box Multiple - Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.comboBoxMultipleURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display the combobox multi closed properly', async () => {
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-error-combo-multi-closed'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the combobox with all options selected properly opened', async () => {
+      await DSQueryBuilderCO.openComboBox(0);
+      await DSQueryBuilderCO.selectAllMultiComboOptions();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-error-combo-multi-all-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display the combobox with all options selected properly closed', async () => {
+      await $('body').click();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-error-combo-multi-all-selected'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6787 - QueryBuilder: Show/Hide Output - Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.initCustomOutput.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display "SHOW OUTPUT" button', async () => {
+      await (await DSQueryBuilderCO.getOutputBtn()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-show-output'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display Output and "HIDE OUTPUT" button', async () => {
+      await (await DSQueryBuilderCO.getOutputBtn()).click();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-hide-outpu'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-6791 - QueryBuilder: Output Open by default - Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.initCustomOutputOpen.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display output accordion opened', async () => {
+      await (await DSQueryBuilderCO.getOutputBtn()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-output-open'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-7214 - QueryBuilder: Advanced Code Output - Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.advancedCodeOutput.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display advanced code output correctly', async () => {
+      await (await DSQueryBuilderCO.getTitle()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-advanced-code-output'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9533  - QueryBuilder: Adapter  - Visual Tests', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSQueryBuilderCO.adapter.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should print queryBuilder v1 using v2 API adapter', async () => {
+      await (await DSQueryBuilderCO.getOutputAccordion()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSQueryBuilderCO.snapshotPath('qb-adapter'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-query-builder/DSQueryBuilderCO.js

@@ -0,0 +1,153 @@
+/* eslint-disable max-lines */
+import { PATH_QUERY_BUILDER, PATH_E2E_QUERY_BUILDER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSQueryBuilderCO extends PageObject {
+  static asyncInitURL = new Urlbuilder(PATH_QUERY_BUILDER, 'async-init');
+
+  static inModalURL = new Urlbuilder(PATH_E2E_QUERY_BUILDER, 'pui-5837-in-modal');
+
+  static advancedDependencies = new Urlbuilder(PATH_QUERY_BUILDER, 'advanced-dependencies');
+
+  static arrayConditionsURL = new Urlbuilder(PATH_QUERY_BUILDER, 'advanced-dependencies-array');
+
+  static fieldDateRangePicker = new Urlbuilder(PATH_QUERY_BUILDER, 'field-date-range-picker');
+
+  static comboBoxMultipleURL = new Urlbuilder(PATH_QUERY_BUILDER, 'combo-box-multiple');
+
+  static errorStatesURL = new Urlbuilder(PATH_QUERY_BUILDER, 'error-states');
+
+  static initCustomOutput = new Urlbuilder(PATH_QUERY_BUILDER, 'init-custom-output');
+
+  static initCustomOutputOpen = new Urlbuilder(PATH_QUERY_BUILDER, 'init-custom-output-open');
+
+  static fieldPerRowLayoutURL = new Urlbuilder(PATH_QUERY_BUILDER, 'field-per-row-layout');
+
+  static multiSelectTwoInputsURL = new Urlbuilder(PATH_QUERY_BUILDER, 'multi-select-and-two-inputs');
+
+  static advancedCodeOutput = new Urlbuilder(PATH_E2E_QUERY_BUILDER, 'pui-7076-fixed-output');
+
+  static adapter = new Urlbuilder(PATH_E2E_QUERY_BUILDER, 'adapter-test');
+
+  static dateRangeV2 = new Urlbuilder(PATH_QUERY_BUILDER, 'date-range-v-2');
+
+  static async getComboBox(index = 0) {
+    return $$('[data-testid="combobox"]')[index];
+  }
+
+  static async openComboBox(index = 0) {
+    return (await (await this.getComboBox(index)).$('[data-testid="combobox-dropdown-btn"]')).click();
+  }
+
+  static async selectAllMultiComboOptions() {
+    // eslint-disable-next-line no-return-await
+    return await $('[data-testid="combobox-all-btn"]').click();
+  }
+
+  static async getComboBoxes() {
+    return $$('[data-testid="combobox"]');
+  }
+
+  static async getComboboxOption(index = 0) {
+    return $$('[data-testid="combobox-option"]')[index];
+  }
+
+  static async getOpenModalButton() {
+    return $('[data-testid="button-label"]');
+  }
+
+  static async getComboBoxText(index = 0) {
+    return $$('[data-testid="combobox-value-container"] div span')[index];
+  }
+
+  static async getMoreOptionsButton() {
+    return $('[data-testid="and-or-more-options-button"]');
+  }
+
+  static async getQueryAddButton() {
+    return $('[data-testid="query-add-button"]');
+  }
+
+  static async getSearchBtn() {
+    return $('[data-testid="ds-searchfield-search-btn"]');
+  }
+
+  static async getModal() {
+    return $('[data-testid="ds-searchfield-modal"]');
+  }
+
+  static async getRadioBtn(index) {
+    return $$('[data-testid="column-metaData.selected"]')[index];
+  }
+
+  static async getApplyBtn() {
+    return $('span*=Apply');
+  }
+
+  static async getVerificationField() {
+    return $('div*=`UX` was selected');
+  }
+
+  static async getDatePickerBtn() {
+    return $('[data-testid="ds-controlled-date-time-picker-calendar-trigger-icon"]');
+  }
+
+  static async getDate(day) {
+    return $(`//button[@data-testid="ds-controlled-date-time-picker-calendar-day" ][contains(text(), "${day}")]`);
+  }
+
+  static async getDateCalendar() {
+    return $('[data-testid="ds-controlled-date-time-calendar"]');
+  }
+
+  static async getAdvDepsResult() {
+    return $('[data-testid="adv-deps-result"]');
+  }
+
+  static async getAdvDepsButton(index = 0) {
+    return $$('[data-testid="adv-deps-btn"]')[index];
+  }
+
+  static async getOutputBtn() {
+    return $('[data-testid="ds-accordion_item-header"]');
+  }
+
+  static async getMainInput() {
+    return $('[data-testid="ds-input_main-component"]');
+  }
+
+  static async getTextBox(tbNumber) {
+    return browser.waitUntil(
+      async () => {
+        const tb = await $$('[data-testid="ds-input-text-input"]');
+        return tb.length > tbNumber ? tb[tbNumber] : false;
+      },
+      {
+        timeout: 5000,
+        timeoutMsg: 'textbox not shown after 5 secs',
+      },
+    );
+  }
+
+  static async getErrorIcon(index) {
+    const errorIcon = await $$('[data-testid="qb-error-state-icon"]');
+    return index ? errorIcon[index] : $('[data-testid="qb-error-state-icon"]');
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
+  }
+
+  static async getTitle() {
+    return $('strong*=Advanced Code Output');
+  }
+
+  static async getOutputAccordion() {
+    return $('[data-testid="ds-accordion_group"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSQueryBuilder', example, 'ds-querybuilder');
+  }
+}

package/ds-read-more/DSReadMore.func.spec.js

@@ -0,0 +1,117 @@
+import { Key } from 'webdriverio';
+import { mouseOver } from '../helpers';
+import DSReadMoreCO from './DSReadMoreCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-9559: Read More, basic functionality -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.truncatedUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Should toggle between truncated and not truncated mode', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      const buttonText = await button.getText();
+      await expect(buttonText).toEqual('more');
+    });
+    it('02: Should toggle between truncated and not truncated mode', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      await button.click();
+      const buttonText = await button.getText();
+      await expect(buttonText).toEqual('less');
+    });
+    it('03: Should toggle between truncated and not truncated mode', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      await button.click();
+      const buttonText = await button.getText();
+      await expect(buttonText).toEqual('more');
+    });
+  });
+
+  describe('PUI-9560: Read More, custom trigger -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.customButtonUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Should let you configure content of More/Less button', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      const buttonText = await button.getText();
+      await expect(buttonText).toEqual('More!!');
+    });
+    it('02: Should let you configure content of More/Less button', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      await button.click();
+      const buttonText = await button.getText();
+      await expect(buttonText).toEqual('Less!!');
+    });
+  });
+
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-9561: Read More, with tooltip -func', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSReadMoreCO.withTooltip.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('Should display tooltip on trigger hover', async () => {
+        const tooltipTrigger = await DSReadMoreCO.getTooltipTrigger();
+        await mouseOver(tooltipTrigger, 1, 1);
+        const tooltip = await DSReadMoreCO.getTooltip();
+        await expect(tooltip).toBeDisplayed();
+      });
+    });
+  }
+
+  describe('PUI-9562: Read More, not truncated on short texts -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.notTruncatedUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Should not load the More/Less button nor the tooltip trigger', async () => {
+      await (await DSReadMoreCO.getTextBox()).waitForDisplayed();
+      const moreLessBtn = await DSReadMoreCO.getMoreLessButton();
+      const tooltipTrigger = await DSReadMoreCO.getTooltipTrigger();
+      await expect(tooltipTrigger).not.toBeDisplayed();
+      await expect(moreLessBtn).not.toBeDisplayed();
+    });
+  });
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-9612: Read More: withTooltip on responsive (zoom) -func', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSReadMoreCO.widthChange.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('01: should display tooltip on 100px width', async () => {
+        const tooltipTriggerBtns = await DSReadMoreCO.getTooltipTriggers();
+        expect(tooltipTriggerBtns).toHaveLength(2);
+        await mouseOver(tooltipTriggerBtns[0], 1, 1);
+        const firstTooltip = await DSReadMoreCO.getTooltip();
+        await expect(firstTooltip).toBeDisplayedInViewport();
+        await mouseOver(tooltipTriggerBtns[1], 1, 1);
+        const secondTooltip = await DSReadMoreCO.getTooltip();
+        await expect(secondTooltip).toBeDisplayedInViewport();
+      });
+      it('02: should display tooltip on 200px width', async () => {
+        const changeWidthBtn = await DSReadMoreCO.getButton();
+        await changeWidthBtn.click();
+        const tooltipTriggerBtns = await DSReadMoreCO.getTooltipTriggers();
+        expect(tooltipTriggerBtns).toHaveLength(2);
+        await mouseOver(tooltipTriggerBtns[0], 1, 1);
+        const firstTooltip = await DSReadMoreCO.getTooltip();
+        await expect(firstTooltip).toBeDisplayedInViewport();
+        await mouseOver(tooltipTriggerBtns[1], 1, 1);
+        const secondTooltip = await DSReadMoreCO.getTooltip();
+        await expect(secondTooltip).toBeDisplayedInViewport();
+      });
+      it('03: should display tooltip on 300px width', async () => {
+        // close tooltip
+        await browser.keys(Key.Escape);
+        const changeWidthBtn = await DSReadMoreCO.getButton();
+        await changeWidthBtn.click();
+        const tooltipTriggerBtns = await DSReadMoreCO.getTooltipTriggers();
+        expect(tooltipTriggerBtns).toHaveLength(1);
+        await mouseOver(tooltipTriggerBtns[0], 1, 1);
+        const firstTooltip = await DSReadMoreCO.getTooltip();
+        await expect(firstTooltip).toBeDisplayedInViewport();
+      });
+    });
+  }
+}

package/ds-read-more/DSReadMore.visual.spec.js

@@ -0,0 +1,66 @@
+import DSReadMoreCO from './DSReadMoreCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-9563: Read More, basic functionality -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.truncatedUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Should display ReadMore truncated with the MORE button', async () => {
+      await (await DSReadMoreCO.getMoreLessText()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('truncated-more'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: Should display ReadMore not truncated after click with LESS button', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      await button.click();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('truncated-less'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9564: Read More, not truncated on short texts -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.notTruncatedUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('Should display ReadMore not truncated', async () => {
+      await (await DSReadMoreCO.getMoreLessText()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('not-truncated'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-9565: ReadMore, Custom More/Less button -Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSReadMoreCO.customButtonUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Should display ReadMore truncated with the MORE!!! button', async () => {
+      await (await DSReadMoreCO.getMoreLessText()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('custom-button-more'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: Should display ReadMore not truncated after click with LESS!!! button', async () => {
+      const button = await DSReadMoreCO.getMoreLessButton();
+      await button.click();
+      const snapshot = await browser.checkSnapshot(DSReadMoreCO.snapshotPath('custom-button-less'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-9566: Read More, with tooltip -Visual', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSReadMoreCO.withTooltip.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('Should display tooltip on trigger hover', async () => {
+        await browser.eyesOpen();
+        const tooltipTrigger = await DSReadMoreCO.getTooltipTrigger();
+        await mouseOver(tooltipTrigger, 1, 1);
+        const snapshot = await browser.eyesCheckSnapshot(DSReadMoreCO.snapshotPath('readmore-tooltip'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  }
+}

package/ds-read-more/DSReadMoreCO.js

@@ -0,0 +1,52 @@
+import { PATH_E2E_READMORE } from '../../environments/storybook/paths';
+import { Urlbuilder, PageObject } from '../helpers';
+
+export default class DSReadMoreCO extends PageObject {
+  // Desktop
+  static truncatedUrl = new Urlbuilder(PATH_E2E_READMORE, 'truncated-test');
+
+  static notTruncatedUrl = new Urlbuilder(PATH_E2E_READMORE, 'not-truncated-test');
+
+  static customButtonUrl = new Urlbuilder(PATH_E2E_READMORE, 'custom-button-test');
+
+  static withTooltip = new Urlbuilder(PATH_E2E_READMORE, 'with-tooltip-test');
+
+  static widthChange = new Urlbuilder(PATH_E2E_READMORE, 'width-change');
+
+  static async getMoreLessButton() {
+    return $('[data-testid="ds-read_more-button"]');
+  }
+
+  static async getTooltipTriggers() {
+    return $$('[data-testid="ds-tooltip-v3-trigger-wrapper"]');
+  }
+
+  static async getTooltipTrigger() {
+    return $('[data-testid="ds-tooltip-v3-trigger-wrapper"]');
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
+  }
+
+  static async getMoreLessText() {
+    return $('[data-testid="ds-read_more-text"]');
+  }
+
+  static async getTextBox() {
+    return $('div*=This is a very long');
+  }
+
+  static async getButton() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'truncated') {
+    return PageObject.getSnapshotPathBuilder('ReadMore', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}

package/ds-ribbon/DSRibbon.visual.spec.js

@@ -0,0 +1,16 @@
+import DSRibbonCO from './DSRibbonCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4121 - Ribbon visual test', () => {
+    beforeEach(async () => {
+      const errorOnGo = await DSRibbonCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+      const ribbon = await $('div*=Fluid');
+      await ribbon.waitForDisplayed({ timeout: 10000 });
+    });
+    it('should render a basic Ribbon', async () => {
+      const snapshot = await browser.checkSnapshot(DSRibbonCO.snapshotPath('ribbon'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-ribbon/DSRibbonCO.js

@@ -0,0 +1,15 @@
+import { PATH_RIBBON } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSRibbonCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_RIBBON, 'basic');
+
+  static async getRibbon() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Ribbon', example, 'ds-modal');
+  }
+}