Cannot Login to Angular App that uses Angular 13 ERROR TypeError: Cannot read properties of undefined (reading 'digest')

What is your Scenario?

We upgraded to angular 13 from angular 9 and we are no longer able to reach our login page.

What is the Current behavior?

An error is displayed in the console just trying to login //console error = hammerhead.js:15
// ERROR TypeError: Cannot read properties of undefined (reading ‘digest’) // at JwtWindowCryptoService.calcHash (vendor.js:221136:74) // at JwtWindowCryptoService.generateCodeChallenge (vendor.js:221123:17) // at UrlService.createUrlCodeFlowAuthorize (vendor.js:222609:40) // at UrlService.getAuthorizeUrl (vendor.js:222295:19) // at SafeSubscriber._next (vendor.js:226686:23) // at SafeSubscriber.__tryOrUnsub (vendor.js:64444:16) // at SafeSubscriber.next (vendor.js:64383:22) // at Subscriber._next (vendor.js:64333:26) // at Subscriber.next (vendor.js:64310:18) // at Observable._subscribe (vendor.js:69185:20)

What is the Expected behavior?

To be able to get to the login page

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

https://testcafe.fleetcommand.biz/

What is your TestCafe test code?

import { Selector } from “testcafe”;

fixtureHome Test .pagetestcafe.fleetcommand.biz;

test(‘Can I Login’, async controller => {

const button = Selector('button').withText('Login');
await controller 
.typeText('#Username', 'user')
.typeText('#Password', 'password')
.click(button);

Your complete configuration file

{ “browsers”: “edge”, “concurrency”: 1, “skipJsErrors”: true, }

Your complete test report

//console error = hammerhead.js:15
// ERROR TypeError: Cannot read properties of undefined (reading ‘digest’) // at JwtWindowCryptoService.calcHash (vendor.js:221136:74) // at JwtWindowCryptoService.generateCodeChallenge (vendor.js:221123:17) // at UrlService.createUrlCodeFlowAuthorize (vendor.js:222609:40) // at UrlService.getAuthorizeUrl (vendor.js:222295:19) // at SafeSubscriber._next (vendor.js:226686:23) // at SafeSubscriber.__tryOrUnsub (vendor.js:64444:16) // at SafeSubscriber.next (vendor.js:64383:22) // at Subscriber._next (vendor.js:64333:26) // at Subscriber.next (vendor.js:64310:18) // at Observable._subscribe (vendor.js:69185:20)

× Can I Login

1. The specified selector does not match any element in the DOM tree.

   | Selector(‘#Username’)

   Browser: Microsoft Edge 99.0.1150.39 / Windows 10

   5 |
   6 |test('Can I Login', async controller => {
   7 |
   8 |    const button = Selector('button').withText('Login');
   9 |    await controller
   

   10 | .typeText(‘#Username’, ‘Username’) 11 | .typeText(‘#Password’, ‘Password’) 12 | .click(button); 13 |//console error = hammerhead.js:15
   14 | // ERROR TypeError: Cannot read properties of undefined (reading ‘digest’) 15 | // at JwtWindowCryptoService.calcHash (vendor.js:221136:74)

   at <anonymous> (D:\Git\TestCafeTools\tests\pagetests\Angular13-Tests.ts:10:6) at <anonymous> (D:\Git\TestCafeTools\tests\pagetests\Angular13-Tests.ts:8:71) at __awaiter (D:\Git\TestCafeTools\tests\pagetests\Angular13-Tests.ts:4:12) at <anonymous> (D:\Git\TestCafeTools\tests\pagetests\Angular13-Tests.ts:6:40)

Screenshots

No response

Steps to Reproduce

1. Run the test script that will
2. Navigate to the site
3. Enter username
4. Enter password
5. Click login button

TestCafe version

1.18.4

Node.js version

16.14.0

Command-line arguments

testcafe .\tests\pagetests\Angular13-Tests.ts

Browser name(s) and version(s)

edge

Platform(s) and version(s)

Window 10

Other

Ill be sending the user name and password to the email stated above

[jenaewhitmore]

I have news on this issue. It happens because some features of the browser don’t work correctly without a secure connection but Testcafe starts testing with HTTP by default. To make this work, it is necessary to use the SSL option. The easiest way is illustrated in this example.

I don’t understand what I need to do to be able to run the tests locally and in the CI using the illustration

Oh wait I see, I have to create my own node.js application. Did you try this and it worked? Ill try now.

Ok, I tried and it does work, Its a heavy way to do things now since we run tests by folder using the CLI. It means Ill have to create a server instance for each folder set we want to run in the CI,

Not as bad as I thought after implementing I just added a parameter to the node argument. For those with the same issue I did this:

1. Created a custom test cafe server instance. Created the testCafeRunner.ts file with the following code and added it to the base of the folder (make sure to install the selfsigned package with npm as a dev or main dependency)

 (async () => {
    const createTestCafe        = require('testcafe');
    const selfSignedSertificate = require('openssl-self-signed-certificate');

    const sslOptions = {
        key:  selfSignedSertificate.key,
        cert: selfSignedSertificate.cert,
    };

    const testCafeOptions = {
        hostname: 'localhost',
        port1:    1337,
        port2:    1338,
        sslOptions,
    };

    const testcafe = await createTestCafe(testCafeOptions);
    const tests = process.argv.slice(2)[0];

    await testcafe.createRunner()
        .src(tests)
        .run();

    await testcafe.close();
})();

1. To run the tests I use the following command
2. node testCafeRunner.ts pathToTests

[Aleksey28]

Looks good. Well done.