testcafe: ERR:EMPTY_RESPONSE for XHR requests on first try

What is your Test Scenario?

Automation script fills in a form and clicks on submit. After the page has been submitted it’ll route to the next page. The script runs an assertion to see if it’s being redirected to the next step.

What is the Current behavior?

It clicks the button but doesn’t actually send out a request. I get an ERR:EMPTY_RESPONSE. I’m using the debugOnFail flag which leaves the test window open. When I unlock the page and click the same button manually it does fire the real request (without failure). I (and my colleagues as well) NEVER get this error when we’re doing some manual tests. It only happens when running my tests in Testcafe. The same bug is happening across multiple browsers.

I also tried all the solutions Google gave me forERR:EMPTY_RESPONSE (like flushing DNS) however the same error still persists and it only occurs when running Testcafe. I checked the server access logs and the request isn’t in there, somehow it gets blocked.

I’ve made a really hacky workaround which does work but I don’t want to wrap all my assertions with this.

await t
    .typeText(PatientModel.bsn, patient.bsn)
    .click(PatientModel.setGender(patient.gender))
    .typeText(PatientModel.initials, patient.initials)
    .typeText(PatientModel.insertion, patient.insertion)
    .typeText(PatientModel.last_name, getTesterLastName())
    .typeText(PatientModel.street, patient.street)
    .typeText(PatientModel.house_nr, patient.house_nr)
    .typeText(PatientModel.house_nr_addition, patient.house_nr_addition)
    .typeText(PatientModel.postal_code, patient.postal_code)
    .typeText(PatientModel.city, patient.city)
    .typeText(PatientModel.tel, patient.tel)
    .typeText(PatientModel.tel2, patient.tel2)
    .click(PatientModel.birthday)
    .click(PatientModel.setBirthday(patient.date_of_birth))
    .click(PatientModel.insurer)
    .click(PatientModel.setInsurer(patient.insurer))
    .typeText(PatientModel.insurance_nr, patient.insurance_nr)
    .typeText(PatientModel.pharmacy_name, patient.pharmacy_name)
    .typeText(PatientModel.pharmacy_city, patient.pharmacy_city)
    .typeText(PatientModel.comments, patient.comments)
    .click(PatientModel.submit);

  const notification = await GeneralModel.notification.innerText;

  if (notification === "Added successfully ") {
    await t
      .expect(getCurrentRoute())
      .contains("/patients")
      .expect(PatientOverview.testUserRow.exists)
      .ok();
  } else {
    // retry once
    await t
      .click(PatientModel.submit) // now it actually does the REAL submit
      .expect(GeneralModel.notification.innerText)
      .contains("Added successfully", { timeout: 6000 });
  }

What is the Expected behavior?

It should click the button and do the request on the first try

Your Environment details:

• testcafe version: 1.8.7
• node.js version: 14.4.0
• command-line arguments:

{
  "browsers": ["chrome --auto-open-devtools-for-tabs"],
  "debugOnFail": true,
  "developmentMode": true,
  "disablePageCaching": true,
  "quarantineMode": false,
  "takeOnFails": true
}

• browser name and version: Chrome 83.0.4103.116 /
• platform and version: macOS 10.15.5