Dropdown list - different behaviors in firefox headed or headless mode

[lucoelho]

Current behavior

Whenever there are dropdown lists in my project the test always Fail if if I run the test in firefox (v106) headless mode but works well in firefox in headed modem. This test works well in chrome and edge.

Desired behavior

The test must also work in firefox headless mode.

Test code to reproduce

cy.get('[data-testid="address2-input"]').type('Av. Cónego Urbano Duarte, 36');
  cy.get('[id="country"]').click().wait(500).find('.combobox__menu')
    .contains('Portugal')
    .click();
  cy.get('[id="timeZoneID"]').click().wait(500).find('.combobox__menu')
    .contains('Europe/Lisbon')
    .click();

Cypress Version

v11.0.1

Node version

v18.12.1

Operating System

windows 10

Debug Logs

No response

Other

No response

[ryanthemanuel]

Hi @lucoelho. Thank you for logging an issue. What is the html for the combo box that you are using? Is it a standard select or something more custom?

[lucoelho]

It's something more custom. This is a react app and this is the html of one combobox:

[ryanthemanuel]

Hi @lucoelho. Thanks for the additional information. Is that component an open source component that I can use myself or is it proprietary? When this issue occurs, do you see any errors in the developer tool console?

[lucoelho]

Hi @ryanthemanuel I can't gives our component to test but you found in that page "https://react-select.com/home" a similar component that have the same behaviour:

Test code to reproduce:

` describe('test spec', () => { it('react-select home page', () => { cy.visit('https://react-select.com/home') })

it('select Yellow', () => { cy.get('.selectcontrol').first().click(); cy.get('.selectmenu').contains('Yellow').click(); }) }) `

executed command: cypress run --headless --browser firefox --spec "cypress/e2e/spec.cy.js"

[abhi1693]

I too have the exact problem with Firefox v107. For me, it happens whenever a toaster is triggered on the UI. The package can downloaded from https://www.npmjs.com/package/react-toastify

[ryanthemanuel]

Thank you so much for the example @lucoelho. I can verify that this fails on my machine and will route this to the e2e team for further investigation/work.

Code to reproduce is:

describe('test spec', () => {
  it('select Yellow', () => {
    cy.visit('https://react-select.com/home')
    cy.get('.select__control').first().click();
    cy.get('.select__menu').contains('Yellow').click();
  })
})

Note that this works on firefox 101, but it does not work on firefox 107.

[johan1505]

did anyone find a workaround for this issue?

[abhi1693]

Either downgrade to a known working version of Firefox or skip tests run in the latest version until this is fixed

[lucoelho]

I tested it with the new firefox version 108 and it works well, in cypress version 11.0.1 and also with the latest cypress version 12.2.0