feat(cypress-commands): add clearUi5Input to cypress commands (#4980)

Author: AndrianStoikov

packages/cypress-commands/src/commands.ts

@@ -9,6 +9,12 @@ declare global {
        * @example cy.get('[ui5-input]').typeIntoUi5Input('Hello World');
        */
       typeIntoUi5Input(text: string, options?: Partial<TypeOptions>): Chainable<Element>;
+      /**
+       * Clears a value from ui5-webcomponent that offers a typeable input field.
+       *
+       * @example cy.get('[ui5-input]').clearUi5Input();
+       */
+      clearUi5Input(options?: Partial<ClearOptions>): Chainable<Element>;
       /**
        * Types a value with a delay into an ui5-webcomponent that offers a typeable input field.
        *
@@ -69,6 +75,12 @@ Cypress.Commands.add('typeIntoUi5Input', { prevSubject: 'element' }, (subject, t
     .type(text, { force: true, ...options });
 });
 
+Cypress.Commands.add('clearUi5Input', { prevSubject: 'element' }, (subject, text, options = {}) => {
+  cy.wrap(subject)
+    .findShadowInput()
+    .clear({ force: true, ...options });
+});
+
 Cypress.Commands.add(
   'typeIntoUi5InputWithDelay',
   { prevSubject: 'element' },

packages/cypress-commands/test/UI5WebComponentsChild.cy.tsx

@@ -67,6 +67,12 @@ describe('UI5 Web Components - Child Commands', () => {
     cy.findByTestId('input').should('have.attr', 'value', 'Hello World!');
   });
 
+  it('clearUi5Input', () => {
+    cy.mount(<Input data-testId={'input'} value="Hello World" />);
+    cy.findByTestId('input').clearUi5Input();
+    cy.findByTestId('input').should('have.attr', 'value', '');
+  });
+
   it('typeIntoUi5TextArea', () => {
     cy.mount(<TextArea data-testId="textArea" />);