dimsum-e2e-tests 3.22.0-next.36

package/ds-tooltip/DSTooltip.func.spec.js

@@ -0,0 +1,86 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSTooltipCO from './DSTooltipCO';
+import { mouseOver } from '../helpers';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6740 - Tooltip, with custom title', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should display tooltip on focus (Tab key)', async () => {
+      await browser.keys(Key.Tab);
+      await browser.pause(500);
+      const tooltip = await DSTooltipCO.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('should close tooltip on Esc key press', async () => {
+      await browser.keys(Key.Escape);
+      await browser.pause(500);
+      const tooltip = await DSTooltipCO.getTooltip();
+      await expect(tooltip);
+    });
+    it('should display tooltip on mouse hover', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await mouseOver(triggerBtn);
+      const tooltip = await DSTooltipCO.getTooltip();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('should display a title variant correctly', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await mouseOver(triggerBtn, 200);
+      const tooltip = await DSTooltipCO.getTooltip();
+      await expect(tooltip).not.toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-6972 - TooltipV1 - interactionType property: click', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.customContentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tooltip should be opened when trigger is clicked', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      const tooltip = await DSTooltipCO.getTooltipV1();
+      await triggerBtn.waitForDisplayed();
+      await triggerBtn.click();
+      await tooltip.waitForDisplayed();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('tooltip should be closed on Blur', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await triggerBtn.click({ x: 300 });
+      await browser.pause(500);
+      const tooltipV1 = await DSTooltipCO.getTooltipV1();
+      await expect(tooltipV1).not.toBeDisplayedInViewport();
+    });
+    it('tooltip should not be opened when trigger is hovered', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await mouseOver(triggerBtn, 30, 10);
+      await browser.pause(500);
+      const tooltipV1 = await DSTooltipCO.getTooltipV1();
+      await expect(tooltipV1).not.toBeDisplayedInViewport();
+    });
+  });
+  describe('PUI-6973 - TooltipV1 - interactionType property: hover', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.basicV1URL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tooltip should be opened when trigger is hovered', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      const tooltip = await DSTooltipCO.getTooltipV1();
+      await triggerBtn.waitForDisplayed();
+      await mouseOver(triggerBtn, 60, 10);
+      await tooltip.waitForDisplayed();
+      await expect(tooltip).toBeDisplayedInViewport();
+    });
+    it('tooltip should be closed on mouseout', async () => {
+      const triggerBtn = await DSTooltipCO.getTooltipTrigger();
+      await mouseOver(triggerBtn, 400);
+      await browser.pause(500);
+      const tooltipV1 = await DSTooltipCO.getTooltipV1();
+      await expect(tooltipV1).not.toBeDisplayedInViewport();
+    });
+  });
+}

package/ds-tooltip/DSTooltip.visual.spec.js

@@ -0,0 +1,31 @@
+/* eslint-disable wdio/no-pause */
+import { Key } from 'webdriverio';
+import DSTooltipCO from './DSTooltipCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-6739 - Tooltip visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tooltip should be displayed', async () => {
+      await browser.keys(Key.Tab);
+      await browser.pause(500);
+      await (await DSTooltipCO.getTooltip()).waitForDisplayed();
+      const snapshot = await browser.checkSnapshot(DSTooltipCO.snapshotPath('basic'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8119 - Long word visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSTooltipCO.longWord.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('tooltip with long word should be displayed', async () => {
+      await browser.keys(Key.Tab);
+      await browser.pause(500);
+      const snapshot = await browser.checkSnapshot(DSTooltipCO.snapshotPath('tooltip-long-word'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-tooltip/DSTooltipCO.js

@@ -0,0 +1,44 @@
+import {
+  PATH_END_OF_LIFE_TOOLTIP_V2,
+  PATH_END_OF_LIFE_TOOLTIP,
+  PATH_TOOLTIP_V3,
+} from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSTooltipCO extends PageObject {
+  static basicURL = new Urlbuilder(PATH_END_OF_LIFE_TOOLTIP_V2, 'basic');
+
+  static placementURL = new Urlbuilder(PATH_END_OF_LIFE_TOOLTIP_V2, 'placement');
+
+  static customContentURL = new Urlbuilder(PATH_END_OF_LIFE_TOOLTIP, 'custom-content');
+
+  static basicV1URL = new Urlbuilder(PATH_END_OF_LIFE_TOOLTIP, 'basic');
+
+  static longWord = new Urlbuilder(PATH_TOOLTIP_V3, 'long');
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Tooltip', example);
+  }
+
+  // selectors
+  static async getTooltip() {
+    return $('[data-testid="ds-tooltip"]');
+  }
+
+  static async getTooltipArrow() {
+    return $('[data-testid="ds-tooltip-arrow"]');
+  }
+
+  static async getTooltipTriggers(index) {
+    return $$('[data-testid="button-wrapper"]')[index];
+  }
+
+  static async getTooltipTrigger() {
+    return $('[data-testid="button-wrapper"]');
+  }
+
+  static async getTooltipV1() {
+    return $('[data-testid="popper-container"]');
+  }
+}

package/ds-transition/DSTransition.visual.spec.js

@@ -0,0 +1,40 @@
+import DSTransitionCO from './DSTransitionCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-8360 - DSTransitionCO, COLLAPSE beginning and ending points - visual test', () => {
+    before(async () => {
+      const errorOnGo = await DSTransitionCO.collapseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show transition default left collapsed right expanded', async () => {
+      const snapshot = await browser.checkSnapshot(DSTransitionCO.snapshotPath('transition-collapse'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should show transition interacted left expanded right collapsed', async () => {
+      const toggle1 = await DSTransitionCO.getToggleByIndex(0);
+      await toggle1.click();
+      const toggle2 = await DSTransitionCO.getToggleByIndex(1);
+      await toggle2.click();
+      const snapshot = await browser.checkSnapshot(DSTransitionCO.snapshotPath('transition-collapse-bis'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+  describe('PUI-8368 - DSTransitionCO, FADE beginning and ending points - visual test', () => {
+    before(async () => {
+      const errorOnGo = await DSTransitionCO.fadeURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('should show transition default left collapsed right expanded', async () => {
+      const snapshot = await browser.checkSnapshot(DSTransitionCO.snapshotPath('transition-fade'));
+      await expect(snapshot).toEqual(0);
+    });
+    it('should show transition interacted left expanded right collapsed', async () => {
+      const toggle1 = await DSTransitionCO.getToggleByIndex(0);
+      await toggle1.click();
+      const toggle2 = await DSTransitionCO.getToggleByIndex(1);
+      await toggle2.click();
+      const snapshot = await browser.checkSnapshot(DSTransitionCO.snapshotPath('transition-fade-bis'));
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-transition/DSTransitionCO.js

@@ -0,0 +1,19 @@
+import { PATH_TRANSITION } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export default class DSTransitionCO extends PageObject {
+  static collapseURL = new Urlbuilder(PATH_TRANSITION, 'collapse');
+
+  static fadeURL = new Urlbuilder(PATH_TRANSITION, 'fade');
+
+  static async getToggles() {
+    return $$('[data-testid="ds-controlled-toggle-checkbox"]');
+  }
+
+  static getToggleByIndex = async (index) => getElementByIndex(this.getToggles, index);
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('Transition', example, 'ds-transition');
+  }
+}

package/ds-treeview/DSTreeViewCO.js

@@ -0,0 +1,465 @@
+/* eslint-disable wdio/no-pause */
+/* eslint-disable no-await-in-loop */
+/* eslint-disable import/no-relative-packages */
+/* eslint-disable max-lines */
+import { Key } from 'webdriverio';
+import { PATH_TREEVIEW, PATH_E2E_TREEVIEW } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
+
+export const knobs = {
+  isSingleSelect: 'knob-Is single select',
+  compact: 'knob-Compact view',
+  restricDragAndDrop: 'knob-Restrict drag and drop',
+  disableLeafs: 'knob-Disable Leafs',
+  disableGroups: 'knob-Disable Groups',
+};
+
+export default class TreeViewCO extends PageObject {
+  static basicUrl = new Urlbuilder(PATH_TREEVIEW, 'basic');
+
+  static compactURL = new Urlbuilder(PATH_TREEVIEW, 'compact');
+
+  static fluidHeightURL = new Urlbuilder(PATH_TREEVIEW, 'fluid-height');
+
+  static searchableURL = new Urlbuilder(PATH_TREEVIEW, 'searchable-advanced-example');
+
+  static pui3504URL = new Urlbuilder(PATH_E2E_TREEVIEW, 'pui-3504');
+
+  static inModalURL = new Urlbuilder(PATH_E2E_TREEVIEW, 'in-modal');
+
+  static controlledSelect = new Urlbuilder(PATH_E2E_TREEVIEW, 'controlled-selection-test');
+
+  static controlled = new Urlbuilder(PATH_TREEVIEW, 'controlled');
+
+  static controlledSingleSelect = new Urlbuilder(PATH_TREEVIEW, 'controlled-single-select');
+
+  static singleSelect = new Urlbuilder(PATH_TREEVIEW, 'single-select');
+
+  static disableLeafs = new Urlbuilder(PATH_TREEVIEW, 'disable-leafs');
+
+  static compact = new Urlbuilder(PATH_TREEVIEW, 'compact-view');
+
+  static disableGroups = new Urlbuilder(PATH_TREEVIEW, 'disable-groups');
+
+  static multiSelect = new Urlbuilder(PATH_TREEVIEW, 'multi-select');
+
+  static selectedOnInitURL = new Urlbuilder(PATH_E2E_TREEVIEW, 'selected-on-init');
+
+  static withToolbar = new Urlbuilder(PATH_E2E_TREEVIEW, 'with-header-and-toolbar');
+
+  static multiDisableGroups = new Urlbuilder(PATH_TREEVIEW, 'multi-disable-groups');
+
+  static multiDisableLeafs = new Urlbuilder(PATH_TREEVIEW, 'multi-disable-leafs');
+
+  static actionToFocus = new Urlbuilder(PATH_TREEVIEW, 'action-to-focus-item-with-virtual-list');
+
+  static v2DndURL = new Urlbuilder(PATH_TREEVIEW, 'dn-d');
+
+  static v2RectrictedDndURL = new Urlbuilder(PATH_TREEVIEW, 'restrict-dn-d');
+
+  static searchableV2 = new Urlbuilder(PATH_TREEVIEW, 'searchable');
+
+  static searchableV2HighlightOnly = new Urlbuilder(PATH_TREEVIEW, 'searchable-highlight-only');
+
+  static searchableWithNav = new Urlbuilder(PATH_TREEVIEW, 'searchable-with-navigation-between-results');
+
+  static searchableTruncated = new Urlbuilder(PATH_TREEVIEW, 'searchable-truncated');
+
+  static wrappAll = new Urlbuilder(PATH_TREEVIEW, 'truncation-wrap-all');
+
+  static truncation = new Urlbuilder(PATH_TREEVIEW, 'truncation');
+
+  static sigleSelect = new Urlbuilder(PATH_TREEVIEW, 'single-select');
+
+  static frozenData = new Urlbuilder(PATH_TREEVIEW, 'frozen-data');
+
+  static initialCheckedMulti = new Urlbuilder(PATH_TREEVIEW, 'initial-checked-multi');
+
+  static focusOnInit = new Urlbuilder(PATH_TREEVIEW, 'focus-on-init');
+
+  static rightAddonsAsComponent = new Urlbuilder(PATH_E2E_TREEVIEW, 'right-addons-as-component-test');
+
+  static dragAndDrop = new Urlbuilder(PATH_E2E_TREEVIEW, 'drag-and-drop');
+
+  static restrictDragAndDropTest = new Urlbuilder(PATH_E2E_TREEVIEW, 'restrict-dn-d-test');
+
+  // Selectors
+  static async getTreeList() {
+    return $('[data-testid="tree-list"]');
+  }
+
+  static async getItemPseudoElementProperty(index, pseudo, property) {
+    return browser.execute(
+      (_index, _pseudo, _property) => {
+        // eslint-disable-next-line no-underscore-dangle
+        const row = window.getComputedStyle(document.querySelectorAll('[data-testid="tree-item"]')[_index], _pseudo);
+        return row.getPropertyValue(_property);
+      },
+      index,
+      pseudo,
+      property,
+    );
+  }
+
+  static async getSearchBox() {
+    return $('//input[contains(@placeholder,"Search all")]');
+  }
+
+  static async getModal() {
+    return $('[data-testid="ds-modal"]');
+  }
+
+  static async getExpandToggleButton(index) {
+    return $$('[data-testid="tree-item-expand-toggle"]')[index];
+  }
+
+  static async getButton() {
+    return $('[data-testid="ds-button"]');
+  }
+
+  static async radioButton(index) {
+    return (await $$('//span[@role="radio"]'))[index];
+  }
+
+  static async getCheckbox(index) {
+    return $$('[data-testid="tree-item-checkbox"]')[index];
+  }
+
+  static async isChecked(index) {
+    const checkbox = await this.getCheckbox(index);
+    if ((await checkbox.getAttribute('aria-checked')) === 'true') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isMixed(index) {
+    const checkbox = await this.getCheckbox(index);
+    if ((await checkbox.getAttribute('aria-checked')) === 'mixed') {
+      return true;
+    }
+    return false;
+  }
+
+  static async getTreeParent(index) {
+    return browser.waitUntil(
+      async () => {
+        const parents = await (await this.getTreeList()).$$('li');
+        if (parents.length <= index) return false;
+        return parents[index];
+      },
+      {
+        timeout: 3000,
+        timeoutMsg: 'Parent not displayed after 3 seconds',
+      },
+    );
+  }
+
+  static async isSelected(index) {
+    const parent = await this.getTreeParent(index);
+    return (await parent.getAttribute('class')).includes('selected');
+  }
+
+  static async isDisabled(index) {
+    const checkbox = await this.getCheckbox(index);
+    if (
+      (await checkbox.getAttribute('aria-disabled')) === 'true' ||
+      (await checkbox.getAttribute('disabled')) === 'true'
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  static async getRadioButtonChecked(index) {
+    const radioButton = await this.radioButton(index);
+    if ((await radioButton.getAttribute('aria-checked')) === 'true') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isRadioDisabled(index) {
+    const radioButton = await this.radioButton(index);
+    if ((await radioButton.getAttribute('aria-disabled')) === 'true') {
+      return true;
+    }
+    return false;
+  }
+
+  static async getRows() {
+    return $$('[data-testid="tree-item"]');
+  }
+
+  static async getRow(index) {
+    return (await this.getRows())[index];
+  }
+
+  static async getDraggedItem() {
+    return $('[data-testid="dragged-item"]');
+  }
+
+  static async getFirstRow() {
+    return (await this.getRows())[0];
+  }
+
+  static async getLastRow() {
+    return (await this.getRows()).pop();
+  }
+
+  static async getToggleBtn(index) {
+    return (await $$('[data-testid="tree-item-expand-toggle"]'))[index];
+  }
+
+  static async getExpandBtn() {
+    return $('[data-testid="controlled-expand-tv"]');
+  }
+
+  static async getElementsTexts() {
+    return $$('[data-testid="DS-SimpleTruncateText"]');
+  }
+
+  static async getCollapseBtn() {
+    return $('[data-testid="controlled-collapse-tv"]');
+  }
+
+  static async getDeleteBtn() {
+    return $('[data-testid="controlled-delete-tv"]');
+  }
+
+  static async getDragHandle(index) {
+    return (await $$('[data-testid="drag-handle"]'))[index];
+  }
+
+  static async getFirstDragHandle() {
+    return $$('[data-testid="drag-handle"]')[0];
+  }
+
+  static async getLastDragHandle() {
+    return (await $$('[data-testid="drag-handle"]')).pop();
+  }
+
+  static async getHighligthedTexts() {
+    return $$('[data-testid="tree-text-highlight"]');
+  }
+
+  static async getRowByContent(text) {
+    return $(`//span[contains(text(), "${text}")]`);
+  }
+
+  // Actions
+  static async getContainerHeight() {
+    const { height } = await (await this.getTreeList()).getSize();
+    return Math.round(height);
+  }
+
+  static async getRowHeight() {
+    const { height } = await (await this.getRow(1)).getSize();
+    return Math.round(height);
+  }
+
+  static async getTooltip() {
+    return $('[data-testid="popover-container"]');
+  }
+
+  static async noItemsFound() {
+    return $('[data-testid="tree-list-no-items"]');
+  }
+
+  static async clearField() {
+    const input = await this.getSearchBox();
+    const len = (await input.getValue()).length;
+    await input.click();
+    for (let i = 0; i <= len; i += 1) {
+      // eslint-disable-next-line no-await-in-loop
+      await browser.keys(Key.Backspace);
+      await browser.pause(200);
+    }
+  }
+
+  static async expandCollapseAll() {
+    return browser.performActions([
+      {
+        type: 'key',
+        id: 'keyboard',
+        parameters: { pointerType: 'mouse' },
+        actions: [
+          {
+            type: 'keyDown',
+            value: '\uE024',
+            pause: 1000,
+          },
+          {
+            type: 'pause',
+            duration: 500,
+          },
+          {
+            type: 'keyUp',
+            value: '\uE024',
+            pause: 1000,
+          },
+        ],
+      },
+    ]);
+  }
+
+  static async isExpanded(index) {
+    return (await this.getRow(index)).getAttribute('aria-expanded');
+  }
+
+  static async checkItemPseudoBorder(index) {
+    const expectedBorderColor = 'rgb(0, 106, 169)';
+    return (
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-bottom-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-left-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-right-color')) === expectedBorderColor ||
+      (await this.getItemPseudoElementProperty(index, '::before', 'border-top-color')) === expectedBorderColor
+    );
+  }
+
+  static async isFocused(index) {
+    if (await this.checkItemPseudoBorder(index)) {
+      return true;
+    }
+    return false;
+  }
+
+  static async isHovered(index) {
+    const row = await this.getRow(index);
+    const bg = await row.getCSSProperty('background-color');
+    if (bg.parsed.hex === '#ebf6ff') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isActive(index) {
+    const row = await this.getRow(index);
+    const bg = await row.getCSSProperty('background-color');
+    if (bg.parsed.hex === '#ebf6ff') {
+      return true;
+    }
+    return false;
+  }
+
+  static async isActiveFocused(index) {
+    // eslint-disable-next-line no-return-await
+    return (await this.isActive(index)) && (await this.isFocused(index));
+  }
+
+  static async isDefault(index) {
+    const row = await this.getRow(index);
+    const bg = await row.getCSSProperty('background-color');
+    if (
+      bg.parsed.hex === '#ffffff' &&
+      !(await this.isFocused(index)) &&
+      !(await this.isHovered(index)) &&
+      !(await this.isActive(index))
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  static async getFocusFirstBtn() {
+    return $('[data-testid="PUI3771-first-tv"]');
+  }
+
+  static async getFocusLastBtn() {
+    return $('[data-testid="PUI3771-last-tv"]');
+  }
+
+  static async getDragHandleBorderColor(index) {
+    const dragHandle = await this.getDragHandle(index);
+    const bottomColor = await dragHandle.getCSSProperty('border-bottom-color');
+    const topColor = await dragHandle.getCSSProperty('border-top-color');
+    const leftColor = await dragHandle.getCSSProperty('border-left-color');
+    const rightColor = await dragHandle.getCSSProperty('border-right-color');
+    const borderColor = '#005fcc';
+    if (
+      bottomColor.parsed.hex === borderColor &&
+      topColor.parsed.hex === borderColor &&
+      leftColor.parsed.hex === borderColor &&
+      rightColor.parsed.hex === borderColor
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  static async getSearchBoxInput() {
+    return $('[data-testid="ds-nav-searchbox-input"]');
+  }
+
+  static async getNextBtn() {
+    return $('[data-testid="ds-navsearchbox-next"]');
+  }
+
+  static async getPrevBtn() {
+    return $('[data-testid="ds-navsearchbox-prev"]');
+  }
+
+  static async getClearBtn() {
+    return $('[data-testid="ds-navsearchbox-clear"]');
+  }
+
+  static async getButtons(index) {
+    return $$('[data-testid="button-wrapper"]')[index];
+  }
+
+  static async getResultItems(index, total) {
+    return $(`div*=${index} / ${total}`);
+  }
+
+  static async getTextMark(text) {
+    return $(`mark*=${text}`);
+  }
+
+  static async getTextMarks(text) {
+    return $$(`mark*=${text}`);
+  }
+
+  static async tabSpaceEnter(key) {
+    if (browser.capabilities.browserName === 'Safari') {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(key);
+    } else {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Tab);
+      await browser.keys(key);
+    }
+  }
+
+  static async getBtns(index) {
+    return $$('[data-testid="ds-button"]')[index];
+  }
+
+  static async getExpandChevrons(index) {
+    return $$('[data-testid="ic-arrow-head-right"]')[index];
+  }
+
+  static async getTestCounter() {
+    return $('[data-testid="test-counter"]');
+  }
+
+  static async getRightAddons() {
+    return $$('[data-testid="right-addon-button"]');
+  }
+
+  static getRightAddonsByIndex = async (index) => getElementByIndex(this.getRightAddons, index);
+
+  static async triggerBackspace(number = 1) {
+    for (let x = 0; x < number; x += 1) {
+      await browser.keys(Key.Backspace);
+      await browser.pause(200);
+    }
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'compact') {
+    return PageObject.getSnapshotPathBuilder('TreeView', example, 'ds-treeview');
+  }
+}