I'm testing an Angular application with Cypress 10.4. There's a test that fails only with Firefox headless because an element that should contain a calculated sum isn't updated. Sums are calculated and updated correctly with Chrome headed/headless and Firefox headed.

The workflow that works is the following:

1. Type a number to #Expense_meter_start
2. When #Expense_meter_start loses focus (blur event) a POST request is made and the sum is updated in UI
3. Type a number to #Expense_meter_start
4. When #Expense_meter_start loses focus a POST request is made and the sum is updated in UI
5. The element containing the sum can be asserted

When I run "cypress open" and run the test with Firefox test passes. I can see the POST requests made when the elements lose focus.

Problem: When I run "cypress run --browser firefox" the test fails each time. The sum is not what is expected. What I tried: -I took screenshots and validated that the sum is indeed not updated even if the fields have values correctly. -I created an intercept for the POST API calls. The calls are not happening with "cypress run --browser firefox". But the same calls are happening when using "cypress open".

    describe("Fails on headless Firefox", () => {
  it("tests blur events", () => {
    cy.visit("/");
    cy.intercept({ method: 'GET', url: '**/api/invoiceCalls/*' }).as("invoiceCalls");

    // Click to create new Invoice
    cy.contains("New invoice").click();

    // Save on dialog
    cy.get('.--primary > .button-container > .button-text').click();
    cy.wait("@invoiceCalls");

    // Type start amount
    cy.get("#Expense_meter_start").click().clear().type("200000"); // When this element loses focus aka blur event happens, POST call should happen

    // Type end amount
    cy.get("#Expense_meter_end").click().clear().type("200050"); // When this element loses focus aka blur event happens, POST call should happen

    // Type explanation of driving route
    cy.get("#Travel_expense_route").click().clear().type("Koti-Lentokenttä");

    // Check that sum is calculated
    cy.get("#Sum").should('have.text','50');

    // Click Save
    cy.get('#Save').click();

});

CodePudding user response：

A couple of suggestions, Cypress has a .blur() command

// When this element loses focus aka blur event happens, POST call should happen
cy.get("#Expense_meter_start")
  .click()
  .clear()
  .type("200000")
  .blur()              // explicitly blur this element

or use {enter}

// When this element loses focus aka blur event happens, POST call should happen
cy.get("#Expense_meter_start")
  .click()
  .clear()
  .type("200000{enter}")     // blur this element with enter key