SAP / ui5-webcomponents-react

A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
https://sap.github.io/ui5-webcomponents-react/
Apache License 2.0
426 stars 94 forks source link

[Textarea]: Not able to enter text with cypress in tests #5784

Closed Nils-Schiwek closed 2 months ago

Nils-Schiwek commented 2 months ago

Describe the bug

Using cypress to enter text into a textarea with type does not work:

cy.get('[ui5-textarea]').type('All your base are belong to us');

This will not add

Isolated Example

https://stackblitz.com/edit/github-qui6u6-6xgbuv?file=src%2FApp.cy.tsx

Reproduction steps

  1. Add a textarea anywhere
  2. use cypress cy.get to get textarea and .type to add text to it - you can observe this in cypress open
  3. validate there really is the expected text in the textarea AND it is available to cypress. Either by using cy.get(textarea).should('have.value', newText) or some other code. ...

Expected Behaviour

cy.get(textarea).type(newText) should enter text in the textarea. cy.get(textarea).should('have.value', newText) should be able to read / confirm that text.

Screenshots or Videos

No response

UI5 Web Components for React Version

1.28.0

UI5 Web Components Version

did not check

Browser

Edge

Operating System

No response

Additional Context

No response

Relevant log output

No response

Organization

No response

Declaration

Lukas742 commented 2 months ago

Hi @Nils-Schiwek

this is the expected behavior since .type has to be chained to a typeable element which <ui5-textarea ... is not. You either have to query the shadow root for the actual input (in this case textarea), or use the typeIntoUi5TextArea custom command of our cypress-commands package.