Cypress or Puppeteer: How to test page with a react select popup/popover?

Question

Request: Either with Cypress (preferably) or using extending Cypress with Puppeteer via cy.task(), being able to perform a test on a system-generated popup menu?

This popup menu element cannot be inspected by Chrome Devtools and is thereby not navigatable by either CSS selectors or XPath.

Details: I am using Cypress for UX testing and extend in limited cases with custom cy.task() with Puppeteer.

The web page under test has a dropdown selection that generates a popup menu, source is this npm module: npm react-select-async-paginate

Under inspections, the popup menu is generated from an and it has these two attributes:

• aria-haspopup="true"
• role="combobox"

Appreciate assistance, thank you

---

22 Feb, Updated

This is the generated react-select-async-paginate:

<div>
  <div class="***-singleValue">Offer Letter w/ Signature</div>
  <div class=" css-ackcql" data-value="">
    <input 
        id="react-select-2-input" 
        aria-autocomplete="list" 
        aria-expanded="false" 
        aria-haspopup="true"
        aria-controls="react-select-2-listbox" 
        aria-owns="react-select-2-listbox" 
        role="combobox">
  </div>
</div>

This is the attempt for selecting an option, but it does not loads selected option into <div class="***-singleValue">.

This Cypress script selects an option:

  cy.get(`${selectorReactSelectPaginate}`)
    .find('input[role="combobox"]')
    .focus()
    .type($valueSelect, { force: true })
    .then(() => {
      cy.wrap(true);
    });

As would able to validated using this Cypress script:

  cy.get(selectorReactSelectPaginate)
    .find('div[class*="-singleValue"]')
    .contains($valueSelectContains)
    .then(() => {
      cy.wrap(true);
    });

Answer 1

A neat trick with test runner is to add a .wait() after the dropdown selection appears. A snapshot of the DOM will be created and you can click on the .wait() to view the snapshot and use dev tools to inspect the dropdown selection.