Unable to retrieve ID of dropdown menu as the page reloads when I try to inspect elements

Question

Below is a screenshot of a webpage that I am trying to write a Cypress test for.

As you can see, I have managed to write "teladoc" into the input box, but I now need to click the dropdown menu to navigate to a different page.

I am not able to get the ID, etc. of the dropdown menu.

When I try to inspect the dropdown menu, the page reloads and the dropdown disappears.

Does someone know how I can inspect this? I tried through the cypress explorer too, but it reloads in that beforehand too.

Answer 1

Since the locator is not there, You can play around with Keypress. The idea is when you have typed and there is the suggested list, you can first press the down key and then enter key. This might result in flaky tests as you don't know how much time does it take for the suggested item to appear.

cy.get(selector).type('{downarrow}{enter}')

You can also directly use contains. If this works this way the tests won't be flaky. You can play around with the timeout value.

cy.contains('Teladoc Health Inc - United States', {timeout: 5000})
  .should('be.visible')
  .click()

Answer 2

Open the browser console and type this

setTimeout(() => { debugger; }, 5000)