dimsum-e2e-tests 3.70.0-next.54 → 3.70.0-next.56

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.70.0-next.56](https://git.elliemae.io/platform-ui/dimsum/compare/v3.70.0-next.55...v3.70.0-next.56) (2026-08-11)
+
+**Note:** Version bump only for package dimsum-e2e-tests
+
+## 3.70.0-next.55 (2026-08-10)
+
+### Bug Fixes
+
+- ds-app-picker:: a11y fixes + axe-test fixes + markdown files fixes [PUI-17213](https://jira.elliemae.io/browse/PUI-17213) [PUI-17860](https://jira.elliemae.io/browse/PUI-17860) ([#8260](https://git.elliemae.io/platform-ui/dimsum/issues/8260)) ([f24df52](https://git.elliemae.io/platform-ui/dimsum/commit/f24df52d0565660595e557ca6df3c2e6fa815644))
+
 ## 3.70.0-next.54 (2026-07-31)
 
 ### Bug Fixes

package/ds-accordion/DSAccordionCO.js

@@ -102,6 +102,10 @@ export default class DSAccordionCO extends PageObject {
 
   static getToolbarByIndex = async (index) => getElementByIndex(this.getToolbarTriggers, index);
 
+  static async getToolbarMenuByIndex(index = 0) {
+    return $$('[data-testid="ds-menuitem-menu-item-wrapper"]')[index];
+  }
+
   static getAccordionItemHeaderContainers = async () => $$('[data-testid="ds-accordion-item-header-container"]');
 
   static getAccordionItemHeaderContainerByIndex = async (index) =>

package/ds-accordion/QA_NOTES.md

@@ -0,0 +1,105 @@
+# QA Notes — ds-accordion E2E
+
+Durable QA knowledge for the `accordion` suite. Carried over from the `ds-accordion-native` POC
+notes ([PUI-18083](https://jira.elliemae.io/browse/PUI-18083)) when that parallel suite was removed —
+see "Native migration" below.
+
+## Native migration ([PUI-18742](https://jira.elliemae.io/browse/PUI-18742))
+
+`ds-accordion` now renders a native `<details>` / `<summary>` disclosure instead of the previous
+WAI-ARIA button pattern. Public API, slot names and `data-testid` values are unchanged; only the DOM
+engine changed. Full contract: [`stories/ds-accordion/docs/NativeDisclosureMigration.md`](../../stories/ds-accordion/docs/NativeDisclosureMigration.md).
+
+```html
+<div data-testid="ds-accordion_item">
+  <details data-testid="ds-accordion-item-details">
+    <summary data-testid="ds-accordion_item-header" aria-expanded aria-controls="ds-accordion-content-0">
+      <div data-testid="ds-accordion-item-header-container">… chevron + title(s) …</div>
+    </summary>
+    <div data-testid="ds-accordion_item-content" role="region" aria-labelledby="ds-accordion-header-0">…</div>
+  </details>
+  <div data-testid="ds-accordion-item-header-custom-actions-container">… custom actions …</div>
+</div>
+```
+
+**What this changes for specs:**
+
+- The trigger is a `<summary>`, **not** a `<button>`. `getAccordionHeader(i)` returns the `<summary>`.
+- The heading container lives **inside** the summary (inverse of the pre-migration nesting).
+- `role="heading"` + `aria-level` are **not** emitted by the component. They are opt-in per consumer
+  through the `dsAccordionItemHeaderContainer` slot prop. Only stories that set that prop
+  (e.g. `WithSecondaryTitleTest`, `AdvancedHeadingStructureCustomization`) expose heading semantics —
+  `HeaderControlExamplesTest` does not. Assert the role only on a story that opts in
+  (`role/DSAccordion.role-heading.func.spec.js`).
+- Custom actions render as a **sibling of `<details>`**, outside the trigger. Nothing interactive is
+  nested inside the `<summary>`.
+- `ds-accordion-item-details` is an additive slot/testid introduced by the migration.
+
+The former `ds-accordion-native` E2E suite was deleted here — `ds-accordion` **is** the native engine
+now, so the parity suite had no stories left to point at (`stories/ds-accordion-native` and
+`PATH_E2E_ACCORDION_NATIVE` were removed in PUI-18742).
+
+## header-structure func — test 04 flaky "Login not displayed" (cloud)
+
+**Status:** spec hardened (spec-only + one additive CO helper). Investigated 2026-07-02 on the native
+suite; the same hardening now lives in `header-structure/DSAccordion.header-structure.func.spec.js`.
+
+**Symptom:** in the cloud run (`E2E_BACKEND=cloud`, `BASE_URL`=NEXT/d3, Chrome-only) test
+`04: toolbar trigger in custom actions should open dropdown menu on click` broke with
+`element ("*=Login") still not displayed after 10000ms`. Only that browser runs it (the spec is
+Chrome-guarded), so it surfaces as 1 broken.
+
+**Not a defect.** Reproduced against NEXT/d3 at the SDK viewport (1920×1080): the click opens the
+`DSDropdownMenuV2` (`dropdown-menu-listbox` + `ds-floating-wrapper-root` present), `Login` resolves to
+a single visible `<p>`, not clipped by any overflow ancestor and not occluded (`elementFromPoint` at
+its center returns the element), and it stays open at 3s. Selectors, story and package are correct.
+Passed 100% locally, broke 100% in cloud → the delta is real-Chrome + BrowserStack +
+`browser.maximizeWindow()` (cloud-only).
+
+**Root cause:** the pattern "one-shot click on a toggle + `waitForDisplayed` on a deep descendant" is
+fragile. If the click doesn't leave the menu open in that driver, the wait sits the full 10s on a menu
+that never opened.
+
+**Fix:** wait for the trigger to be clickable, click it, then assert the `DSDropdownMenuV2` item
+wrapper (`getToolbarMenuByIndex` → `ds-menuitem-menu-item-wrapper`) is displayed _before_ checking the
+first option, and tag-qualify the option selector as `p*=Login` (`DSTypography variant="b1"` renders a
+`<p>`). The SDK's retries absorb residual flakiness. Optional broader mitigation: enable
+`config.specFileRetries` in `wdio.config.mjs`.
+
+## input-inside func — `data-testid` is on the `<input>`, not a wrapper
+
+`DSInputText` forwards `data-testid` through its global attributes straight onto `StyledInput`, i.e.
+the `<input>` element. A descendant selector like `[data-testid="task-name"] input` matches nothing
+and breaks on every browser. Target the testid directly.
+
+## Open defects from the native POC — re-verify against ds-accordion
+
+These were logged against `ds-accordion-native` while it was a separate POC package. Now that
+`ds-accordion` ships the native engine, **each needs re-verification against `ds-accordion`** before
+being closed or re-pointed — they are listed here so the findings are not lost with the deleted suite,
+not as confirmed `ds-accordion` defects.
+
+| Ticket                                                 | Summary                                                                                                                                                                                                                                 |
+| ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [PUI-18640](https://jira.elliemae.io/browse/PUI-18640) | Content-container slot did not apply style-props — `maxHeight`/`overflow` (scrollable-content) and padding `p` (XstyledpropsInContent) — the way pre-migration `ds-accordion` did. Breaking for consumers styling content via the slot. |
+| [PUI-18641](https://jira.elliemae.io/browse/PUI-18641) | Default title behavior changed from truncate-with-tooltip to wrap. With `wrapLabel={false}` the title truncates but shows no tooltip on hover → full text unreadable. Backwards-incompatible default + readability gap.                 |
+| [PUI-18642](https://jira.elliemae.io/browse/PUI-18642) | Arrow Icon visual spec violations (Accordion Draft v1.5.0): region width is not the spec'd 20px; when the title wraps the icon is center-aligned instead of top-aligned ("Fixed Top-aligned — Region A").                               |
+| [PUI-18695](https://jira.elliemae.io/browse/PUI-18695) | _Safari-only:_ Tab does not move focus between accordion headers after a click. Click-focus, focus ring and Enter all work; only Tab traversal is broken. Found by E2E visual PUI-14324 - 02 (Safari).                                  |
+
+Related upstream: [WebKit bug #319162](https://bugs.webkit.org/show_bug.cgi?id=319162) — in Safari,
+tabbing away from a `<summary>` that contains nested elements after **mouse** activation does not
+advance focus correctly. Keyboard-only navigation is unaffected. Unresolved upstream.
+
+## Known visual baseline note — slots (`PUI-15348 - 01`)
+
+Percy flagged a ~0.05% diff: a small lavender box at the left of each "… Secondary" row. Not a
+regression. `StyledHeading` moved from `display: contents` → `display: flex`; an element with
+`display: contents` generates no box and therefore never paints its `background`, so the `SlotsTest`
+story's lavender `item-heading` background was silently dropped before and paints now. Only visible in
+that synthetic story (every slot painted a loud color). Re-approve the baseline if it resurfaces.
+
+---
+
+_Historical detail (A/B/C/D divergence audit, Percy mechanism, run commands) lived in
+`stories/ds-accordion-native/POC_FINDINGS.md`, removed in PUI-18742. Recover with
+`git show 3468ca3ccb4^:stories/ds-accordion-native/POC_FINDINGS.md`._

package/ds-accordion/header-structure/DSAccordion.header-structure.func.spec.js

@@ -6,19 +6,29 @@ if (
     browser.capabilities.browserName === 'chrome') ||
   browser.capabilities.browserName === 'Chrome'
 ) {
-  // Tests for the DOM structural fix introduced in PUI-17912
-  // (custom action buttons moved out of role="heading" container into a sibling)
+  // Structural coverage for custom actions living OUTSIDE the disclosure trigger.
+  // Originally written for PUI-17912 (custom actions moved out of the role="heading" container).
+  // PUI-18742 migrated ds-accordion to a native <details>/<summary> disclosure, which supersedes
+  // that fix: the <summary> IS the toggle, the heading container now sits INSIDE it, and heading
+  // semantics (role="heading" + aria-level) are opt-in per consumer via the
+  // dsAccordionItemHeaderContainer slot prop — see role/DSAccordion.role-heading.func.spec.js.
+  // The invariant that still matters here: nothing interactive is nested inside the trigger.
   describe('PUI-18621 - DSAccordion:: heading container structure after renderCustomActions fix - func', () => {
     before('loading page', async () => {
       const errorOnGo = await DSAccordionCO.headerControls.go();
       if (errorOnGo) throw errorOnGo;
     });
 
-    it('01: heading container should contain only the toggle button and no other interactive elements', async () => {
+    it('01: summary trigger should wrap the heading container and no other interactive elements', async () => {
+      const trigger = await DSAccordionCO.getAccordionHeader(0);
+      await expect(await trigger.getTagName()).toBe('summary');
+
       const headingContainer = await DSAccordionCO.getAccordionItemHeaderContainerByIndex(0);
-      await expect(headingContainer).toHaveAttribute('role', 'heading');
-      const buttonsInsideHeading = await headingContainer.$$('button');
-      await expect(buttonsInsideHeading.length).toBe(1);
+      await expect(headingContainer).toExist();
+
+      // The <summary> is the toggle itself, so no nested <button> may live inside it.
+      const buttonsInsideTrigger = await trigger.$$('button');
+      await expect(buttonsInsideTrigger.length).toBe(0);
     });
 
     it('02: custom actions container should exist outside the heading container', async () => {
@@ -39,10 +49,16 @@ if (
     });
 
     it('04: toolbar trigger in custom actions should open dropdown menu on click', async () => {
+      // Hardened after the cloud-only "Login not displayed" flake (see QA_NOTES.md): wait for the
+      // trigger to be clickable, then assert the DSDropdownMenuV2 item wrapper is displayed before
+      // reaching for the option, so a menu that never opened fails fast instead of burning the
+      // 10s waitForDisplayed. `p*=Login` is tag-qualified — DSTypography variant="b1" renders a <p>.
       const toolbar = await DSAccordionCO.getToolbarByIndex(0);
+      await toolbar.waitForClickable({ timeout: 10000 });
       await toolbar.click();
-      const firstMenuOption = await $('*=Login');
-      await firstMenuOption.waitForDisplayed();
+      const menu = await DSAccordionCO.getToolbarMenuByIndex(0);
+      await expect(menu).toBeDisplayed();
+      const firstMenuOption = await $('p*=Login');
       await expect(firstMenuOption).toBeDisplayed();
     });
   });

package/ds-accordion/input-inside/DSAccordion.input-inside.func.spec.js

@@ -8,7 +8,9 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       if (errorOnGo) throw errorOnGo;
     });
     it('01: should type into an input rendered inside the open accordion item', async () => {
-      const input = await $('[data-testid="task-name"] input');
+      // DSInputText forwards `data-testid` through its global attributes onto the <input> itself
+      // (StyledInput), not onto the wrapper — so the testid IS the input, never its ancestor.
+      const input = await $('[data-testid="task-name"]');
       await input.waitForDisplayed();
       await input.setValue('Test task');
       await expect(input).toHaveValue('Test task');

package/ds-apppicker/truncation/DSAppPicker.truncation.visual.spec.js

@@ -11,35 +11,31 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await browser.maximizeWindow();
     });
     it('01: should show the full label on hover', async () => {
-      // applitools is losing the hover when taking the snapshot
-      await browser.eyesOpen();
       await (await DSAppPickerCO.getOpenAppPicker()).waitForDisplayed();
       const openAppPickerBtn = await DSAppPickerCO.getOpenAppPicker();
       await openAppPickerBtn.click();
       const secondChip = await DSAppPickerCO.getChipByLabel('Pipeline but with a really long label that will truncate');
       await mouseOver(secondChip);
       await browser.pause(500);
-      const snapshot = await browser.eyesCheckSnapshot(DSAppPickerCO.snapshotPath('appPicker-truncation-hover'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
     it('02: should show the full label on hover - disabled Chip', async () => {
-      await browser.eyesOpen();
       const DisabledChip = await DSAppPickerCO.getChipByLabel(
         'Dashboard but with a really long label that will truncate',
       );
       await mouseOver(DisabledChip);
       await browser.pause(500);
-      const snapshot = await browser.eyesCheckSnapshot(DSAppPickerCO.snapshotPath('appPicker-truncation-disabled'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
     it('03: should show the full label on focus', async () => {
-      await browser.eyesOpen();
-      const openAppPickerBtn = await DSAppPickerCO.getOpenAppPicker();
-      await openAppPickerBtn.click();
+      // the panel is already open from test 01 - since PUI-18354 the trigger
+      // toggles, so clicking it again would close it
       await browser.keys(Key.Tab);
       await browser.keys(Key.Enter);
       await browser.pause(500);
-      const snapshot = await browser.eyesCheckSnapshot(DSAppPickerCO.snapshotPath('appPicker-truncation-focus'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-chat/DSChat.visual.spec.js

@@ -245,7 +245,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
 
   describe('PUI-9222 - Chat, Long Words, Visual Tests', () => {
     before('loading page', async () => {
-      const errorOnGo = await ChatCO.basicE2eURL.go();
+      const errorOnGo = await ChatCO.basicTestURL.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('should display long words breaking at composer', async () => {

package/ds-chat/DSChatCO.js

@@ -11,15 +11,15 @@ export default class DSChatCO extends PageObject {
 
   static containerURL = new Urlbuilder(PATH_E2E_CHAT, 'container');
 
-  static loadMoreURL = new Urlbuilder(PATH_E2E_CHAT, 'container-load-more');
+  static loadMoreURL = new Urlbuilder(PATH_E2E_CHAT, 'container-load-more-test');
 
-  static loadingURL = new Urlbuilder(PATH_E2E_CHAT, 'loading-container');
+  static loadingURL = new Urlbuilder(PATH_E2E_CHAT, 'loading-container-test');
 
-  static loadingErrorURL = new Urlbuilder(PATH_E2E_CHAT, 'loading-error');
+  static loadingErrorURL = new Urlbuilder(PATH_E2E_CHAT, 'loading-error-test');
 
-  static floatingExampleURL = new Urlbuilder(PATH_E2E_CHAT, 'floating-example');
+  static floatingExampleURL = new Urlbuilder(PATH_E2E_CHAT, 'floating-example-test');
 
-  static focusCasesURL = new Urlbuilder(PATH_E2E_CHAT, 'container-focus-cases');
+  static focusCasesURL = new Urlbuilder(PATH_E2E_CHAT, 'container-focus-cases-test');
 
   static mobileContainerURL = new Urlbuilder(PATH_E2E_CHAT, 'mobile-container-test');
 
@@ -27,23 +27,23 @@ export default class DSChatCO extends PageObject {
 
   static tooltipPosition = new Urlbuilder(PATH_E2E_CHAT, 'tooltip-position-test');
 
-  static focuseableBanners = new Urlbuilder(PATH_E2E_CHAT, 'focus-on-banner');
+  static focuseableBanners = new Urlbuilder(PATH_E2E_CHAT, 'focus-on-banner-test');
 
-  static newMessages = new Urlbuilder(PATH_E2E_CHAT, 'container-new-messages');
+  static newMessages = new Urlbuilder(PATH_E2E_CHAT, 'container-new-messages-test');
 
-  static nonDeliveredURL = new Urlbuilder(PATH_E2E_CHAT, 'non-delivered-messages');
+  static nonDeliveredURL = new Urlbuilder(PATH_E2E_CHAT, 'non-delivered-messages-test');
 
-  static nonGridInfluencerURL = new Urlbuilder(PATH_E2E_CHAT, 'non-grid-influencer-integration');
+  static nonGridInfluencerURL = new Urlbuilder(PATH_E2E_CHAT, 'non-grid-influencer-integration-test');
 
-  static customBanner = new Urlbuilder(PATH_E2E_CHAT, 'custom-banner');
+  static customBanner = new Urlbuilder(PATH_E2E_CHAT, 'custom-banner-test');
 
-  static emptyState = new Urlbuilder(PATH_E2E_CHAT, 'empty-state');
+  static emptyState = new Urlbuilder(PATH_E2E_CHAT, 'empty-state-test');
 
   static globalLineHeight = new Urlbuilder(PATH_E2E_CHAT, 'global-line-height');
 
   static unreadMessagesBanner = new Urlbuilder(PATH_E2E_CHAT, 'unread-messages-banner');
 
-  static basicE2eURL = new Urlbuilder(PATH_E2E_CHAT, 'basic-e-2-e');
+  static basicTestURL = new Urlbuilder(PATH_E2E_CHAT, 'basic-test');
 
   // selector
   static async isTyping() {

package/ds-chat/components/CardCO.js

@@ -1,9 +1,7 @@
-import { PATH_CHAT_PARTS, PATH_E2E_CHAT_CARD } from '../../paths';
+import { PATH_E2E_CHAT_CARD } from '../../paths';
 import { PageObject, Urlbuilder } from '../../helpers';
 
 export default class CardCO extends PageObject {
-  static chatCardURL = new Urlbuilder(PATH_CHAT_PARTS, 'chat-card');
-
   static cardBasicURL = new Urlbuilder(PATH_E2E_CHAT_CARD, 'basic-test');
 
   static cardWithNotificationBadgesURL = new Urlbuilder(PATH_E2E_CHAT_CARD, 'with-notification-badges-test');

package/ds-chat/components/ComposerCO.js

@@ -13,7 +13,7 @@ export default class ComposerCO extends PageObject {
 
   static responsiveContainerUCURL = new Urlbuilder(PATH_E2E_CHAT, 'responsive-container');
 
-  static containerFocusCasesURL = new Urlbuilder(PATH_E2E_CHAT, 'container-focus-cases');
+  static containerFocusCasesURL = new Urlbuilder(PATH_E2E_CHAT, 'container-focus-cases-test');
 
   static LONG_STRING = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula bibendum nulla';
 

package/ds-chat/components/FloatingButtonCO.js

@@ -2,8 +2,10 @@ import { PATH_E2E_CHAT } from '../../paths';
 import { PageObject, Urlbuilder } from '../../helpers';
 
 export default class FloatingButtonCO extends PageObject {
-  static floatingButtonURL = new Urlbuilder(PATH_E2E_CHAT, 'float-button');
-
+  // FloatingExampleTest renders the floating button alone at rest (its chat panel is gated behind
+  // `show`, initially false), so it covers both the isolated-button visual states and the in-context
+  // axe-core run. The former dedicated `float-button` story was removed in the
+  // ds-chat-floating-button compliance retrofit and is not coming back.
   static floatingExampleURL = new Urlbuilder(PATH_E2E_CHAT, 'floating-example-test');
 
   // selectors

package/ds-chat/floatingbutton/DSChat-floating-button.visual.spec.js

@@ -5,7 +5,7 @@ import { mouseOver, keyboardActions, tickActions, performKeyboardAction } from '
 if (!browser.capabilities['ice:options'].isPhone) {
   describe('PUI-6669 - Chat, Floating Button, States - Visual Tests', () => {
     beforeEach('loading page', async () => {
-      const errorOnGo = await FloatingButtonCO.floatingButtonURL.go();
+      const errorOnGo = await FloatingButtonCO.floatingExampleURL.go();
       if (errorOnGo) throw errorOnGo;
     });
     it('should display the floating button in default state', async () => {

package/ds-controlled-form/ds-controlled-checkbox/Basic/DSControlledCheckbox.axe-core.basic.func.spec.js

@@ -19,24 +19,24 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
       await browser.keys(Key.Tab);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
       await mouseOver(checkbox);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('04: Evaluate checkbox accessibility with axe-core (clicked)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
       await checkbox.click();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/Basic/DSControlledCheckbox.basic.visual.spec.js

@@ -0,0 +1,56 @@
+import { Key } from 'webdriverio';
+import { mouseOver } from '../../../helpers';
+import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18822 - DSControlledCheckbox: update to latest spec and typography- visual test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.basicURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01:  the checked checkbox is not focused', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
+      await checkbox.waitForExist();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: checkbox hover even when checked', async () => {
+      const controlBox = await DSControlledCheckboxCO.getCheckboxInputWrapper();
+      await controlBox.moveTo();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03:  the checked checkbox is focused', async () => {
+      await browser.keys(Key.Tab);
+      const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('04: checkbox is focused but unchecked', async () => {
+      await browser.keys(Key.Space);
+      const checkbox = await DSControlledCheckboxCO.getCustomCheckbox();
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('05: checkbox not focused, not hovered when unchecked', async () => {
+      await browser.keys(Key.Tab);
+      await mouseOver(null, 400, 300);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('06: checkbox hover even when unchecked', async () => {
+      const controlBox = await DSControlledCheckboxCO.getCheckboxInputWrapper();
+      await controlBox.moveTo();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-controlled-form/ds-controlled-checkbox/DSControlledCheckboxCO.js

@@ -29,6 +29,10 @@ export default class DSControlledCheckboxCO extends PageObject {
     return $('[data-testid="ds-checkbox"]');
   }
 
+  static async getCheckboxInputWrapper() {
+    return $('[data-testid="ds-checkbox-input-wrapper"]');
+  }
+
   static async getCustomCheckbox() {
     return $('[data-testid="custom-data-testid"]');
   }

package/ds-controlled-form/ds-controlled-checkbox/Disabled/DSControlledCheckbox.axe-core.disabled.func.spec.js

@@ -18,7 +18,7 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/Disabled/DSControlledCheckbox.disabled.visual.spec.js

@@ -11,7 +11,7 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       const checkbox = await DSControlledCheckboxCO.getCheckboxByLabel('Group');
       await checkbox.waitForDisplayed();
       await browser.keys(Key.Tab);
-      const snapshot = await browser.checkSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-disabled'));
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-checkbox/HasError/DSControlledCheckbox.axe-core.hasError.func.spec.js

@@ -19,24 +19,24 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
       await browser.keys(Key.Tab);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await mouseOver(checkbox);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('04: Evaluate checkbox accessibility with axe-core (clicked)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(1);
       await checkbox.click();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/HasError/DSControlledCheckbox.has-error.visual.spec.js

@@ -1,3 +1,4 @@
+import { Key } from 'webdriverio';
 import { mouseOver } from '../../../helpers';
 import DSControlledCheckboxCO from '../DSControlledCheckboxCO';
 
@@ -13,7 +14,76 @@ if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:o
       await checkbox1.click();
       await checkbox1.click();
       await mouseOver(checkbox2);
-      const snapshot = await browser.checkSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-hasError'));
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+
+  describe('PUI-18849 - DSControlledCheckbox - hasError - Visual Test', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSControlledCheckboxCO.hasError.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01:  the partial selected checkbox is not focused', async () => {
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await checkbox.waitForExist();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: checkbox hover even when partial selected', async () => {
+      const controlBox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await controlBox.moveTo();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('03:  the partial selected checkbox is focused', async () => {
+      await browser.keys(Key.Tab);
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('04: checkbox is focused but not selected', async () => {
+      await browser.keys(Key.Space);
+      await browser.keys(Key.Space);
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('05: checkbox not focused, not hovered when not selected', async () => {
+      await browser.keys(Key.Tab);
+      await mouseOver(null, 400, 300);
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('06: checkbox hover even when not selected', async () => {
+      const controlBox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await controlBox.moveTo();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+    it('07: the selected checkbox is focused', async () => {
+      await browser.keys(Key.Tab);
+      await browser.keys(Key.Space);
+      const controlBox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
+      await mouseOver(controlBox);
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await expect(checkbox).toBeFocused();
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+    it('08: the selected checkbox is hovered', async () => {
+      await browser.keys(Key.Tab);
+      const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(2);
+      await mouseOver(checkbox);
+      const snapshot = await browser.percyCheckScreenshot();
       await expect(snapshot).toEqual(0);
     });
   });

package/ds-controlled-form/ds-controlled-checkbox/Mixed/DSControlledCheckbox.axe-core.mixed.func.spec.js

@@ -19,24 +19,24 @@ if (
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await checkbox.waitForExist();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('02: Evaluate checkbox accessibility with axe-core (focused)', async () => {
       await browser.keys(Key.Tab);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('03: Evaluate checkbox accessibility with axe-core (hovered)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(0);
       await mouseOver(checkbox);
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
     it('04: Evaluate checkbox accessibility with axe-core (clicked)', async () => {
       const checkbox = await DSControlledCheckboxCO.getCheckboxByIndex(2);
       await checkbox.click();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-controlled-form/ds-controlled-checkbox/Mixed/DSControlledCheckbox.mixed.visual.spec.js

@@ -12,7 +12,7 @@ describe('PUI-7100 - DSControlledCheckbox - Visual Test - mixed', () => {
     await checkbox1.click();
     await checkbox1.click();
     await mouseOver(checkbox2);
-    const snapshot = await browser.checkSnapshot(DSControlledCheckboxCO.snapshotPath('checkbox-mixed'));
+    const snapshot = await browser.percyCheckScreenshot();
     await expect(snapshot).toEqual(0);
   });
 });