reactjs - Cypress tests on sapui5 webcomponents for react not clicking reliable on Combobox dropdowns - Stack Overflow

admin管理员组

文章数量:1026073

We are having massive issues with out Cypress component and E2E Tests. We have set up a SAPUI5 Webcomponents for react Application with the webcomponents in V1.

It is all related to the Combobox Component.

During the test runs the test runner can sometimes not successfully click on the Dropdown, sometimes it can not choose the correct option from the list.

The ComboBox is nested and being mapped multiple times (based on a react state):

<ComboBox
data-testid={"comboBox_" + index}
placeholder={"Select Condition"}
value={type === "number" ? getText(NumberToken[token]) : getText(StringToken[token])}
onChange={(e) => {
    handleComboBoxChange(index, e.target.value); //some react states being set via a passed through handler
}}>
<ComboBoxGroupItem
    text={getText("INCLUDE")}>
</ComboBoxGroupItem>

{type === "number" && numberTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}

{type === "string" && stringFilterTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}


   … and some similar exclude ComboBoxitems

</ComboBox>

The Testcode looks like this simplified one:

cy.get('[data-testid="comboBox_0"]')
.should('be.visible')
.should('not.be.disabled');

cy.get('[data-testid="comboBox_0"]').wait(300).openDropDownByClick();


cy.wait(1000);
cy.get('[data-testid="comboBox_0"]').clickDropdownMenuItemByText('less or equal to');

cy.wait(300);

cy.get('[data-testid="comboBox_0"]').should('have.value', 'less or equal to');

I really do not know where to start looking here. Sometimes it says that:

[ui5-responsive-popover][open], but never found it.

Sometimes it says it has display none.

And sometimes it does simply not set the Value.

Sometimes it works fine...

Thanks for any help that can be hinted.

We are having massive issues with out Cypress component and E2E Tests. We have set up a SAPUI5 Webcomponents for react Application with the webcomponents in V1.

It is all related to the Combobox Component.

During the test runs the test runner can sometimes not successfully click on the Dropdown, sometimes it can not choose the correct option from the list.

The ComboBox is nested and being mapped multiple times (based on a react state):

<ComboBox
data-testid={"comboBox_" + index}
placeholder={"Select Condition"}
value={type === "number" ? getText(NumberToken[token]) : getText(StringToken[token])}
onChange={(e) => {
    handleComboBoxChange(index, e.target.value); //some react states being set via a passed through handler
}}>
<ComboBoxGroupItem
    text={getText("INCLUDE")}>
</ComboBoxGroupItem>

{type === "number" && numberTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}

{type === "string" && stringFilterTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}


   … and some similar exclude ComboBoxitems

</ComboBox>

The Testcode looks like this simplified one:

cy.get('[data-testid="comboBox_0"]')
.should('be.visible')
.should('not.be.disabled');

cy.get('[data-testid="comboBox_0"]').wait(300).openDropDownByClick();


cy.wait(1000);
cy.get('[data-testid="comboBox_0"]').clickDropdownMenuItemByText('less or equal to');

cy.wait(300);

cy.get('[data-testid="comboBox_0"]').should('have.value', 'less or equal to');

I really do not know where to start looking here. Sometimes it says that:

[ui5-responsive-popover][open], but never found it.

Sometimes it says it has display none.

And sometimes it does simply not set the Value.

Sometimes it works fine...

Thanks for any help that can be hinted.

• reactjs
• combobox
• cypress
• sapui5

Share Improve this question Follow asked Nov 17, 2024 at 14:31 DashDash 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

One thing you might try is exchanging cy.wait() for increase of timeout on the next query.

The difference between waiting and timeout is that waiting always has a fixed period, but timeout can be increased substantially beyond the expected wait and it will stop waiting as soon as the query is satisfied.

Also see notes about Unnecessary Waiting

Anti-Pattern: Waiting for arbitrary time periods using cy.wait(Number).

Best Practice: Use route aliases or assertions to guard Cypress from proceeding until an explicit condition is met.

An example in your code is [ui5-responsive-popover] (the combobox list popup)

• using cy.intercept() to wait for the loading of the combobox list items, assuming they are loaded on demand from an API.

• using a guard to assert that the combobox list has been populated

  cy.get('ui5-li[accessible-role="Option"]').should('have.length.gt', 0)
  

We are having massive issues with out Cypress component and E2E Tests. We have set up a SAPUI5 Webcomponents for react Application with the webcomponents in V1.

It is all related to the Combobox Component.

During the test runs the test runner can sometimes not successfully click on the Dropdown, sometimes it can not choose the correct option from the list.

The ComboBox is nested and being mapped multiple times (based on a react state):

<ComboBox
data-testid={"comboBox_" + index}
placeholder={"Select Condition"}
value={type === "number" ? getText(NumberToken[token]) : getText(StringToken[token])}
onChange={(e) => {
    handleComboBoxChange(index, e.target.value); //some react states being set via a passed through handler
}}>
<ComboBoxGroupItem
    text={getText("INCLUDE")}>
</ComboBoxGroupItem>

{type === "number" && numberTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}

{type === "string" && stringFilterTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}


   … and some similar exclude ComboBoxitems

</ComboBox>

The Testcode looks like this simplified one:

cy.get('[data-testid="comboBox_0"]')
.should('be.visible')
.should('not.be.disabled');

cy.get('[data-testid="comboBox_0"]').wait(300).openDropDownByClick();


cy.wait(1000);
cy.get('[data-testid="comboBox_0"]').clickDropdownMenuItemByText('less or equal to');

cy.wait(300);

cy.get('[data-testid="comboBox_0"]').should('have.value', 'less or equal to');

I really do not know where to start looking here. Sometimes it says that:

[ui5-responsive-popover][open], but never found it.

Sometimes it says it has display none.

And sometimes it does simply not set the Value.

Sometimes it works fine...

Thanks for any help that can be hinted.

We are having massive issues with out Cypress component and E2E Tests. We have set up a SAPUI5 Webcomponents for react Application with the webcomponents in V1.

It is all related to the Combobox Component.

During the test runs the test runner can sometimes not successfully click on the Dropdown, sometimes it can not choose the correct option from the list.

The ComboBox is nested and being mapped multiple times (based on a react state):

<ComboBox
data-testid={"comboBox_" + index}
placeholder={"Select Condition"}
value={type === "number" ? getText(NumberToken[token]) : getText(StringToken[token])}
onChange={(e) => {
    handleComboBoxChange(index, e.target.value); //some react states being set via a passed through handler
}}>
<ComboBoxGroupItem
    text={getText("INCLUDE")}>
</ComboBoxGroupItem>

{type === "number" && numberTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}

{type === "string" && stringFilterTokenArrayInclude.map((token) => (
        <ComboBoxItem key={token}
                      text={getText(token)}>
        </ComboBoxItem>
))}


   … and some similar exclude ComboBoxitems

</ComboBox>

The Testcode looks like this simplified one:

cy.get('[data-testid="comboBox_0"]')
.should('be.visible')
.should('not.be.disabled');

cy.get('[data-testid="comboBox_0"]').wait(300).openDropDownByClick();


cy.wait(1000);
cy.get('[data-testid="comboBox_0"]').clickDropdownMenuItemByText('less or equal to');

cy.wait(300);

cy.get('[data-testid="comboBox_0"]').should('have.value', 'less or equal to');

I really do not know where to start looking here. Sometimes it says that:

[ui5-responsive-popover][open], but never found it.

Sometimes it says it has display none.

And sometimes it does simply not set the Value.

Sometimes it works fine...

Thanks for any help that can be hinted.

• reactjs
• combobox
• cypress
• sapui5

Share Improve this question Follow asked Nov 17, 2024 at 14:31 DashDash 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

One thing you might try is exchanging cy.wait() for increase of timeout on the next query.

The difference between waiting and timeout is that waiting always has a fixed period, but timeout can be increased substantially beyond the expected wait and it will stop waiting as soon as the query is satisfied.

Also see notes about Unnecessary Waiting

Anti-Pattern: Waiting for arbitrary time periods using cy.wait(Number).

Best Practice: Use route aliases or assertions to guard Cypress from proceeding until an explicit condition is met.

An example in your code is [ui5-responsive-popover] (the combobox list popup)

• using cy.intercept() to wait for the loading of the combobox list items, assuming they are loaded on demand from an API.

• using a guard to assert that the combobox list has been populated

  cy.get('ui5-li[accessible-role="Option"]').should('have.length.gt', 0)
  

本文标签：