dimsum-e2e-tests 1.0.0-rc.1

package/ds-form-layout-blocks/form-layout-block-item/DSFormLayoutBlockItem.func.spec.js

@@ -0,0 +1,203 @@
+import { Key } from 'webdriverio';
+import DSFormLayoutBlockItemCO from './DSFormLayoutBlockItemCO';
+import { type } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isTablet && !browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-9499 - DSFormLayoutBlockItem: Basi custom data-testid - func test', () => {
+    // MODIFY
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.basicTestURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should find only one element using the custom data-testid', async () => {
+      const formItems = await DSFormLayoutBlockItemCO.getByTestIds('mytestid');
+      const howMany = await formItems.length;
+      await expect(howMany).toEqual(1);
+    });
+  });
+
+  if (browser.capabilities.browserName !== 'Safari') {
+    describe('PUI-9918 - DSFormLayoutBlockItem: Form Validation, onBlur - Func test', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSFormLayoutBlockItemCO.validationOnBlur.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      it('01: should populate the input with +20 characters, no error message should be displayed', async () => {
+        await browser.keys(Key.Tab);
+        await type('More than twenty char');
+        const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessages();
+        await expect(errorMessage).not.toBeDisplayed();
+      });
+      it('02: should display error message when performing the OnBlur with TAB', async () => {
+        await browser.keys(Key.Tab);
+        const firstInputBlock = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+        const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessageByParent(firstInputBlock);
+        const errorMessages = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toBeDisplayed();
+        await expect(errorMessages).toEqual(1);
+      });
+      it('03: should display the second error message when performing the OnBlur with CLICK', async () => {
+        await type('More than twenty char');
+        const thirdInput = await DSFormLayoutBlockItemCO.getTextInput(2);
+        await thirdInput.click();
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(2);
+      });
+      it('04: should remove error message after fixing the cause when performing the OnBlur with CLICK', async () => {
+        const firstInput = await DSFormLayoutBlockItemCO.getTextInput(0);
+        await firstInput.click();
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Tab);
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(1);
+      });
+      it('05: should remove error message after fixing the cause when performing the OnBlur with TAB', async () => {
+        await browser.keys(Key.Backspace);
+        await browser.keys(Key.Tab);
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(0);
+      });
+      it('06: should not display error message until performing the OnBlur (checkbox)', async () => {
+        const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+        const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+        await checkbox2.click();
+        await checkbox.click();
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(0);
+      });
+      it('07: should  display error message when performing the OnBlur with TAB (checkbox)', async () => {
+        await browser.keys([Key.Shift, Key.Tab]);
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(1);
+      });
+      it('08: should fix the error but still display it until performing the OnBlur', async () => {
+        await browser.keys(Key.Tab);
+        await browser.keys(Key.Space);
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(1);
+      });
+      it('09: should stop displaying the error message after performing the OnBlur with mouse', async () => {
+        const firstInput = await DSFormLayoutBlockItemCO.getTextInput(0);
+        await firstInput.click();
+        const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+        await expect(errorMessage).toEqual(0);
+      });
+    });
+  }
+
+  describe('PUI-9919 - DSFormLayoutBlockItem: Form Validation, onChange - Func test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.validationOnChange.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should populate the input with less than 20 characters, no error message should be displayed', async () => {
+      await browser.keys(Key.Tab);
+      await type('More than');
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessages();
+      await expect(errorMessage).not.toBeDisplayed();
+    });
+    it('02: should display error message when more than 20 chars are present onChange', async () => {
+      await type(' twenty char');
+      const firstInputBlock = await DSFormLayoutBlockItemCO.getBlockContainersByIndex(0);
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessageByParent(firstInputBlock);
+      const errorMessages = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toBeDisplayed();
+      await expect(errorMessages).toEqual(1);
+    });
+    it('03: should remove error message just after fixing the cause', async () => {
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(0);
+    });
+    it('04: should not display an error message when checking just one checkbox', async () => {
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      await checkbox.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(0);
+    });
+    it('05: should display after checking the second checkbox', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(1);
+    });
+    it('06: should remove the error message after unchecking one checkbox', async () => {
+      const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+      await checkbox2.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(0);
+    });
+  });
+
+  // Unskip after PUI9917 gets fixed
+
+  describe('PUI-9920 - DSFormLayoutBlockItem: Form Validaiton, onSubmit - Func test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.validationOnSubmit.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should populate the input with less than 20 characters, no error message should be displayed', async () => {
+      await browser.keys(Key.Tab);
+      await type('More than twenty chars');
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessages();
+      await expect(errorMessage).not.toBeDisplayed();
+    });
+    it('02: should check two checkbox, no error message should be displayed', async () => {
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+      await checkbox2.click();
+      await checkbox.click();
+      const errorMessage = await DSFormLayoutBlockItemCO.getErrorMessages();
+      await expect(errorMessage).not.toBeDisplayed();
+    });
+    it('03: should press submit and errors should display, focus to first errored input', async () => {
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(3);
+    });
+    it('04: should fix first issue and display the error until Submit is pressed', async () => {
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      await browser.keys(Key.Backspace);
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(3);
+    });
+    it('05: should press submit. First error fixed focus to second errored input', async () => {
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(2);
+    });
+    it('06: should fix first issue and press submit. One error remaining', async () => {
+      await type('hola@hello.com');
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      await expect(errorMessage).toEqual(1);
+      await expect(checkbox).toBeFocused();
+    });
+    it('07: should fix last issue and dont press submit. One error remaining.', async () => {
+      const checkbox = await DSFormLayoutBlockItemCO.getCheckboxByIndex(0);
+      const checkbox2 = await DSFormLayoutBlockItemCO.getCheckboxByIndex(1);
+      await checkbox2.click();
+      await checkbox.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(1);
+    });
+    it('08: should press submit. No errors remaining', async () => {
+      const submitBtn = await DSFormLayoutBlockItemCO.getSubmit();
+      await submitBtn.click();
+      const errorMessage = (await DSFormLayoutBlockItemCO.getErrorMessages()).length;
+      await expect(errorMessage).toEqual(0);
+    });
+  });
+}

package/ds-form-layout-blocks/form-layout-block-item/DSFormLayoutBlockItem.visual.spec.js

@@ -0,0 +1,181 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSFormLayoutBlockItemCO from './DSFormLayoutBlockItemCO';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone) {
+  describe('PUI-7008 - DSFormLayoutBlockItem: Highlight - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.withHighlight.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display form layout block item highlight: default state', async () => {
+      await (await DSFormLayoutBlockItemCO.firstNameLabel()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSFormLayoutBlockItemCO.snapshotPath('highlight-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    if (!browser.capabilities['ice:options'].isTablet) {
+      it('should display form layout block item highlight: hover state', async () => {
+        await mouseOver(await DSFormLayoutBlockItemCO.middleNameLabel());
+        const snapshot = await browser.checkSnapshot(DSFormLayoutBlockItemCO.snapshotPath('highlight-hovered'));
+        await expect(snapshot).toEqual(0);
+      });
+      it('should display form layout block item highlight: keyboard focus', async () => {
+        await browser.keys(Key.Tab);
+        const snapshot = await browser.checkSnapshot(DSFormLayoutBlockItemCO.snapshotPath('highlight-keyboard-focus'));
+        await expect(snapshot).toEqual(0);
+      });
+    }
+  });
+
+  describe('PUI-9208 - DSFormLayoutBlockItem: Wrapping and errors- visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.withWrapping.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display three helper messages, one should be wrapped', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSFormLayoutBlockItemCO.snapshotPath('blockitem-helpers-wrapped'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('should cause three error messages, last two should be wrapped', async () => {
+      await browser.eyesOpen();
+      const textInput = await DSFormLayoutBlockItemCO.getTextInput();
+      const checkboxCat = await DSFormLayoutBlockItemCO.getCheckboxByName('Cat');
+      const checkboxDog = await DSFormLayoutBlockItemCO.getCheckboxByName('Dog');
+      const toggleJob = await DSFormLayoutBlockItemCO.getToggleByName('unique_id_1');
+      const toggleLife = await DSFormLayoutBlockItemCO.getToggleByName('unique_id_2');
+      await textInput.click();
+      await textInput.setValue('L');
+      await checkboxCat.click();
+      await checkboxDog.click();
+      await toggleJob.click();
+      await toggleLife.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSFormLayoutBlockItemCO.snapshotPath('blockitem-errors-wrapped'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9227 - DSFormLayoutBlockItem: ShowOff within Dialog - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.showOffE2e.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should correctly display 4 formLayoutBlocks, second with hideLabel last one with leftLabel', async () => {
+      await browser.eyesOpen();
+      const openDialogBtn = await DSFormLayoutBlockItemCO.getOpenDialogBtn();
+      await openDialogBtn.click();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSFormLayoutBlockItemCO.snapshotPath('blockitem-showoff-dialog'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9230 - DSFormLayoutBlockItem: isGroup radio - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.isGroupURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show correctly display a radioGroup within the formLayoutBlock', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSFormLayoutBlockItemCO.snapshotPath('blockitem-showoff-dialog'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9231 - DSFormLayoutBlockItem: Required and Optional - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.optionalAndRequired.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show one optional and one required formLayoutBlocks', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSFormLayoutBlockItemCO.snapshotPath('blockitem-optional-required'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-9232 - DSFormLayoutBlockItem: FitContent - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.fitContentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display a short (fitContent) formLayoutBlock empty', async () => {
+      await browser.eyesOpen();
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSFormLayoutBlockItemCO.snapshotPath('blockitem-fitcontent-empty'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+    it('should display a short (fitContent) formLayoutBlock populated', async () => {
+      await browser.eyesOpen();
+      const textInput = await DSFormLayoutBlockItemCO.getTextInput();
+      await textInput.click();
+      await textInput.setValue('The textinput should not grow even if this text doesnt fit on it');
+      const snapshot = await browser.eyesCheckSnapshot(
+        DSFormLayoutBlockItemCO.snapshotPath('blockitem-fitcontent-populated'),
+      );
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  if (!browser.capabilities['ice:options'].isTablet) {
+    describe('PUI-9342 - DSFormLayoutBlockItem: Padding fix - visual test', () => {
+      before('loading page', async () => {
+        const errorOnGo = await DSFormLayoutBlockItemCO.paddingFix.go();
+        if (errorOnGo) throw errorOnGo;
+      });
+      // Padding issue would make the formlayoutBlock to cause a weird
+      // tooltip over datatable cells. This shoudn't happen on this story scenario
+      it('should not display a tooltip on hover', async () => {
+        await browser.eyesOpen();
+        await (await DSFormLayoutBlockItemCO.getComboboxByIndex(0)).click();
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.Return);
+        await browser.keys(Key.Escape);
+        await (await DSFormLayoutBlockItemCO.getComboboxByIndex(1)).click();
+        await browser.keys(Key.ArrowDown);
+        await browser.keys(Key.Enter);
+        await browser.keys(Key.Escape);
+        await mouseOver(await DSFormLayoutBlockItemCO.getDropdownBtnByIndex(0));
+        const snapshot = await browser.eyesCheckSnapshot(DSFormLayoutBlockItemCO.snapshotPath('blockitem-paddingfix'));
+        await expect(snapshot).toEqual(0);
+      });
+    });
+  }
+
+  describe('PUI-11980 - DSFormLayoutBlockItem: Customization, Highlight - visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSFormLayoutBlockItemCO.withCustomHighlight.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display form layout block item with custom highlight: default state', async () => {
+      await (await DSFormLayoutBlockItemCO.firstNameLabel()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSFormLayoutBlockItemCO.snapshotPath('custom-highlight-default'));
+      await expect(snapshot).toEqual(0);
+    });
+    if (!browser.capabilities['ice:options'].isTablet) {
+      it('should display form layout block item with custom highlight: hover state', async () => {
+        await mouseOver(await DSFormLayoutBlockItemCO.middleNameLabel());
+        const snapshot = await browser.checkSnapshot(DSFormLayoutBlockItemCO.snapshotPath('custom-highlight-hovered'));
+        await expect(snapshot).toEqual(0);
+      });
+      it('should display form layout block item with custom highlight: keyboard focus', async () => {
+        await browser.keys(Key.Tab);
+        const snapshot = await browser.checkSnapshot(
+          DSFormLayoutBlockItemCO.snapshotPath('custom-highlight-keyboard-focus'),
+        );
+        await expect(snapshot).toEqual(0);
+      });
+    }
+  });
+}

package/ds-form-layout-blocks/form-layout-block-item/DSFormLayoutBlockItemCO.js

@@ -0,0 +1,118 @@
+/* eslint-disable import/no-relative-packages */
+import {
+  PATH_FORM_LAYOUT_BLOCKS_FORM_LAYOUT_BLOCK_ITEM,
+  PATH_E2E_FORM_LAYOUT_BLOCK_ITEM,
+} from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
+
+export default class DSFormLayoutBlockItemCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_FORM_LAYOUT_BLOCKS_FORM_LAYOUT_BLOCK_ITEM, 'basic');
+
+  static basicTestURL = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'basic-test');
+
+  static withHighlight = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'with-highlight');
+
+  static withCustomHighlight = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'custom-highlight-test');
+
+  static withWrapping = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'wrapping-e-2-e');
+
+  static optionalAndRequired = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'optional-and-required');
+
+  static showOffE2e = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'show-off-e-2-e');
+
+  static isGroupURL = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'is-group-e-2-e');
+
+  static hasErrorURL = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'has-error-e-2-e');
+
+  static fitContentURL = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'fit-content-e-2-e');
+
+  static paddingFix = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'padding-fix');
+
+  static validationOnBlur = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'on-blur-validation-form-test');
+
+  static validationOnChange = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'on-change-validation-form-test');
+
+  static validationOnSubmit = new Urlbuilder(PATH_E2E_FORM_LAYOUT_BLOCK_ITEM, 'on-submit-validation-form-test');
+
+  static async firstNameLabel() {
+    return $('label*=First Name');
+  }
+
+  static async getTextInput() {
+    return $('[data-testid="ds-input-text-input"]');
+  }
+
+  static async getTextInputs(index = 0) {
+    return $$('[data-testid="ds-input-text-input"]')[index];
+  }
+
+  static async getTextFocuseableByIndex(index = 0) {
+    return $$(`[data-testid="ds-input-text-root"]`)[index];
+  }
+
+  static async middleNameLabel() {
+    return $('label*=Middle Name');
+  }
+
+  static async getOpenDialogBtn() {
+    return $('[data-testid="open-dialog-button"]');
+  }
+
+  static async getDDButons() {
+    return $$('[data-testid="combobox-dropdown-btn"]');
+  }
+
+  static getDropdownBtnByIndex = async (index) => getElementByIndex(this.getDDButons, index);
+
+  static async getComboboxes() {
+    return $$('[data-testid="combobox-container"]');
+  }
+
+  static async getCheckboxes() {
+    return $$('[data-testid="ds-checkbox"]');
+  }
+
+  static getCheckboxByIndex = async (index) => getElementByIndex(this.getCheckboxes, index);
+
+  static getComboboxByIndex = async (index) => getElementByIndex(this.getComboboxes, index);
+
+  static async getCheckboxByName(name) {
+    return $(`[data-testid="ds-checkbox"][name="${name}"]`);
+  }
+
+  static async getToggleByName(name) {
+    return $(`[data-testid="ds-controlled-toggle-checkbox"][id="${name}"]`);
+  }
+
+  static async getErrorMessages() {
+    return $$('[data-testid="ds-form-layout-block-item-error-message"]');
+  }
+
+  static async getBlockContainersByIndex(index = 0) {
+    return $$('[data-testid="ds-form-layout-block-item-container"]')[index];
+  }
+
+  static async getErrorMessageByParent(parent) {
+    return parent.$('[data-testid="ds-form-layout-block-item-error-message"]');
+  }
+
+  static async getErrorMessagesByIndex(index = 0) {
+    return $$('[data-testid="ds-form-layout-block-item-error-message"]')[index];
+  }
+
+  static async getByTestId(name) {
+    return $(`[data-testid="${name}"]`);
+  }
+
+  static async getByTestIds(name) {
+    return $$(`[data-testid="${name}"]`);
+  }
+
+  static async getSubmit() {
+    return $('[type = "submit"]');
+  }
+
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSFormLayoutBlockItemCO', example, 'ds-form-layout-block');
+  }
+}

package/ds-form-layout-blocks/form-layout-checkbox-group/DSFormLayoutCheckboxGroup.visual.spec.js

@@ -0,0 +1,13 @@
+import DSFormLayoutCheckboxGroupCO from './DSFormLayoutCheckboxGroupCO';
+
+describe('PUI-7010 - DSFormLayoutCheckboxGroup: Directions - visual test', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSFormLayoutCheckboxGroupCO.directionURL.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('should display checkbox group horizontal and vertical', async () => {
+    await (await DSFormLayoutCheckboxGroupCO.checkboxLabel('Pepper')).waitForDisplayed();
+    const snapshot = await browser.checkSnapshot(DSFormLayoutCheckboxGroupCO.snapshotPath('checkbox-group-directions'));
+    await expect(snapshot).toEqual(0);
+  });
+});

package/ds-form-layout-blocks/form-layout-checkbox-group/DSFormLayoutCheckboxGroupCO.js

@@ -0,0 +1,14 @@
+import { PATH_FORM_LAYOUT_BLOCKS_CHECKBOX_GROUP } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class DSFormLayoutCheckboxGroupCO extends PageObject {
+  static directionURL = new Urlbuilder(PATH_FORM_LAYOUT_BLOCKS_CHECKBOX_GROUP, 'direction');
+
+  static async checkboxLabel(label) {
+    return $(`label*=${label}`);
+  }
+
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSFormLayoutCheckboxGroupCO', example, 'ds-form-layout-block');
+  }
+}

package/ds-form-layout-label/DSFormLayoutLabel.func.spec.js

@@ -0,0 +1,24 @@
+import DSFormLayoutLabelCO from './DSFormLayoutLabelCO';
+/* this is the syntax for only enabling test for desktop only
+ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-XXXX - FormLayoutLabel:: example test - data-testid exists', () => {
+    before('loading page', async () => {
+      // your code goes here
+    });
+    it('01: wrapper should be displayed', async () => {
+      // your code goes here
+    });
+
+  });
+}
+*/
+describe.skip('PUI-XXXX - FormLayoutLabel:: example test - data-testid exists', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSFormLayoutLabelCO.basic.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('01: wrapper should be displayed', async () => {
+    const wrapper = await DSFormLayoutLabelCO.getWrapper();
+    await expect(wrapper).toBeDisplayedInViewport();
+  });
+});

package/ds-form-layout-label/DSFormLayoutLabelCO.js

@@ -0,0 +1,17 @@
+import { DSFormLayoutBlockItemDataTestId } from '../../packages/ds-form-layout-label/src/index.ts';
+import { PATH_FORM_LAYOUT_LABEL } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSFormLayoutLabel extends PageObject {
+  static basic = new Urlbuilder(PATH_FORM_LAYOUT_LABEL, 'basic');
+
+  // Selectors
+  static async getWrapper() {
+    return $(`[data-testid="${DSFormLayoutBlockItemDataTestId.LABEL}"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSFormLayoutLabel', example, 'ds-form-layout-label');
+  }
+}

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

@@ -0,0 +1,34 @@
+import GlobalHeader from './GlobalHeaderCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-10036 - GlobalHeader: title and aria attributes', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.customAttributes.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: inbox button should have custom aria-label and title attributes', async () => {
+      const inboxBtn = await GlobalHeader.getElByDataTestid('custom-inbox-btn');
+      await expect(inboxBtn).toHaveAttribute('title', 'this is a title');
+      await expect(inboxBtn).toHaveAttribute('aria-label', 'custom aria-label');
+    });
+  });
+
+  describe('PUI-7699 - GlobalHeader: Popups close onBlur -Func', () => {
+    before(async () => {
+      const errorOnGo = await GlobalHeader.customAttributes.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should expand second global header item popup', async () => {
+      const secondActionButton = await GlobalHeader.getGHToolbarItem(1);
+      await secondActionButton.click();
+      const popupContent = await GlobalHeader.getPopupContent();
+      await expect(popupContent).toBeDisplayed();
+    });
+    it('02: should close second global header item popup when clicking outside', async () => {
+      const outsideContent = await GlobalHeader.getMainContent();
+      await outsideContent.click();
+      const popupContent = await GlobalHeader.getPopupContent();
+      await expect(popupContent).not.toBeDisplayed();
+    });
+  });
+}