XMLHttpRequest Content-Type header is not set in native-automation mode in Angular application

[di5ko]

What is your Scenario?

After updating Testcafe to the latest version, I have a failing test when running it with the --native-automation flag. Without the flag, the test passes.

The assertion checks for a warning alert ("Bad username/password") to pop up inside our authentication modal. The div containing the alert shows up directly after pressing the submit button and is visible for about 3 seconds before disappearing again.

Edit: I have also found that the next test (valid login) is failing; when entering a valid username and password in the input fields and clicking the submit button, the application returns that no username and password are provided while I can see them being typed in. It's an error/alert I can't reproduce manually.

Furthermore, I have found that screenshots made when using a test runner are all empty (white), but if I run the test manually from the command line I do get proper screenshots. All in all, 2.5.x seems really buggy for me, so I am reverting the upgrade for now.

What is the Current behavior?

Test failing when running it with the --native-automation flag.

What is the Expected behavior?

Test passing.

What is your public website URL? (or attach your complete example)

Not public/cannot share.

What is your TestCafe test code?

        await auth.signIn(Config.testUserOneLogin, "BadPassword");

        await t
            .expect(auth.wrongCredentialsAlert.exists)
            .ok()
            .expect(ui.testUserAvatar.exists)
            .notOk({ timeout: 500 })
            .expect(auth.signInModal.exists)
            .ok();

Your complete configuration file

{ 
    "assertionTimeout": 10000,
    "pageLoadTimeout": 8000,
    "selectorTimeout": 5000,
    "skipJsErrors": {
        "stack": "/vendor.*/",
        "message": "/.*_satellite.*/ig"
    }
}

Your complete test report

- Error in Role initializer -
AssertionError: expected false to be truthy

Browser: Chrome 112.0.0.0 / Windows 11
Screenshot: C:\Users\di5ko\git\e2e-testing\screenshots\2023-04-20_10-48-53\test-1\Chrome_112.0.0.0_Windows_11\errors\1.png

37 |
38 |        await auth.signIn(Config.testUserOneLogin, "BadPassword"); // Fills in a username and (bad) password in 2 input fields, clicks submit
39 |
40 |        await t
41 |            .expect(auth.wrongCredentialsAlert.exists) // Checks for the bad username/password message div that shows up for about 3 seconds
> 42 |            .ok()
43 |            .expect(ui.testUserAvatar.exists)
44 |            .notOk({ timeout: 500 })
45 |            .expect(auth.signInModal.exists)
46 |            .ok();
47 |

at <anonymous> (C:\Users\di5ko\git\e2e-testing\tests\helpers\roles.js:42:14)
at asyncGeneratorStep (C:\Users\di5ko\git\e2e-testing\tests\helpers\roles.js:4:33)
at _next (C:\Users\di5ko\git\e2e-testing\tests\helpers\roles.js:4:33)

Screenshots

(screenshot 2 is darker because of browser debugger mode, so I could get the alert message to stay on screen long enough to take a screenshot)

Steps to Reproduce

1. Run test with --native-automation flag, get failing test
2. Run test without --native-automation flag, get passing test

TestCafe version

2.5.1-rc.1

Node.js version

v18.14.2

Command-line arguments

testcafe chrome .\tests\01-ui-and-authentication\ --hostname localhost -s takeOnFails=true --debug-on-fail --native-automation

Browser name(s) and version(s)

Chrome 112.0.0.0

Platform(s) and version(s)

Windows 11

Other

No response

[AlexKamaev]

Thank you for reaching out to us. We would like to help you diagnose the cause of the issue. However, we need a simple sample that we can easily run on our side in order to replicate the issue. I know that you mentioned you couldn't share your project, but perhaps you can send it privately to support@devexpress.com.

[di5ko]

Hi @AlexKamaev, I have mailed and shared a working example privately.
Thanks for taking the time.

[AlexKamaev]

@di5ko I managed to reproduce the issue. Thank you for your cooperation.

[Artem-Babich]

I was able to reproduce the issue in a simple Angular project. It is related to the interaction between the HttpClient of Angular and the chrome-devtools-protocol library. Request headers are not set correctly. This leads to incorrect data definition in the payload. We will investigate this issue and update this ticket as soon as we have any results.
sample.zip

[miherlosev]

Duplicate of #7664