Cypress: cannot find Dropdown to click or open reliably

Radzen.Blazor Components
1

Hi
I have a RadzenDropDown on a Blazor page.

<RadzenDropDown TValue="string" data-cy="timezoneDropdown"
                    FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.Contains" AllowFiltering="true"
                    Data=@_zones @bind-Value="defaultTimeZoneId" TextProperty="DisplayName" ValueProperty="Id" Style="width: 500px" Change=@(args => OnChange(args, "DropDown with custom filter operator")) />

It renders the data fine and when I open it I can use the control as I would expect.

I am trying to add Cypress testing to my app. I haven't found any hits on the web to this but I can't be the first to try this. I want to automate the selection of a sequence of values from the dropdown. I have tried

cy.get("[data-cy=timezoneDropdown] > .ui-dropdown-label").click().type("{downarrow}{downarrow}{enter}");

and

cy.get("[data-cy=timezoneDropdown] > .ui-dropdown-trigger > .ui-dropdown-trigger-icon").type("{downarrow}");
//Click anywhere to apply the dropdown selection
      cy.get("h3").click();

It's not very reliable. It only selects the option about half the time.

Is there a better/best way to automate selection of a dropdown?

Thanks

2

Hi @davel,

I am 99.9% sure you are the first to try this :slight_smile:

I haven't used Cypress but I suspect this may be a timing issue. Clicking the trigger button and rendering the items does not happen in sequence (especially if you are using server-side blazor). Try adding some delay or wait for the clicked item to appear in the DOM (full disclosure I have no idea how this is done in Cypress).

3

It's nice to be at the cutting edge. :wink:

I am running on Server Side. Thanks for mentioning that as that is something for me to look at.

Can I ask how you test the components? Or anyone else reading this?

Thanks
Dave

4

We use unit testing which tests the actual code rather than interacting with the DOM.

A quick google search found the following which you can try: cypress - How to wait for an element to be visible? - Stack Overflow

5

Hi.
Thanks for that @korchev but it's not quite working for me. I think it's worth persevering as it should help others.
I'm wondering if I'm trying to click on the wrong css selector. Let's take an accordion item. I'm using

cy.get('#ui-accordiontab-0 > .ui-accordion-toggle-icon', timeout).click()

What is the click event bound to? Is this something that I can easily see (I've got a Server Side app)?

Thanks
Dave

6

The click handler is attached to the <a> element of the item

<div class="ui-accordion-header">
<a @onclick="@((args) => SelectItem(item))" >
7

Also just found this: https://github.com/cypress-io/cypress/issues/4635 and this: https://stackoverflow.com/questions/59135626/typing-text-in-blazor-input-fields-with-cypress-doesnt-work- It looks as if there are issues in Cypress with Blazor applications in general.