dimsum-e2e-tests 3.80.0-next.3 → 3.80.0-next.31

package/ds-chip/DSChip.visual.spec.js

@@ -78,25 +78,3 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
     });
   });
 }
-if (browser.capabilities['ice:options'].isPhone) {
-  describe('PUI-8636 - Chip, Mobile -visual', () => {
-    before('loading page', async () => {
-      const errorOnGo = await DSChipCO.mobileURL.go();
-      if (errorOnGo) throw errorOnGo;
-    });
-    it('should show chips on mobile viewport', async () => {
-      await browser.eyesOpen();
-      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('dschips-mobile'));
-      await expect(snapshot).toEqual(0);
-    });
-    it('should show chips on mobile viewport behind the popover', async () => {
-      await browser.eyesOpen();
-      const chip = await DSChipCO.getChipButtonByIndex(2);
-      await chip.click();
-      const mobileContextMenu = await DSChipCO.getMobileContextMenu();
-      await mobileContextMenu.waitForDisplayed();
-      const snapshot = await browser.eyesCheckSnapshot(DSChipCO.snapshotPath('dschips-mobile-behind-shadow'));
-      await expect(snapshot).toEqual(0);
-    });
-  });
-}

package/ds-chip/DSChipCO.js

@@ -10,8 +10,6 @@ export default class DSChipCO extends PageObject {
 
   static slotsURL = new Urlbuilder(PATH_E2E_CHIP, 'slots-test');
 
-  static mobileURL = new Urlbuilder(PATH_E2E_CHIP, 'mobile-test');
-
   static shapeURL = new Urlbuilder(PATH_E2E_CHIP, 'shape-test');
 
   static applyAriaDisabledURL = new Urlbuilder(PATH_E2E_CHIP, 'apply-aria-disabled-test');
@@ -46,10 +44,6 @@ export default class DSChipCO extends PageObject {
     return $('[data-testid="ds-tooltip-v3-tooltip-text-wrapper"]');
   }
 
-  static async getMobileContextMenu() {
-    return $('[data-testid="ds-mobile-context-menu"]');
-  }
-
   // Slots
 
   static async getButtonSlotByIndex(index = 0) {

package/ds-fast-list/DSFastListCO.js

@@ -0,0 +1,37 @@
+import { PATH_E2E_FAST_LIST } from '../paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSFastListCO extends PageObject {
+  static basicTest = new Urlbuilder(PATH_E2E_FAST_LIST, 'basic-test');
+
+  static scrollToIndexTest = new Urlbuilder(PATH_E2E_FAST_LIST, 'scroll-to-index-test');
+
+  // The container is the scroll element (overflow: auto); the wrapper list carries role="list"
+  static async getContainer() {
+    return $('[data-testid="ds-fastlist-container"]');
+  }
+
+  static async getWrapperList() {
+    return $('[data-testid="ds-fastlist-wrapper-list"]');
+  }
+
+  static async getItems() {
+    return $$('[data-testid="ds-fastlist-item"]');
+  }
+
+  // Only items inside the virtualization window exist in the DOM, so this resolves
+  // to nothing for indexes outside it — that absence is the assertion we rely on.
+  static async getItemByIndex(index) {
+    return $(`[data-testid="ds-fastlist-item"][data-index="${index}"]`);
+  }
+
+  // The story renders a single input and a single button, so the component-owned
+  // data-testids are unambiguous here.
+  static async getJumpInput() {
+    return $('[data-testid="ds-inputtext-input"]');
+  }
+
+  static async getJumpButton() {
+    return $('[data-testid="ds-button"]');
+  }
+}

package/ds-fast-list/basic/DSFastList.basic.axe-core.func.spec.js

@@ -0,0 +1,28 @@
+import DSFastListCO from '../DSFastListCO';
+import { axeCoreCheck } from '../../helpers';
+
+// Coverage for the ds-fast-list compliance remediation in PUI-19124.
+// DOM-attribute/a11y assertions are identical across engines, so this runs Chrome only.
+// The `|| browserName === 'Chrome'` fallback is mandatory: BrowserStack reports the
+// capitalized name and a lowercase-only guard would register 0 tests (false green).
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19194 - DSFastList:: virtualized list accessibility - Axe-Core', () => {
+    before(async () => {
+      const errorOnGo = await DSFastListCO.basicTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations on the rendered list', async () => {
+      const wrapperList = await DSFastListCO.getWrapperList();
+      await wrapperList.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-fast-list/basic/DSFastList.basic.visual.spec.js

@@ -0,0 +1,23 @@
+import DSFastListCO from '../DSFastListCO';
+
+// Coverage for the ds-fast-list compliance remediation in PUI-19124.
+// Only the unscrolled state is snapshotted on purpose: Percy re-renders the serialized DOM, and an
+// inner container's scroll offset is runtime state that is not part of that serialization, so a
+// scrolled virtualized list is not reliably reproducible in a snapshot. The scrolled state is
+// covered functionally instead — see e2e/ds-fast-list/scroll-to-index.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19193 - DSFastList:: virtualized list window rendering - Visual', () => {
+    before(async () => {
+      const errorOnGo = await DSFastListCO.basicTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the virtualized list with its first window of items', async () => {
+      const wrapperList = await DSFastListCO.getWrapperList();
+      await wrapperList.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-fast-list/scroll-to-index/DSFastList.scroll-to-index.func.spec.js

@@ -0,0 +1,45 @@
+import DSFastListCO from '../DSFastListCO';
+
+// Coverage for the ds-fast-list compliance remediation in PUI-19124.
+// The in-package Playwright CT already covers this in Chromium; this spec exists to run the same
+// contract across the full browser matrix.
+// The window size is not stable (items are measured after mount, so the overscan window grows),
+// which is why the assertions are "bounded window + index recycled", never an exact item count.
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-19195 - DSFastList:: scroll to index via actionRef - Func', () => {
+    before(async () => {
+      const errorOnGo = await DSFastListCO.scrollToIndexTest.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render only a window of the 200 items, leaving far items out of the DOM', async () => {
+      const firstItem = await DSFastListCO.getItemByIndex(0);
+      await expect(firstItem).toBeExisting();
+
+      const farItem = await DSFastListCO.getItemByIndex(150);
+      await expect(farItem).not.toBeExisting();
+
+      const items = await DSFastListCO.getItems();
+      await expect(items.length).toBeLessThan(60);
+    });
+
+    it('02: should mount the requested item and recycle the first one after jumping', async () => {
+      const jumpInput = await DSFastListCO.getJumpInput();
+      await jumpInput.setValue('150');
+      const jumpButton = await DSFastListCO.getJumpButton();
+      await jumpButton.click();
+
+      const farItem = await DSFastListCO.getItemByIndex(150);
+      await farItem.waitForExist();
+      await expect(farItem).toBeDisplayed();
+      await expect(farItem).toHaveText('Test 150');
+
+      // the window moved instead of growing: index 0 is no longer in the DOM
+      const firstItem = await DSFastListCO.getItemByIndex(0);
+      await expect(firstItem).not.toBeExisting();
+
+      const items = await DSFastListCO.getItems();
+      await expect(items.length).toBeLessThan(60);
+    });
+  });
+}

package/ds-indeterminate-progress-indicator/DSIndeterminateProgressIndicatorCO.js

@@ -13,6 +13,10 @@ export default class DSIndeterminateProgressIndicatorCO extends PageObject {
     return (await this.getComponentWrapper()).$('div');
   }
 
+  static async getRoots() {
+    return $$('[data-testid="ds-indeterminateprogressindicator-root"]');
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('IndeterminateProgressIndicator', example);

package/ds-indeterminate-progress-indicator/accessible-name/DSIndeterminateProgressIndicator.accessible-name.func.spec.js

@@ -0,0 +1,51 @@
+import DSIndeterminateProgressIndicatorCO from '../DSIndeterminateProgressIndicatorCO';
+
+// Tests for the fix introduced in PUI-18880: the root used to carry a `title` duplicating its `aria-label`,
+// which some screen readers announce twice. The accessible name must come from `aria-label` only.
+//
+// Chrome only: pure DOM attribute contract. The `|| 'Chrome'` branch is mandatory, BrowserStack reports the
+// capitalised name and a lowercase-only guard registers zero tests.
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-19251 - DSIndeterminateProgressIndicator:: accessible name without title attribute - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSIndeterminateProgressIndicatorCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should expose the label via aria-label only, with no title attribute', async () => {
+      // Wait for the story's timed state change so the final labels are the ones asserted.
+      const dynamicTitle = await DSIndeterminateProgressIndicatorCO.getIndeterminateProgressIndicatorTitle();
+      await dynamicTitle.waitForDisplayed();
+      await browser.waitUntil(async () => (await dynamicTitle.getText()).includes('Title changed'), {
+        timeout: 10000,
+        timeoutMsg: 'dynamic title did not change',
+      });
+
+      const roots = await DSIndeterminateProgressIndicatorCO.getRoots();
+      await expect(roots).toBeElementsArrayOfSize(9);
+
+      // One read for all roots: lists every root carrying a title, or whose aria-label is empty or
+      // differs from the visible text. An empty list means the contract holds for all of them.
+      const offenders = await browser.execute(() => {
+        const found = [];
+        const nodes = document.querySelectorAll('[data-testid="ds-indeterminateprogressindicator-root"]');
+        for (let i = 0; i < nodes.length; i += 1) {
+          const ariaLabel = nodes[i].getAttribute('aria-label');
+          const title = nodes[i].getAttribute('title');
+          const text = nodes[i].innerText.trim();
+          if (title !== null || !ariaLabel || ariaLabel !== text) found.push({ ariaLabel, title, text });
+        }
+        return found;
+      });
+      await expect(offenders).toEqual([]);
+
+      const titledNodes = await browser.execute(() => document.querySelectorAll('#storybook-root [title]').length);
+      await expect(titledNodes).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.fullFeatures.axe-core.func.spec.js

@@ -0,0 +1,37 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10670 - LeftNavigation: Axe-Core: Basic full features', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: All collapsed (Section icons)', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: Click Notifications and expand sections titles', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: Click and expand Notifications to have items with subsections', async () => {
+      await (await LeftNavCO.leftNavItem(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('04: Collapse Notifications and open forms with plain items', async () => {
+      await (await LeftNavCO.leftChevron()).click();
+      await (await LeftNavCO.leftNavItem(2)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.isSkeleton.axe-core.func.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-11620 - LeftNavigation, isSkeleton prop -AxeCore Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.isSkeletonURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display left navigation with isSkeleton and pass the axe-core scan', async () => {
+      const skeleton = await LeftNavCO.getSkeletonByIndex();
+      await skeleton.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.keepingItems.axe-core.func.spec.js

@@ -0,0 +1,34 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10674 - LeftNavigation: Axe-Core: Keeping items', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.keepingItems.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should expand notifications and keep the remaining sections', async () => {
+      const subItemBtn = await LeftNavCO.getSubItemBtn();
+      await subItemBtn.click();
+      await (await LeftNavCO.leftComponent(0)).click();
+      const itemLabel = await LeftNavCO.itemLabel(0);
+      await itemLabel.waitForDisplayed();
+      const notificationHeader = await LeftNavCO.leftNavItem(0);
+      await notificationHeader.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: should scroll down to display the remaining sections', async () => {
+      const menuItemBtn = await LeftNavCO.getMenuItemBtn();
+      await menuItemBtn.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.loadingIndicator.axe-core.func.spec.js

@@ -0,0 +1,41 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck, mouseOver } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10671 - LeftNavigation, Axe-Core: Loading indicator', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.loading.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: loading indicator in leftnav closed', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      await loadingIndicator.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('02: loading indicator with tooltip (leftnav closed)', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      await mouseOver(loadingIndicator);
+      const loadingIndicatorTooltip = await LeftNavCO.loadingIndicatorTooltip();
+      await loadingIndicatorTooltip.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('03: loading indicator in leftnav opened', async () => {
+      const loadingIndicator = await LeftNavCO.loadingIndicator();
+      await loadingIndicator.waitForDisplayed();
+      const footerBtn = await LeftNavCO.footerBtn();
+      const footerLabel = await LeftNavCO.footerLabel();
+      await footerBtn.click();
+      await footerLabel.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.notificationBadge.axe-core.func.spec.js

@@ -0,0 +1,21 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10673 - LeftNavigation, Axe-Core: Notification badge', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.notificationBadgingURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display integrated notification badge combinations', async () => {
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.searchBar.axe-core.func.spec.js

@@ -0,0 +1,26 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10677 - LeftNavigation, Axe-Core: Search bar', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: Trigger search button and check axe scan', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      await (await LeftNavCO.leftNavItem(0)).click();
+      const searchButton = await LeftNavCO.getIconButtonByIndex(0);
+      await searchButton.waitForDisplayed();
+      await searchButton.click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.showCase.axe-core.func.spec.js

@@ -0,0 +1,23 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10250 - LeftNavigation, Axe-Core: Showcase, more usecases', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.showcaseURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display the use case showcase and pass the axe scan', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      await (await LeftNavCO.leftNavItem(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.tooltip.axe-core.func.spec.js

@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck, mouseOver } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10672 - LeftNavigation, Axe-Core: Tooltip -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.fullFeatures.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display tooltip', async () => {
+      const notiItem = await LeftNavCO.leftNavItem(0);
+      await notiItem.click();
+      await notiItem.click();
+      const truncItem = await LeftNavCO.getTruncatedText(0);
+      await mouseOver(truncItem);
+      const tooltip = await LeftNavCO.getTooltip();
+      await tooltip.waitForDisplayed();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-leftnavigation/LeftNavigation.wrappedText.axe-core.func.spec.js

@@ -0,0 +1,27 @@
+/* eslint-disable max-len */
+import LeftNavCO from './LeftNavigationCO';
+import { axeCoreCheck } from '../helpers';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'Chrome') ||
+  browser.capabilities.browserName === 'chrome'
+) {
+  describe('PUI-10676 - LeftNavigation, Axe-Core: Wrapped text -func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await LeftNavCO.wrapped.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+    it('01: should display truncated sections', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+    it('01: should display truncated items', async () => {
+      await (await LeftNavCO.leftComponent(0)).click();
+      const result = await axeCoreCheck();
+      expect(result.length).toBe(0);
+    });
+  });
+}

package/ds-panel-header/DSPanelHeader.func.spec.js

@@ -0,0 +1,24 @@
+import DSPanelHeaderCO from './DSPanelHeaderCO';
+/* 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 - PanelHeader:: 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('PUI-XXXX - PanelHeader:: example test - data-testid exists', () => {
+  before('loading page', async () => {
+    const errorOnGo = await DSPanelHeaderCO.basic.go();
+    if (errorOnGo) throw errorOnGo;
+  });
+  it('01: wrapper should be displayed', async () => {
+    const wrapper = await DSPanelHeaderCO.getWrapper();
+    await expect(wrapper).toBeDisplayedInViewport();
+  });
+});

package/ds-panel-header/DSPanelHeaderCO.js

@@ -0,0 +1,17 @@
+import { PANEL_HEADER_DATA_TESTID } from '@elliemae/ds-panel-header';
+import { PATH_PANEL_HEADER } from '../../environments/storybook/paths';
+import { PageObject, Urlbuilder } from '../helpers';
+
+export default class DSPanelHeader extends PageObject {
+  static basic = new Urlbuilder(PATH_PANEL_HEADER, 'basic');
+
+  // Selectors
+  static async getWrapper() {
+    return $(`[data-testid="${PANEL_HEADER_DATA_TESTID.ROOT}"]`);
+  }
+
+  // Snapshots
+  static snapshotPath(example = 'basic') {
+    return PageObject.getSnapshotPathBuilder('DSPanelHeader', example, 'ds-panel-header');
+  }
+}

package/ds-pills-v2/DSPillsV2CO.js

@@ -1,7 +1,21 @@
-import { PATH_E2E_PILLS_V2 } from '../paths';
+import { PATH_E2E_PILLS_V2, PATH_E2E_PILLS_V2_PITFALLS } from '../paths';
 import { PageObject, Urlbuilder, getElementByIndex } from '../helpers';
 
 export default class DSPillsV2CO extends PageObject {
+  /**
+   * Every id in the InputWithFormItemBlockTest story is derived by DSFormLayoutBlockItem from the
+   * `inputID` it is given. Derived once here so neither the selectors below nor the spec rebuild
+   * the `_feedback_message` / `_error_message` suffixes by hand.
+   */
+  static IDS = {
+    input: 'normal',
+    feedback: 'normal_feedback_message',
+    error: 'normal_error_message',
+  };
+
+  /** What the input's aria-describedby must equal, in the order the story supplies the messages. */
+  static DESCRIBED_BY = `${this.IDS.feedback} ${this.IDS.error}`;
+
   // Desktop
   static removableURL = new Urlbuilder(PATH_E2E_PILLS_V2, 'removable-pill-test');
 
@@ -27,6 +41,15 @@ export default class DSPillsV2CO extends PageObject {
 
   static multiSelectMB = new Urlbuilder(PATH_E2E_PILLS_V2, 'multi-select-menu-button-test');
 
+  // Pitfalls
+  static inputWithFormItemBlockURL = new Urlbuilder(PATH_E2E_PILLS_V2_PITFALLS, 'input-with-form-item-block-test');
+
+  // Distinct from `inputURL` above: same story name, different path. Both are hand-copies of the
+  // Input Pill pitfall story's 12 pills; this one is the Pitfalls-scoped twin used by the attribute
+  // spec, `inputURL` is the older copy carrying the axe (PUI-11496) and Percy (PUI-8356) baselines.
+  // The E2E copy renders PendingReviewDisclaimer; the canonical component pitfall story additionally renders InputPillLabelRequirementDisclaimer.
+  static inputPillPitfallURL = new Urlbuilder(PATH_E2E_PILLS_V2_PITFALLS, 'input-pill-test');
+
   static getUrl(component = 'basic') {
     return PageObject.getUrl(PATH_E2E_PILLS_V2, component);
   }
@@ -93,6 +116,35 @@ export default class DSPillsV2CO extends PageObject {
     return $('[data-testid="dropdown-menu-listbox"]');
   }
 
+  // --- InputWithFormItemBlockTest: label / error association selectors ---
+
+  /** The pill's inner <input>, reached by the id the story overrides onto it. */
+  static async getAssociatedInput() {
+    return $(`#${this.IDS.input}`);
+  }
+
+  /** `$$` on purpose — the count is what proves the override did not duplicate the id. */
+  static async getNodesWithInputId() {
+    return $$(`[id="${this.IDS.input}"]`);
+  }
+
+  /** The DSFormLayoutBlockItem label, which must point at the input via `for`. */
+  static async getAssociatedInputLabel() {
+    return $(`label[for="${this.IDS.input}"]`);
+  }
+
+  static async getFeedbackMessage() {
+    return $(`#${this.IDS.feedback}`);
+  }
+
+  static async getErrorMessage() {
+    return $(`#${this.IDS.error}`);
+  }
+
+  static async getClearIcon() {
+    return $('[data-testid="ds-pill-clear-icon"]');
+  }
+
   // Snapshots
   static snapshotPath(example = 'basic') {
     return PageObject.getSnapshotPathBuilder('Pills', example);