CODEWITHSUNDEEP
reactjstestingcypressreact-select
Nazariy Dmytryshyn
Nazariy Dmytryshyn

Reputation: 85

How to test react components on a site in Cypress E2E?

I have a project in which some components, such as dropdowns, are written in React. enter image description here In this case, I can't select an item from the dropdown because the DOM doesn't show what's in that dropdown.

<div class="Select__control css-1s2u09g-control"><div class="Select__value-container css-1d8n9bt"><div class="Select__placeholder css-14el2xx-placeholder" id="react-select-6-placeholder">Select...</div><input id="react-select-6-input" tabindex="0" inputmode="none" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" aria-readonly="true" aria-describedby="react-select-6-placeholder" class="css-1hac4vs-dummyInput" value=""></div><div class="Select__indicators css-1wy0on6"><div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span></span></div></div></div>

How to conduct E2E tests in this case? Can someone explain or share their experience? I did not find information on the Internet. thank you

I looked for this component in the source code, but there are no files with react in the project code, these components are in node_modules, and it is not clear how to access this dropdown

Upvotes: 2

Views: 593

Answers (1)

Fody
Fody

Reputation: 32034

This looks like the react-select control (judging by the classes).

This "hair-trigger" behavior makes it hard to find the options, the list disappears upon any mouse action.

The way I do it is

  • open the devtools

  • right-click the select, click inspect to find it in devtools

  • click the select on the page to open it, repeat a few times to open and close, watch the devtools

  • an element in devtools appears and disappears when menu is opened and closed. The element has format like this: <div id="react-select-6-listbox">, but the number in the id varies depending on how many selects are used on the page.

We now know the id of the options wrapper, so this is the test code:

cy.get('.Select__control')    
  .parent()                                    // the top-level of react-select
  .click()                                     // open the list

cy.get('[id^="react-select"][id$="listbox"]')  // the injected options wrapper
  .within(() => {
    cy.contains('5 - May').click()             // select an option        
  })

cy.get('.Select__control')   
  .find('.Select__placeholder')
  .should('contain', '5 - May')                // verify selected text

If the 5 - May text is unique on the page you can just select it after opening the dropdown, but using .within() on the wrapper is safer.

Upvotes: 2

Related Questions