dimsum-e2e-tests 3.22.0-next.36

package/ds-form/Combobox/DSComboboxCO.js

@@ -0,0 +1,206 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable import/no-relative-packages */
+/* eslint-disable max-lines */
+import { PATH_END_OF_LIFE_COMBOBOX, PATH_E2E_COMBOBOX } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export const knobs = {
+  IsMulti: 'knob-isMulti',
+  MenuIsOpen: 'knob-Menu is open',
+  selectAllDisabled: 'knob-selectAllDisabled',
+  clearable: 'knob-Clearable',
+  searchable: 'knob-Searchable',
+};
+
+export default class DSComboboxCO extends PageObject {
+  // Desktop
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'basic');
+
+  static emptyOptsURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'empty-options-array');
+
+  static tenThousandOptionsURL = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'ten-thousand-options');
+
+  static multiUrl = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'multi');
+
+  static multiSelectAllDisabled = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'multi-select-all-disabled');
+
+  static groupsURL = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'groups');
+
+  static expandedTopURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'pui-4069-expanded-top');
+
+  static freeSolo = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'free-solo');
+
+  static freeSoloMulti = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'free-solo-multi');
+
+  static freeTruncatedOption = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'free-solo-truncated');
+
+  static freeSoloDisabled = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'free-solo-disabled');
+
+  static nonSearchable = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'non-searchable');
+
+  static changeOptionsDynamicallyURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'change-options-dynamically');
+
+  static groupMaxOpts2URL = new Urlbuilder(PATH_E2E_COMBOBOX, 'group-with-max-opts-2');
+
+  static oneGroupURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'one-group');
+
+  static multiWithtruncateURL = new Urlbuilder(PATH_E2E_COMBOBOX, 'combobox-multi-with-truncate');
+
+  static focusedURL = new Urlbuilder(PATH_END_OF_LIFE_COMBOBOX, 'focused');
+
+  static pui8812groups = new Urlbuilder(PATH_E2E_COMBOBOX, 'pui-8812-groups');
+
+  static getUrl(component = 'basic') {
+    return PageObject.getUrl(PATH_END_OF_LIFE_COMBOBOX, component);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Combobox', example);
+  }
+
+  // selectors
+  static async getComboboxInput() {
+    return $('[data-testid="combobox"]');
+  }
+
+  static async getTextInput() {
+    return $('[data-testid="combobox"]').$('input');
+  }
+
+  static async getComboBoxValueContainer() {
+    return $('[data-testid="combobox-value-container"]');
+  }
+
+  static async getComboboxButton() {
+    return $('[data-testid="combobox-dropdown-btn"]');
+  }
+
+  static async getAllButton() {
+    return $('//button[@aria-label="All"]');
+  }
+
+  static async getClearButton() {
+    return $('[data-testid="combobox-clear-btn"]');
+  }
+
+  static async getClearX() {
+    return $('[data-testid="free-solo-pill-clear-btn"]');
+  }
+
+  static async getComboboxMenuList() {
+    return $('[data-testid="combobox-menu-list"]');
+  }
+
+  static async getComboBoxOption(index) {
+    return $$('[data-testid="combobox-option"]')[index];
+  }
+
+  static async getOptionByText(text) {
+    return $(`//div[@data-testid="combobox-option"][contains(text(),"${text}")]`);
+  }
+
+  static async getComboBoxMultiCheckBox(index) {
+    return $(`#react-select-2-option-${index}`);
+  }
+
+  static async getChangeOptionsButton() {
+    return $('span*=Change options');
+  }
+
+  static async getNoOptionsFound() {
+    return $('div*=No options found');
+  }
+
+  static async getOptionSelected(text) {
+    return $(`//span[contains(text(),"${text}")]`);
+  }
+
+  static async getComboBoxMultiInput() {
+    return $('[data-testid="combobox"]').$('input');
+  }
+
+  static async getClearIcon() {
+    return $('[aria-label="clear-indicator"]');
+  }
+
+  static async getComboboxBorder() {
+    const border = await (await this.getComboboxInput()).getCSSProperty('outline-color');
+    return border.parsed.hex;
+  }
+
+  static async toggleCombobox() {
+    await (await this.getComboboxButton()).waitForDisplayed();
+    await (await this.getComboboxButton()).click();
+  }
+
+  static async getPopperContainer() {
+    return $('[data-testid="popper-container"]');
+  }
+
+  static async getComboboxControl() {
+    return $('[data-testid="combobox-control"]');
+  }
+
+  static async getCheckbox(index) {
+    return $$('[data-testid="ds-checkbox"]')[index];
+  }
+
+  static async getOptionsChecked() {
+    return $$('[data-testid="ds-checkbox"][aria-checked="true"]');
+  }
+
+  static async getPills() {
+    return $$('//div[@data-testid="pill-wrapper"]/span');
+  }
+
+  static async getPill(index) {
+    return $$('//div[@data-testid="pill-wrapper"]/span')[index];
+  }
+
+  static async getInput(text) {
+    return $(`//span[contains(text(),"${text}")]`);
+  }
+
+  // utils
+  static async isComboboxOpen() {
+    return (await this.getComboboxMenuList()).isDisplayed();
+  }
+
+  static async typeOption(chars) {
+    const text = [...chars];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const char of text) {
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(char);
+    }
+    await browser.pause(500);
+  }
+
+  // ARIA
+  static async getRole(element) {
+    return element.getAttribute('role');
+  }
+
+  static async getAriaSelected(element) {
+    return element.getAttribute('aria-selected');
+  }
+
+  static async getTruncatedTextOption(option) {
+    return (await this.getComboBoxMultiCheckBox(option)).$('[data-testid="DS-SimpleTruncateText"]');
+  }
+
+  static async scrollToMultiOption(option) {
+    for (let actualOption = 0; actualOption <= option; actualOption += 4) {
+      // eslint-disable-next-line no-await-in-loop
+      await (await this.getComboBoxMultiCheckBox(actualOption)).scrollIntoView();
+    }
+  }
+}
+
+export async function isDisabled(element) {
+  if ((await element.getAttribute('aria-disabled')) === 'true') {
+    return true;
+  }
+  return false;
+}

package/ds-form/DateInput/DSDateInputCO.js

@@ -0,0 +1,51 @@
+import { PATH_END_OF_LIFE_DATE_INPUT } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../../helpers';
+
+export default class DSDateInputCO extends PageObject {
+  // Atomic
+  static overview = new Urlbuilder(PATH_END_OF_LIFE_DATE_INPUT, 'overview');
+
+  // Snapshot
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DateInput', example);
+  }
+
+  // selectors
+  static async getMonth() {
+    return $('[data-testid="month"]');
+  }
+
+  static async getDay() {
+    return $('[data-testid="day"]');
+  }
+
+  static async getYear() {
+    return $('[data-testid="year"]');
+  }
+
+  static async getFluidContainer() {
+    return $('[data-testid="date-input-fluidContainer"]');
+  }
+
+  static async activeElementId() {
+    const element = await browser.execute(() => document.activeElement.dataset.testid);
+    return element;
+  }
+
+  static async isHighlighted(element) {
+    const bg = await element.getCSSProperty('background-color');
+    return bg.parsed.hex === '#a3d6ff';
+  }
+
+  // actions
+  static async typeNumbers(chars = '1234567890') {
+    const numbers = [...chars];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const char of numbers) {
+      // https://github.com/webdriverio/webdriverio/issues/5092
+      // using keys char by char results in correct order
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(char);
+    }
+  }
+}

package/ds-form/DateInput/DateInput.func.spec.js

@@ -0,0 +1,217 @@
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import DSDateInputCO from './DSDateInputCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5798 - DateInput, auto-advance and auto-correct', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    // MONTH
+    it('enter 1 in month and should not advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      DSDateInputCO.typeNumbers('1');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('01');
+      await expect(activeElemId).toBe('month');
+    });
+    it('enter 01 in month and should advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('01');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('01');
+      await expect(activeElemId).toBe('day');
+    });
+    it('enter 12 in month and should advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('12');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('12');
+      await expect(activeElemId).toBe('day');
+    });
+    it('enter 13 in month and should advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('12');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('12');
+      await expect(activeElemId).toBe('day');
+    });
+    it('enter 5 in month and should advance to day input', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('5');
+      const month = await DSDateInputCO.getMonth();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('05');
+      await expect(activeElemId).toBe('day');
+    });
+    // DAY
+    it('enter 2 in day and should not advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('02');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('02');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 01 in day and should advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('02');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('02');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 31 in day and should advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('31');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('31');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 32 in day and should advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('32');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('31');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 7 in day and should advance to year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('7');
+      const day = await DSDateInputCO.getDay();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(day).toHaveValueContaining('07');
+      await expect(activeElemId).toBe('year');
+    });
+    // YEAR
+    it('enter 745 in year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('745');
+      const year = await DSDateInputCO.getYear();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(year).toHaveValueContaining('0745');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 2021 in year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('2021');
+      const year = await DSDateInputCO.getYear();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(year).toHaveValueContaining('2021');
+      await expect(activeElemId).toBe('year');
+    });
+    it('enter 02021 in year input', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('2021');
+      const year = await DSDateInputCO.getYear();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(year).toHaveValueContaining('2021');
+      await expect(activeElemId).toBe('year');
+    });
+    // FULL DATE
+    it('enter a full date', async () => {
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('13332021');
+      const month = await DSDateInputCO.getMonth();
+      const day = await DSDateInputCO.getDay();
+      const year = await DSDateInputCO.getYear();
+      const activeElemId = await DSDateInputCO.activeElementId();
+      await expect(month).toHaveValueContaining('12');
+      await expect(day).toHaveValueContaining('31');
+      await expect(year).toHaveValueContaining('2021');
+      await expect(activeElemId).toBe('year');
+    });
+  });
+  describe('PUI-6097 - DateInput, click on the input triggers edit mode', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should highlight month placeholder', async () => {
+      await (await DSDateInputCO.getFluidContainer()).click();
+      const isMonthHighlighted = await DSDateInputCO.isHighlighted(await DSDateInputCO.getMonth());
+      await expect(isMonthHighlighted).toBe(true);
+    });
+    it('should display the entered date', async () => {
+      await DSDateInputCO.typeNumbers('10021996');
+      const month = await DSDateInputCO.getMonth();
+      const day = await DSDateInputCO.getDay();
+      const year = await DSDateInputCO.getYear();
+      await expect(month).toHaveValueContaining('10');
+      await expect(day).toHaveValueContaining('02');
+      await expect(year).toHaveValueContaining('1996');
+    });
+  });
+  describe('PUI-6099 - DateInput, Placeholder, click on the input triggers edit mode', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should highlight the month placeholder and display the correct input', async () => {
+      const month = await DSDateInputCO.getMonth();
+      await month.click();
+      const isMonthHighlighted = await DSDateInputCO.isHighlighted(month);
+      await expect(isMonthHighlighted).toBe(true);
+      await DSDateInputCO.typeNumbers('10');
+      await expect(month).toHaveValueContaining('10');
+    });
+    it('should highlight the day placeholder and display the correct input', async () => {
+      const day = await DSDateInputCO.getDay();
+      await day.click();
+      const isDayHighlighted = await DSDateInputCO.isHighlighted(day);
+      await expect(isDayHighlighted).toBe(true);
+      await DSDateInputCO.typeNumbers('10');
+      await expect(day).toHaveValueContaining('10');
+    });
+    it('should highlight the year placeholder and display the correct input', async () => {
+      const year = await DSDateInputCO.getYear();
+      await year.click();
+      const isYearHighlighted = await DSDateInputCO.isHighlighted(year);
+      await expect(isYearHighlighted).toBe(true);
+      await DSDateInputCO.typeNumbers('2020');
+      await expect(year).toHaveValueContaining('2020');
+    });
+  });
+  describe('PUI-6098 - DateInput, Arrows behavior', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display entered month', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.ArrowUp);
+      const month = await DSDateInputCO.getMonth();
+      await expect(month).toHaveValueContaining('01');
+    });
+    it('should move to day and display entered day', async () => {
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowUp);
+      const day = await DSDateInputCO.getDay();
+      await expect(day).toHaveValueContaining('01');
+    });
+    it('should move to year and display entered year', async () => {
+      await browser.keys(Key.ArrowRight);
+      await browser.keys(Key.ArrowUp);
+      const year = await DSDateInputCO.getYear();
+      await expect(year).toHaveValueContaining('0001');
+    });
+  });
+}

package/ds-form/DateInput/DateInput.states.func.spec.js

@@ -0,0 +1,55 @@
+import { Key } from 'webdriverio';
+import DSDateInputCO from './DSDateInputCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6087 - DateInput, display input highlighted', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await DSDateInputCO.overview.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    // MONTH
+    it('should display month highlighted', async () => {
+      const month = await DSDateInputCO.getMonth();
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('1');
+      await expect(await month).toHaveValueContaining('01');
+      await expect(await DSDateInputCO.activeElementId()).toBe('month');
+      await expect(await DSDateInputCO.isHighlighted(month)).toBe(true);
+    });
+    // DAY
+    it('should display day highlighted', async () => {
+      const day = await DSDateInputCO.getDay();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('2');
+      await expect(await DSDateInputCO.isHighlighted(day)).toBe(true);
+    });
+    // YEAR
+    it('should display year highlighted', async () => {
+      const year = await DSDateInputCO.getYear();
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('745');
+      await expect(year).toHaveValueContaining('0745');
+      await expect(await DSDateInputCO.activeElementId()).toBe('year');
+      await expect(await DSDateInputCO.isHighlighted(year)).toBe(true);
+    });
+    // FULL DATE
+    it('should display year highlighted - full date', async () => {
+      const month = await DSDateInputCO.getMonth();
+      const day = await DSDateInputCO.getDay();
+      const year = await DSDateInputCO.getYear();
+      await expect(await DSDateInputCO.isHighlighted(month)).toBe(false);
+      await expect(await DSDateInputCO.isHighlighted(day)).toBe(false);
+      await expect(await DSDateInputCO.isHighlighted(year)).toBe(false);
+      await browser.keys(Key.Tab);
+      await DSDateInputCO.typeNumbers('13332021');
+      await expect(await DSDateInputCO.getMonth()).toHaveValueContaining('12');
+      await expect(await DSDateInputCO.getDay()).toHaveValueContaining('31');
+      await expect(year).toHaveValueContaining('2021');
+      await expect(await DSDateInputCO.activeElementId()).toBe('year');
+      await expect(await DSDateInputCO.isHighlighted(year)).toBe(true);
+    });
+  });
+}

package/ds-form/FormatItemLayout/FormItemLayout.func.spec.js

@@ -0,0 +1,46 @@
+import FormItemLayout from './FormatItemLayout';
+import { mouseOver } from '../../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-5989 - FormItemLayout - autoFocus prop', () => {
+    before('loading page', async () => {
+      const errorOnGo = await FormItemLayout.autoFocusURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should be focused by default', async () => {
+      const input = await FormItemLayout.getInput();
+      await expect(input).toBeFocused();
+    });
+  });
+
+  describe('PUI-7163 - FormItemLayout - truncated text', () => {
+    beforeEach('loading page', async () => {
+      const errorOnGo = await FormItemLayout.truncatedTextURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip when text is truncated: Lorem ipsum dolor sit amet orci aliquam', async () => {
+      const inputText = await FormItemLayout.getInput();
+      await inputText.setValue('Lorem ipsum dolor sit amet orci aliquam');
+      await inputText.click({ y: 50 });
+      await mouseOver(inputText);
+      const tooltip = await FormItemLayout.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('should not display tooltip when text is not truncated: Lorem ipsum dolor sit id', async () => {
+      const inputText = await FormItemLayout.getInput();
+      await inputText.setValue('Lorem ipsum dolor sit id');
+      await inputText.click({ y: 50 });
+      await mouseOver(inputText);
+      const tooltip = await FormItemLayout.getTooltip();
+      await expect(tooltip).not.toBeDisplayedInViewport();
+    });
+    it('should display tooltip when text not truncated: FIELDVAWWLUEWHAVIGENGTH26', async () => {
+      const inputText = await FormItemLayout.getInput();
+      await inputText.setValue('FIELDVAWWLUEWHAVIGENGTH26');
+      await inputText.click({ y: 50 });
+      await mouseOver(inputText);
+      const tooltip = await FormItemLayout.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+  });
+}

package/ds-form/FormatItemLayout/FormatItemLayout.js

@@ -0,0 +1,53 @@
+// eslint-disable-next-line import/no-relative-packages
+import { PATH_END_OF_LIFE_FORM_ITEM_LAYOUT, PATH_E2E_FORM_ITEM_LAYOUT } from '../../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../../helpers';
+
+export default class FormItemLayout extends PageObject {
+  // Desktop
+  static errorStates = new Urlbuilder(PATH_END_OF_LIFE_FORM_ITEM_LAYOUT, 'error-states');
+
+  static clearErrorURL = new Urlbuilder(PATH_E2E_FORM_ITEM_LAYOUT, 'error-and-disabled-w-clear');
+
+  static autoFocusURL = new Urlbuilder(PATH_E2E_FORM_ITEM_LAYOUT, 'auto-focus');
+
+  static basicUrl = new Urlbuilder(PATH_END_OF_LIFE_FORM_ITEM_LAYOUT, 'basic');
+
+  static withCheckboxRadio = new Urlbuilder(PATH_END_OF_LIFE_FORM_ITEM_LAYOUT, 'with-checkbox-radio');
+
+  static longLabel = new Urlbuilder(PATH_END_OF_LIFE_FORM_ITEM_LAYOUT, 'long-label');
+
+  static type = new Urlbuilder(PATH_END_OF_LIFE_FORM_ITEM_LAYOUT, 'type');
+
+  static withAddons = new Urlbuilder(PATH_END_OF_LIFE_FORM_ITEM_LAYOUT, 'with-addons');
+
+  static withHighlight = new Urlbuilder(PATH_END_OF_LIFE_FORM_ITEM_LAYOUT, 'with-highlight');
+
+  static truncatedTextURL = new Urlbuilder(PATH_E2E_FORM_ITEM_LAYOUT, 'truncated-text');
+
+  static async getErrorInputBtn() {
+    return (await $('[data-testid="ds-form-clearable"]')).$('[data-testid="ds-input-text-clear-button"]');
+  }
+
+  static async getInput() {
+    return $('[data-testid="ds-input_main-component"]');
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="popper-container"]');
+  }
+
+  static async getInputs() {
+    return $$('[data-testid="ds-input_main-component"]');
+  }
+
+  static getInputByIndex = async (index) => getElementByIndex(this.getInputs, index);
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('FormItemLayout', example);
+  }
+
+  // selectors
+  // actions
+  // utils
+}