REST requests don't resolve in the browser if the response's status code is 204

[liwanma]

What is your Test Scenario?

My project is a React SPA. I'm testing a form consisting of a password field and a submit button. When the submit button is clicked, I wait for a 204 response with an HTTPOnly cookie, then hide the form and show a table. If the cookie is already set when the page is loaded, the form is not shown.

What is the Current behavior?

Currently, the request hangs in the browser. In the network tab in devtools, the status is stuck on PENDING.

I created a custom request hook to see if I am actually getting a response. I am, but the client says the request is still pending.

Also, if I refresh the page while waiting for the request to resolve, the form is no longer shown (as if the request was in fact resolved and the cookie was set).

To further test my suspicions, I changed my API server to return a 200 status code (instead of 204) and the request resolved in the browser as expected.

What is the Expected behavior?

I expected the request to resolve in the browser.

What is your web application and your TestCafe test code?

Your complete test code (or attach your test files):

import { RequestHook, RequestLogger, Selector } from 'testcafe';

export class Hook extends RequestHook {
  constructor(requestFilterRules, responseEventConfigureOpts) {
    super(requestFilterRules, responseEventConfigureOpts);
  }
  async onRequest(event) {}

  async onResponse(event) {
    console.log(event);
  }
}

const hook = new Hook([/https?:\/\/localhost:3051\/api\/verify_password/]);
const logger = RequestLogger();

fixture`Getting Started`;

test.page(`http://localhost:3051`).requestHooks(logger, hook)(
  'Password Form',
  async (t) => {
    const passwordInput = Selector('input[data-testid="textfield-input"]');
    const submitBtn = Selector('button').withText('Submit');

    await t
      .expect(submitBtn.hasAttribute('disabled'))
      .ok()
      .typeText(passwordInput, 'asdf')
      .expect(submitBtn.hasAttribute('disabled'))
      .notOk()
      .click(submitBtn)
      .expect(Selector('table[data-testid="item-table"]').exists)
      .ok();
  },
);

Your complete test report:

 Running tests in:
 - Chrome 88.0.4324.192 / macOS 11.2.1

 Getting Started
 ✖ Password Form

   1) AssertionError: expected false to be truthy
      
      + expected - actual
      
      -false
      +undefined
      

      Browser: Chrome 88.0.4324.192 / macOS 11.2.1

         30 |      .typeText(passwordInput, 'asdf')
         31 |      .expect(submitBtn.hasAttribute('disabled'))
         32 |      .notOk()
         33 |      .click(submitBtn)
         34 |      .expect(Selector('table[data-testid="item-table"]').exists)
       > 35 |      .ok();
         36 |  },
         37 |);

Your Environment details:

• testcafe version: 1.11.0
• node.js version: 14.7.0
• command-line arguments: testcafe chrome -e test.js
• browser name and version: Chrome 88.0.4324.192
• platform and version: macOS 11.2.1
• other:

[github-actions]

Thank you for submitting this issue. We would love to assist you and diagnose it. However, we need a simple sample that we can easily run on our side in order to replicate the issue and research its cause. Without a sample, we are not able to figure out what's going on and why this issue occurs. We look forward to your response.

[liwanma]

email sent with sample

[felis2803]

We have received your email. We need some time to research the issue.

[felis2803]

@liwanma,
Can I add here the link to the repository with the test that you sent by email? This will make it easier for my colleagues to explore the issue.

[liwanma]

Can I add here the link to the repository with the test that you sent by email? This will make it easier for my colleagues to explore the issue.

Yes

[felis2803]

Example: https://github.com/liwanma/testcafe-6005

[miherlosev]

Hi @liwanma,

The https://github.com/liwanma/testcafe-6005 repository is not accessible right now. Could you please restore access to it?

[no-response]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.

[tipy01]

I had the same with a 204 response to a GET that have also a content-length header to 0

what is not recommended in rfc .

[VasilyStrelyaev]

Thank you for the additional information.

Since the original example posted by the issue author is no longer accessible, could you please share an example that reproduces the issue (include the test code and the tested page URL)?

[tipy01]

It is a backend issue in my case so I requested change in my backend.
Most people can not share their backend publicly.
Maybe the best thing you can do for this is to display an error in the console to explain what is wrong in the server responses rather than keeping the request in pending state, it would help to debug faster.

[VasilyStrelyaev]

I am glad that you were able to modify the backend to work around this issue. Unfortunately, we cannot research this issue further without an example, which we could run on our side to reproduce the problematic behavior.

[suryap666]

I have a similar issue.

Front-end: react.
Back-end: Flask API.

Test cafe has an issue with the Delete API call.

Steps to reproduce

1. Fill a form
2. Then delete the record, which should return 204 or 202.

After clicking the delete button, I can see the server has completed the delete request but in Chrome, it's not getting resolved while using TestCafe, it's working without the TestCafe server.

Note: I have changed the Delete API to use the 200 status code. It started working.

Delete request headers

The difference in header between 204 and 200 was content type and content length.

According to the standards, Content type is not mandatory: https://www.rfc-editor.org/rfc/rfc2616#section-7.2.1

[suryap666]

Server Log and Chrome Dev tools

Same Test code

test.only('can create and delete category', async () => {
  const categoryName = 'CT_' + randomGenerator.GetRandomNineDigit();
  await categorisationPage.CreateCategory(categoryName, [
    {
      color: LabelColor.Cyan,
      value: 'label_' + randomGenerator.GetRandomNineDigit()
    },
    {
      color: LabelColor.DodgerBlue,
      value: 'label_' + randomGenerator.GetRandomNineDigit()
    }
  ])

  await categorisationPage.DeleteCategory(categoryName);
});

Sample controller code

@controller.route("/categories/<category_id>", methods=["DELETE"])
def delete_categories(category_id):

    {statements}

    response = make_response('', 204) // this was return before test
    response.headers["Content-Type"] = "text/plain" // I added this to test
    response.headers["Content-Length"] = "0" // I add this to test
    return response

Note: we run the application using socket.io (socketio.run(app_name, host=app.config['FLASK_HOST']))

[PavelMor25]

Hello @suryap666,

Please create a separate ticket using this template.