diff --git a/components/select/src/multi-select-field/features/has_default_clear_text.feature b/components/select/src/multi-select-field/features/has_default_clear_text.feature
index 368887c0e4..b7bc5e161d 100644
--- a/components/select/src/multi-select-field/features/has_default_clear_text.feature
+++ b/components/select/src/multi-select-field/features/has_default_clear_text.feature
@@ -2,4 +2,5 @@ Feature: Clear text for the MultiSelectField
 
     Scenario: Rendering a clearable MultiSelectField
         Given a clearable MultiSelectField with selected option is rendered
+        When the clear button is hovered
         Then the clear text is visible
diff --git a/components/select/src/multi-select-field/features/has_default_clear_text/index.js b/components/select/src/multi-select-field/features/has_default_clear_text/index.js
index c166b76ca9..753f25815a 100644
--- a/components/select/src/multi-select-field/features/has_default_clear_text/index.js
+++ b/components/select/src/multi-select-field/features/has_default_clear_text/index.js
@@ -1,9 +1,16 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a clearable MultiSelectField with selected option is rendered', () => {
     cy.visitStory('MultiSelectField', 'With clearable and selected option')
 })
 
+When('the clear button is hovered', () => {
+    cy.get('[data-test="dhis2-uicore-multiselect-clear"]').trigger(
+        'mouseover',
+        'top'
+    )
+})
+
 Then('the clear text is visible', () => {
     cy.contains('Clear').should('be.visible')
 })
diff --git a/components/select/src/single-select-field/features/has_default_clear_text.feature b/components/select/src/single-select-field/features/has_default_clear_text.feature
index 30518cc930..d593f6368a 100644
--- a/components/select/src/single-select-field/features/has_default_clear_text.feature
+++ b/components/select/src/single-select-field/features/has_default_clear_text.feature
@@ -2,4 +2,5 @@ Feature: Clear text for the SingleSelectField
 
     Scenario: Rendering a clearable SingleSelectField
         Given a clearable SingleSelectField with selected option is rendered
+        When the clear button is hovered
         Then the clear text is visible
diff --git a/components/select/src/single-select-field/features/has_default_clear_text/index.js b/components/select/src/single-select-field/features/has_default_clear_text/index.js
index b5fb83fd06..52fe0661a1 100644
--- a/components/select/src/single-select-field/features/has_default_clear_text/index.js
+++ b/components/select/src/single-select-field/features/has_default_clear_text/index.js
@@ -1,9 +1,16 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps'
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps'
 
 Given('a clearable SingleSelectField with selected option is rendered', () => {
     cy.visitStory('SingleSelectField', 'With clearable and selected option')
 })
 
+When('the clear button is hovered', () => {
+    cy.get('[data-test="dhis2-uicore-singleselect-clear"]').trigger(
+        'mouseover',
+        'top'
+    )
+})
+
 Then('the clear text is visible', () => {
     cy.contains('Clear').should('be.visible')
 })