dimsum-e2e-tests 3.70.0-next.53 → 3.70.0-next.55

package/ds-card-v3/notification-badges/DSCardV3.notification-badges.axe-core.func.spec.js

@@ -0,0 +1,33 @@
+import DSCardV3CO from '../DSCardV3CO';
+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-18806 - DSCardV3:: notification badge card accessibility - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.notificationBadgesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations', async () => {
+      const card = await DSCardV3CO.getCardContainer();
+      await card.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+
+    it('02: should have no accessibility violations with an action button focused', async () => {
+      const flagAction = await DSCardV3CO.getButtonByIndex(0);
+      await flagAction.click();
+      await expect(flagAction).toBeFocused();
+
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+  });
+}

package/ds-card-v3/notification-badges/DSCardV3.notification-badges.visual.spec.js

@@ -0,0 +1,28 @@
+import { Key } from 'webdriverio';
+import DSCardV3CO from '../DSCardV3CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18805 - DSCardV3:: notification badge card render - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.notificationBadgesURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the card with a notification badge and action buttons', async () => {
+      const card = await DSCardV3CO.getCardContainer();
+      await card.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display the leading action button with its focus ring - [TAB]', async () => {
+      await browser.keys(Key.Tab);
+      const flagAction = await DSCardV3CO.getButtonByIndex(0);
+      await expect(flagAction).toBeFocused();
+
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-card-v3/variant-accented/DSCardV3.variant-accented.axe-core.func.spec.js

@@ -0,0 +1,45 @@
+import DSCardV3CO from '../DSCardV3CO';
+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-18807 - DSCardV3:: variant accented content and menu states accessibility - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.variantAccentURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should pass axe-core in the collapsed state', async () => {
+      const expandContentButton = await DSCardV3CO.getExpandContentButton();
+      await expandContentButton.waitForDisplayed();
+      await expect(expandContentButton).toHaveAttribute('aria-expanded', 'false');
+
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+
+    it('02: should pass axe-core with the card body expanded', async () => {
+      const expandContentButton = await DSCardV3CO.getExpandContentButton();
+      await expandContentButton.click();
+      await expect(expandContentButton).toHaveAttribute('aria-expanded', 'true');
+      const cardBody = await DSCardV3CO.getCardBody();
+      await expect(cardBody).toBeDisplayedInViewport();
+
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+
+    it('03: should pass axe-core with the card actions menu open', async () => {
+      const menuButton = await DSCardV3CO.getButtonByIndex(1);
+      await menuButton.click();
+      await expect(menuButton).toHaveAttribute('aria-expanded', 'true');
+
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+  });
+}

package/ds-card-v3/variant-accented-disabled/DSCardV3.variant-accented-disabled.axe-core.func.spec.js

@@ -0,0 +1,35 @@
+import { Key } from 'webdriverio';
+import DSCardV3CO from '../DSCardV3CO';
+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-18808 - DSCardV3:: variant accented-disabled accessibility - Axe-Core', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.variantAccentedDisabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should have no accessibility violations', async () => {
+      const card = await DSCardV3CO.getCardContainer();
+      await card.waitForDisplayed();
+
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+
+    it('02: should have no violations with the aria-disabled control focused', async () => {
+      const expandContentButton = await DSCardV3CO.getExpandContentButton();
+      await expect(expandContentButton).toHaveAttribute('aria-disabled', 'true');
+      await browser.keys(Key.Tab);
+      await expect(expandContentButton).toBeFocused();
+
+      const result = await axeCoreCheck();
+      await expect(result).toHaveLength(0);
+    });
+  });
+}

package/ds-card-v3/variant-accented-disabled/DSCardV3.variant-accented-disabled.visual.spec.js

@@ -0,0 +1,28 @@
+import { Key } from 'webdriverio';
+import DSCardV3CO from '../DSCardV3CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18809 - DSCardV3:: variant accented-disabled render and focus - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.variantAccentedDisabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the accented-disabled card in its collapsed state', async () => {
+      const card = await DSCardV3CO.getCardContainer();
+      await card.waitForDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+
+    it('02: should display the focus ring on the aria-disabled expand control - [TAB]', async () => {
+      await browser.keys(Key.Tab);
+      const expandContentButton = await DSCardV3CO.getExpandContentButton();
+      await expect(expandContentButton).toBeFocused();
+
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-card-v3/variant-disabled/DSCardV3.variant-disabled.axe-core.func.spec.js

@@ -16,7 +16,7 @@ if (
       const firstItem = await DSCardV3CO.getCardHeader();
       await firstItem.waitForDisplayed();
       const result = await axeCoreCheck();
-      expect(result.length).toBe(0);
+      await expect(result).toHaveLength(0);
     });
   });
 }

package/ds-card-v3/variant-disabled/DSCardV3.variant-disabled.func.spec.js

@@ -0,0 +1,61 @@
+import DSCardV3CO from '../DSCardV3CO';
+
+if (
+  (!browser.capabilities['ice:options'].isPhone &&
+    !browser.capabilities['ice:options'].isTablet &&
+    browser.capabilities.browserName === 'chrome') ||
+  browser.capabilities.browserName === 'Chrome'
+) {
+  describe('PUI-18810 - DSCardV3:: variant disabled cards non-interactive structure - Func', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.variantDisabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should render both disabled cards as divs without the HTML disabled attribute', async () => {
+      const disabledCard = await DSCardV3CO.getCardContainerByIndex(0);
+      await disabledCard.waitForDisplayed();
+      expect((await disabledCard.getTagName()).toLowerCase()).toBe('div');
+      expect(await disabledCard.getAttribute('disabled')).toBeNull();
+
+      const accentedDisabledCard = await DSCardV3CO.getCardContainerByIndex(1);
+      await expect(accentedDisabledCard).toBeDisplayed();
+      expect((await accentedDisabledCard.getTagName()).toLowerCase()).toBe('div');
+      expect(await accentedDisabledCard.getAttribute('disabled')).toBeNull();
+    });
+
+    it('02: should keep both cards visible to assistive technology', async () => {
+      const disabledCard = await DSCardV3CO.getCardContainerByIndex(0);
+      expect(await disabledCard.getAttribute('aria-hidden')).toBeNull();
+
+      const accentedDisabledCard = await DSCardV3CO.getCardContainerByIndex(1);
+      expect(await accentedDisabledCard.getAttribute('aria-hidden')).toBeNull();
+    });
+
+    it('03: should expose the title and description of both cards', async () => {
+      const firstHeading = await DSCardV3CO.getHByLevelAndIndex(3, 0);
+      await expect(firstHeading).toBeExisting();
+      await expect(firstHeading).toHaveText('Disabled Card');
+
+      const firstDescription = await DSCardV3CO.getElement(1);
+      await expect(firstDescription).toHaveText('Description card');
+
+      const secondHeading = await DSCardV3CO.getHByLevelAndIndex(3, 1);
+      await expect(secondHeading).toBeExisting();
+      await expect(secondHeading).toHaveText('Disabled Card');
+
+      const secondDescription = await DSCardV3CO.getElement(3);
+      await expect(secondDescription).toHaveText('Description card');
+    });
+
+    it('04: should contain no focusable controls in either card', async () => {
+      const disabledCard = await DSCardV3CO.getCardContainerByIndex(0);
+      const firstCardControls = await disabledCard.$$('button, a[href], input, select, textarea, [tabindex]');
+      expect(firstCardControls).toHaveLength(0);
+
+      const accentedDisabledCard = await DSCardV3CO.getCardContainerByIndex(1);
+      const secondCardControls = await accentedDisabledCard.$$('button, a[href], input, select, textarea, [tabindex]');
+      expect(secondCardControls).toHaveLength(0);
+    });
+  });
+}

package/ds-card-v3/variant-disabled/DSCardV3.variant-disabled.visual.spec.js

@@ -0,0 +1,20 @@
+import DSCardV3CO from '../DSCardV3CO';
+
+if (!browser.capabilities['ice:options'].isPhone && !browser.capabilities['ice:options'].isTablet) {
+  describe('PUI-18811 - DSCardV3:: variant disabled and accented-disabled render - Visual', () => {
+    before('loading page', async () => {
+      const errorOnGo = await DSCardV3CO.variantDisabledURL.go();
+      if (errorOnGo) throw errorOnGo;
+    });
+
+    it('01: should display the disabled and accented-disabled cards', async () => {
+      const disabledCard = await DSCardV3CO.getCardContainerByIndex(0);
+      await disabledCard.waitForDisplayed();
+      const accentedDisabledCard = await DSCardV3CO.getCardContainerByIndex(1);
+      await expect(accentedDisabledCard).toBeDisplayed();
+
+      const snapshot = await browser.percyCheckScreenshot();
+      await expect(snapshot).toEqual(0);
+    });
+  });
+}

package/ds-card-v3/{disabled/DSCardV3.disabled-non-interactive.func.spec.js → variant-disabled/DSCardV3.variantDisabled-non-interactive.func.spec.js}

@@ -9,7 +9,7 @@ if (
   // Tests for the fix introduced in PUI-17888 (disabled attribute on non-interactive card)
   describe('PUI-18598 - DSCardV3:: disabled variant has no HTML disabled attribute - Func', () => {
     before('loading page', async () => {
-      const errorOnGo = await DSCardV3CO.disabledURL.go();
+      const errorOnGo = await DSCardV3CO.variantDisabledURL.go();
       if (errorOnGo) throw errorOnGo;
     });
 

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);
     });
   });
 }