dimsum-e2e-tests 3.22.0-next.36

package/ds-treeview/Treeview.visual.spec.js

@@ -0,0 +1,116 @@
+/* eslint-disable wdio/no-pause */
+import DSTreeViewCO from './DSTreeViewCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-3667 - Treeview basic', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.basicUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should render a simple treeview', async () => {
+      await (await DSTreeViewCO.getTreeList()).waitForDisplayed({ timeout: 50000 });
+      const snapshot = await browser.checkSnapshot(DSTreeViewCO.snapshotPath('treeview'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-3668 - Treeview fluid heigth', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.fluidHeightURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should render a container that is `368px` tall', async () => {
+      await (await DSTreeViewCO.getTreeList()).waitForDisplayed({ timeout: 50000 });
+      const snapshot = await browser.checkSnapshot(DSTreeViewCO.snapshotPath('fluid-height-368px'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-3669 - TreeView drag and drop', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.basicUrl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should not drag and drop items/folders with disableDrag and disableDragChildren atributes', async () => {
+      await (await DSTreeViewCO.getTreeList()).waitForDisplayed({ timeout: 50000 });
+      const button = (await $$('[data-testid="tree-item-expand-toggle"]'))[0];
+      await button.click();
+      const dragHandle = (await $$('[data-testid="drag-handle"]'))[1];
+      const target = await $('[data-id="3"]');
+      await dragHandle.dragAndDrop(target);
+      const snapshot = await browser.checkSnapshot(DSTreeViewCO.snapshotPath('treeview-dnd'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-4850 - TreeView: wrapped::', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.wrappAll.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should displaye treeview with wrapAll property', async () => {
+      await (await DSTreeViewCO.getTreeList()).waitForDisplayed({ timeout: 50000 });
+      const snapshot = await browser.checkSnapshot(DSTreeViewCO.snapshotPath('treeview-wrappAll'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-5152 - TreeView: single select::', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.sigleSelect.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display treeview with single select', async () => {
+      await (await DSTreeViewCO.getRow(2)).waitForDisplayed({ timeout: 5000 });
+      await DSTreeViewCO.expandCollapseAll();
+      await (await DSTreeViewCO.radioButton(0)).click();
+      const snapshot = await browser.checkSnapshot(DSTreeViewCO.snapshotPath('treeview-single-select'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8446 - TreeView: multi select::', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.initialCheckedMulti.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display treeview with multi select', async () => {
+      await (await DSTreeViewCO.getRow(2)).waitForDisplayed({ timeout: 5000 });
+      await DSTreeViewCO.expandCollapseAll();
+      await browser.pause(500);
+      const snapshot = await browser.checkSnapshot(DSTreeViewCO.snapshotPath('treeview-multi-select'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-8196 - Treeview: with truncation - visual', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.truncation.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip on truncated item', async () => {
+      await DSTreeViewCO.expandCollapseAll();
+      const fifthRow = await DSTreeViewCO.getRow(5);
+      await fifthRow.waitForDisplayed({ timeout: 5000 });
+      await mouseOver(fifthRow, 100, 18);
+      const tooltip = await DSTreeViewCO.getTooltip();
+      await tooltip.waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTreeViewCO.snapshotPath('treeview-truncation-tooltip'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9121 - Treeview: with toolbar - visual', () => {
+    before(async () => {
+      const errorOnGo = await DSTreeViewCO.withToolbar.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display treeview row toolbar opened', async () => {
+      await browser.eyesOpen();
+      const toolbarTrigger = await DSTreeViewCO.getBtns(3);
+      await toolbarTrigger.click();
+      const snapshot = await browser.eyesCheckSnapshot(DSTreeViewCO.snapshotPath('treeview-toolbar-open'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-typography/DSTypography.func.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-unused-vars */
+import { Key } from 'webdriverio';
+import { mouseOver } from '../helpers';
+import DSTypographyCO from './DSTypographyCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11020 -  Typography, tabStop for link/btn -Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.showcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should tab to first Button typography', async () => {
+      await browser.keys(Key.Tab);
+      const buttonTypo = await DSTypographyCO.getTypographyByIndex(17);
+      await expect(buttonTypo).toBeFocused();
+    });
+    it('should tab to first LINK typography', async () => {
+      await browser.keys(Key.Tab);
+      const linkTypo = await DSTypographyCO.getTypographyByIndex(18);
+      await expect(linkTypo).toBeFocused();
+    });
+  });
+}

package/ds-typography/DSTypography.resize.visual.spec.js

@@ -0,0 +1,69 @@
+/* eslint-disable no-unused-vars */
+import { setTextSize, mouseOver } from '../helpers';
+import DSTypographyCO from './DSTypographyCO';
+
+// unskip and create Jira test cases after all stories are fixed for textResize compability
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe.skip('PUI-xxxx -  Typography, card - text resize', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.cardURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display typography on a card - text resize to 32px', async () => {
+      const typography = await DSTypographyCO.getTypographys();
+      await typography[0].waitForDisplayed();
+      await setTextSize(32);
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-card-resize-32px'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe.skip('PUI-xxxx -  Typography, within form - text resize', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.formURl.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display typography on a form - text resize to 32px', async () => {
+      const typography = await DSTypographyCO.getTypographys();
+      await typography[0].waitForDisplayed();
+      await setTextSize(32);
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-form-resize-32px'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe.skip('PUI-xxxx -  Typography, showcase - text resize', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.showcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display typography showcase', async () => {
+      await setTextSize(32);
+      const typography = await DSTypographyCO.getTypographys();
+      await typography[0].waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-showcase-resize-32px'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display typography showcase with the hoverable typohraphy hovered', async () => {
+      const hoverableTypography = await DSTypographyCO.getTypographyByIndex(6);
+      await hoverableTypography.scrollIntoView();
+      await mouseOver(hoverableTypography);
+      const snapshot = await browser.checkSnapshot(
+        DSTypographyCO.snapshotPath('typography-showcase-hover-text-resize-32px'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe.skip('PUI-xxxx -  Typography, within a dialog - text resize', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.dialogURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display typography on a dialog - text resize to 32px', async () => {
+      await setTextSize(32);
+      const openDialog = await DSTypographyCO.getOpenDialog();
+      await openDialog.click();
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-dialog-resize-32px'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-typography/DSTypography.visual.spec.js

@@ -0,0 +1,72 @@
+/* eslint-disable no-unused-vars */
+import { mouseOver } from '../helpers';
+import DSTypographyCO from './DSTypographyCO';
+
+describe('PUI-8687 -  Typography, card', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSTypographyCO.cardURL.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('should display typography on a card', async () => {
+    const typography = await DSTypographyCO.getTypographys();
+    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-card'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-8688 -  Typography, within form', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSTypographyCO.formURl.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('should display typography on a form', async () => {
+    const typography = await DSTypographyCO.getTypographys();
+    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-form'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8689 -  Typography, within a dialog', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTypographyCO.dialogURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display typography on a dialog', async () => {
+      const openDialog = await DSTypographyCO.getOpenDialog();
+      await openDialog.click();
+      const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-dialog'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}
+
+describe('PUI-8690 -  Typography, showcase', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSTypographyCO.showcaseURL.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('should display typography showcase', async () => {
+    const typography = await DSTypographyCO.getTypographys();
+    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-showcase'));
+    await expect(snapshot).toEqual(0);
+  });
+  it('should display typography showcase with the hoverable typohraphy hovered', async () => {
+    const hoverableTypography = await DSTypographyCO.getTypographyByIndex(6);
+    await mouseOver(hoverableTypography);
+    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-hovered-sc'));
+    await expect(snapshot).toEqual(0);
+  });
+});
+
+describe('PUI-10576 -  Typography, wrapping rule prop', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSTypographyCO.truncationURL.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('01: should display typography showcase', async () => {
+    const typography = await DSTypographyCO.getTypographys();
+    const snapshot = await browser.checkSnapshot(DSTypographyCO.snapshotPath('typography-truncation'));
+    await expect(snapshot).toEqual(0);
+  });
+});

package/ds-typography/DSTypographyCO.js

@@ -0,0 +1,34 @@
+import { PATH_TYPOGRAPHY, PATH_E2E_TYPOGRAPHY } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSTypographyCO extends PageObject {
+  // Desktop
+  static cardURL = new Urlbuilder(PATH_TYPOGRAPHY, 'card');
+
+  static formURl = new Urlbuilder(PATH_TYPOGRAPHY, 'form');
+
+  static dialogURL = new Urlbuilder(PATH_TYPOGRAPHY, 'dialog');
+
+  static showcaseURL = new Urlbuilder(PATH_TYPOGRAPHY, 'show-case');
+
+  static truncationURL = new Urlbuilder(PATH_E2E_TYPOGRAPHY, 'truncation-test');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Typography', example);
+  }
+
+  static async getTypography() {
+    return $('[data-testid="ds-typography-element"]');
+  }
+
+  static async getTypographys() {
+    return $$('[data-testid="ds-typography-element"]');
+  }
+
+  static getTypographyByIndex = async (index) => getElementByIndex(this.getTypographys, index);
+
+  static async getOpenDialog() {
+    return $('[data-testid="open-dialog-button"]');
+  }
+}

package/ds-uploader/Uploader.func.spec.js

@@ -0,0 +1,29 @@
+import UploaderCO from './UploaderCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-4580 - Uploader:: check tooltip', () => {
+    before(async () => {
+      const errorOnGo = await UploaderCO.disableAltURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('uploader is displayed', async () => {
+      const localDriveBtn = await UploaderCO.getButtonByIndex(0);
+      const documentBtn = await UploaderCO.getButtonByIndex(1);
+      await expect(localDriveBtn).toBeDisplayed();
+      await expect(documentBtn).toBeDisplayed();
+    });
+    it('tooltip is displayed when hovering and reads "not disabled"', async () => {
+      await mouseOver(await UploaderCO.getButtonByIndex(0));
+      const tooltip = await UploaderCO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+      await expect(tooltip).toHaveTextContaining('not disabled');
+    });
+    it('tooltip is displayed when hovering and reads "disabled"', async () => {
+      await mouseOver(await UploaderCO.getButtonByIndex(1));
+      const tooltip = await UploaderCO.getTooltip();
+      await expect(tooltip).toBeDisplayed();
+      await expect(tooltip).toHaveTextContaining('disabled');
+    });
+  });
+}

package/ds-uploader/Uploader.visual.spec.js

@@ -0,0 +1,45 @@
+import UploaderCO from './UploaderCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-11510 - Uploader:: check tooltip', () => {
+    before(async () => {
+      const errorOnGo = await UploaderCO.disableAltURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: uploader is displayed', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(UploaderCO.snapshotPath('uploader-displayed-disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: tooltip is displayed when hovering and reads "not disabled"', async () => {
+      await browser.eyesOpen();
+      await mouseOver(await UploaderCO.getButtonByIndex(0));
+      const snapshot = await browser.eyesCheckSnapshot(UploaderCO.snapshotPath('uploader-not-disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: tooltip is displayed when hovering and reads "disabled"', async () => {
+      await browser.eyesOpen();
+      await mouseOver(await UploaderCO.getButtonByIndex(1));
+      const snapshot = await browser.eyesCheckSnapshot(UploaderCO.snapshotPath('uploader-yes-disabled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-11511 - Uploader:: Customization -Visual', () => {
+    before(async () => {
+      const errorOnGo = await UploaderCO.customizationTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: uploader is displayed with visible customization', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(UploaderCO.snapshotPath('uploader-customization-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: uploader displayed and mouseover on button for custom hover style', async () => {
+      await browser.eyesOpen();
+      await mouseOver(await UploaderCO.getButtonByIndex(0));
+      const snapshot = await browser.eyesCheckSnapshot(UploaderCO.snapshotPath('uploader-customization-hover'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-uploader/UploaderCO.js

@@ -0,0 +1,38 @@
+import { PATH_UPLOADER, PATH_E2E_UPLOADER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export const knobs = {
+  disabledAlt: 'knob-Disabled alt',
+  disabledDefault: 'knob-Disabled default',
+  altTooltipText: 'knob-altActionTooltipText',
+  defaultTooltipText: 'knob-defaultActionTooltipText',
+};
+
+export default class Uploader extends PageObject {
+  static basic = new Urlbuilder(PATH_UPLOADER, 'basic');
+
+  static disableAltURL = new Urlbuilder(PATH_UPLOADER, 'disabled-alt');
+
+  static customizationTest = new Urlbuilder(PATH_E2E_UPLOADER, 'customization-test');
+
+  static async getLocalDriveBtn() {
+    return $('//button[@aria-label="LOCAL DRIVE"]');
+  }
+
+  static async getDocumentsBtn() {
+    return $('//button[@aria-label="DOCUMENTS"]');
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="popper-container"]');
+  }
+
+  static async getButtonByIndex(index = 0) {
+    return $$('[data-testid="ds-button"]')[index];
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Uploader', example, 'ds-uploader');
+  }
+}

package/ds-virtuallist/DSVirtualList.visual.spec.js

@@ -0,0 +1,31 @@
+import DSVirtualListCO from './DSVirtualListCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8090 - VirtualList, dynamic changes - visual test', () => {
+    before(async () => {
+      const errorOnGo = await DSVirtualListCO.testChanges.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should add two children and display properly', async () => {
+      const addChildrenBtn = await DSVirtualListCO.getAdd1Btn();
+      await addChildrenBtn.click();
+      await addChildrenBtn.click();
+      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-2children'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should add content to a children and display properly', async () => {
+      const addContentBtn = await DSVirtualListCO.getChangeTimeBtn();
+      await addContentBtn.click();
+      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-1content'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should add a children and content to that children and display properly', async () => {
+      const addChildrenBtn = await DSVirtualListCO.getAdd1Btn();
+      await addChildrenBtn.click();
+      const addContentBtn = await DSVirtualListCO.getChangeTimeBtn();
+      await addContentBtn.click();
+      const snapshot = await browser.checkSnapshot(DSVirtualListCO.snapshotPath('vlist-2content'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-virtuallist/DSVirtualListCO.js

@@ -0,0 +1,23 @@
+import { PATH_VIRTUALLIST, PATH_E2E_VIRTUAL_LIST } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSVirtualListCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_VIRTUALLIST, 'basic');
+
+  static dynamicChanges = new Urlbuilder(PATH_VIRTUALLIST, 'dynamic-element-changes');
+
+  static testChanges = new Urlbuilder(PATH_E2E_VIRTUAL_LIST, 'test-element-changes');
+
+  static async getButtons() {
+    return $$('[data-testid="ds-button"]');
+  }
+
+  static getAdd1Btn = async () => getElementByIndex(this.getButtons, 0);
+
+  static getChangeTimeBtn = async () => getElementByIndex(this.getButtons, 1);
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('VirtualList', example, 'ds-virtuallist');
+  }
+}

package/ds-wizard/DSWizard.visual.spec.js

@@ -0,0 +1,49 @@
+/* eslint-disable wdio/no-pause */
+import WizardCO from './DSWizardCO';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-10470 - Wizard:: Basic - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await WizardCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should displays Wizard component correctly', async () => {
+      await browser.eyesOpen();
+      const step1 = await WizardCO.getStep('Step 1');
+      await step1.waitForDisplayed();
+      await browser.pause(500);
+      const snapshot = await browser.eyesCheckSnapshot(WizardCO.snapshotPath('wizard-basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-10471 - Wizard:: Controlled - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await WizardCO.controlledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should displays Wizard component correctly', async () => {
+      await browser.eyesOpen();
+      const step1 = await WizardCO.getStep('Step 1');
+      await step1.waitForDisplayed();
+      await browser.pause(500);
+      const snapshot = await browser.eyesCheckSnapshot(WizardCO.snapshotPath('wizard-controlled'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('02: should advance to last step correctly', async () => {
+      await browser.eyesOpen();
+      const nextStepButton = await WizardCO.nextStepBtn();
+      await nextStepButton.click();
+      await browser.pause(500);
+      const snapshot = await browser.eyesCheckSnapshot(WizardCO.snapshotPath('wizard-controlled'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('03: should go back to first step correctly', async () => {
+      await browser.eyesOpen();
+      const prevStepButton = await WizardCO.prevStepBtn();
+      await prevStepButton.click();
+      await browser.pause(500);
+      const snapshot = await browser.eyesCheckSnapshot(WizardCO.snapshotPath('wizard-controlled'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-wizard/DSWizardCO.js

@@ -0,0 +1,25 @@
+import { PATH_E2E_WIZARD } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSWizardCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_E2E_WIZARD, 'basic-test');
+
+  static controlledURL = new Urlbuilder(PATH_E2E_WIZARD, 'pui-10255-controlled-content');
+
+  static async getStep(text) {
+    return $(`span*=${text}`);
+  }
+
+  static async prevStepBtn() {
+    return $('[data-testid="prev-step-btn"]');
+  }
+
+  static async nextStepBtn() {
+    return $('[data-testid="next-step-btn"]');
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Wizard', example, 'ds-wizard');
+  }
+}