w2ui overlay is not rendered in cypress headless test

2
votes

Test passes in headed mode, but always fails in headless mode

I am trying to perform test on w2ui field of type "list"

Ideally when we click on this w2ui list element, drop down(overlay) is generated with the select options and then we select an option.

But while running test in headless mode, this drop down is not generated.

Code To reproduce the issue :-

Code for webpage:

Link to html code

Save the code provided in above link in file "test_webpage.html" . Place this html file in the directory where cypress.json is located.

Code of Cypress Test:

describe('W2UI List Test', function() {
      it('Click List Field', function() {
        cy.visit('test_webpage.html');
        cy.get('.w2ui-select').siblings('.w2ui-field-helper').should('be.visible').click();
        cy.wait(2000);
        cy.get('#w2ui-overlay tr[index=0]').should('be.visible').click();
    });
});

Test Fail ScreenShot

1
listtestingheadlesscypressw2ui

1 Answers

0
votes

Yes, there is a bug in Cypress currently where certain mouse events are not properly simulated when the Test Runner window is not the active window. This is being worked on here: https://github.com/cypress-io/cypress/issues/1909#issuecomment-395995180 , This is being worked on

In the meantime, you can change your test code to this, for example:

cy.get('.w2ui-select').siblings('.w2ui-field-helper').click()
cy.contains('Barack Obama').click()

Cypressautomatically checks for actionability before clicking, so no need for should('be.visible')