Is being covered by another element Cypress

Question

Timed out retrying: cy.select() failed because this element:

<select aria-describedby="searchDropdownDescription" class="nav-search-dropdown searchSelect" data-nav-digest="Xa0GQ+pPQ/tdsV+GmRWeXB8PUD0=" data-nav-selected="0" id="searchDropdownBox" name="url" style="display: block;" tabindex="0" title="Search in">...</select>

is being covered by another element:

<input type="text" id="twotabsearchtextbox" value="" name="field-keywords" autocomplete="off" placeholder="" class="nav-input" dir="auto" tabindex="0" aria-label="Search">

Fix this problem, or use {force: true} to disable error checking. My code:

describe('Amazon test', function()
{
    it('Matching book', function()
    {
        cy.visit("https://amazon.com")
        cy.title().should('eq',"Amazon.com: Online Shopping for Electronics, Apparel, Computers, Books, DVDs & more")
        cy.get('#twotabsearchtextbox').click({force: true}).get('#searchDropdownBox').select('Books')
        
    })
  })

How can I resolve it?

Answer 1

Try this:

cy.get('#twotabsearchtextbox').click().get('#searchDropdownBox').select('Books',{force: true})

Answer 2

You want to click the <select> tag. But Cypress mocks a real person. A real person cannot click the <select> in a real browser, because <select> is covered by <input>.

So I think you may need to debug your page code firstly.

Reminder, the partial cover also will trigger this issue.