Testcafe fails when using t.navigateTo() in latest chromium based browsers.

[Ilie-c]

What is your Scenario?

I am trying to create a test that contains an after each to clean the instance using t.navigateTo() or a test to go to an inexistent product in the swag labs testing site as a learning path.

The navigateTo() function will hang the test in chromium type browsers, forcing the test and runtime to fail.
If runned in firefox, the test will succeed without any issues.

What is the Current behavior?

Chromium browsers

Test run smoothly until it hits the t.navigateTo(url).
Testcafe navigates to the specified url however after that it hangs until the timeout is reached and it retries 2 more times, failing on all of them and the terminal returns:

\TestCafe> npm run test:firefox

> testcafephptravels@1.0.0 test:firefox
> testcafe edge ./tests -s takeOnFails=true

 Running tests in:
 - Microsoft Edge 122.0.0.0 / Windows 11

 checkout test
[percy] Percy is not running, disabling snapshots


 1/1 failed (6m 23s)
ERROR The Microsoft Edge 122.0.0.0 / Windows 11 browser disconnected. If you did not close the browser yourself, browser performance or network issues may be at fault.

Non-chromium browsers -> firefox

Test to run smoothly,
When it reaches the t.navigateTo(url) to perform it, see that it was succeeded and go to the next commands/method calls

What is the Expected behavior?

Test to run smoothly,
When it reaches the t.navigateTo(url) to perform it, see that it was succeeded and go to the next commands/method calls

What is the public URL of the test page? (attach your complete example)

https://www.saucedemo.com/

What is your TestCafe test code?

import { Selector } from 'testcafe';

//prettier-ignore
fixture.only `testcafe tests`
    .page`https://www.saucedemo.com/`
    .beforeEach(async(t) =>{
        await t.maximizeWindow();
    })
    .afterEach(async t =>{
        await t.navigateTo(`/inventory.html`) // or https://www.saucedemo.com/inventory.html
        await t.click(Selector('#react-burger-menu-btn'))
            .click(Selector('a#reset_sidebar_link'))
            .click(Selector('#shopping_cart_container'));
    });

test('login with valid credentials: username: standard_user ; password: secret_sauce', async t => {
    await t
        .typeText(Selector('#user-name'), 'standard_user')
        .typeText(Selector('#password'), 'secret_sauce')
        .click(Selector('#login-button'));
});

Your complete configuration file

{
"screenshots": {
"path":"./screenshots",
"pathPatternOnFails": "fails/${DATE}_${TIME}/${FIXTURE}.png"
}
}

Your complete test report

Screenshots

Steps to Reproduce

1. run : testcafe chrome ./tests -s takeOnFails=true // can also be with edge

TestCafe version

3.5.0

Node.js version

v20.9.0

Command-line arguments

testcafe chrome ./tests -s takeOnFails=true

Browser name(s) and version(s)

Edge & Chrome 122.0.0.0 ; Firefox 123.0

Platform(s) and version(s)

Windows 11 22H2 build: 22621.3155

Other

No response

[Bayheck]

Hello, I managed to reproduce the issue.

It is similar to the following issue and is caused by 'service worker': #8123.

As a workaround, you can run your test as follows:

import { Selector, Role } from 'testcafe';

const role = Role('https://www.saucedemo.com/', async t => {
await t
.typeText(Selector('[data-test="username"]'), 'standard_user')
.typeText(Selector('#password'), 'secret_sauce')
.click(Selector('#login-button'))

}, { "preserveurl": true});

fixtureMy fixture
.pagehttps://www.saucedemo.com/
.beforeEach(async t => {
const idConnection = t.testRun.browserConnection.id;
const cdpClient = t.testRun.browserConnection.getNativeAutomation(idConnection)._client;
await cdpClient.Network.setBypassServiceWorker({bypass: true})
await t.useRole(role);
});

test('test1', async t => {
await t.navigateTo(/inventory.html) // or https://www.saucedemo.com/inventory.html
await t.click(Selector('#react-burger-menu-btn'))
.click(Selector('a#reset_sidebar_link'))
.click(Selector('#shopping_cart_container'));
});

[Ilie-c]

Hello @Bayheck ,

Thank you for the response. The workaround with cpdClient did indeed work.