execution stucks!

[vasilyevi]

What is your Scenario?

n/a

What is the Current behavior?

1. execution stucks on await t.click(Selector("div > a[class][href*='best-vacation-packages'] div>img"));
2. it searchs element div > a[class][href*='best-vacation-packages'] div>img for too long, but is able to find it

What is the Expected behavior?

works fine with 3.4.0

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

n/a

What is your TestCafe test code?

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

fixtureA set of examples that illustrate how to use TestCafe API
.afterEach(async t => {
await t.takeScreenshot();
})

async function waitForEnabled(selector, timeout = 20000) {
await t
.expect(selector.hasAttribute("disabled"))
.notOk(element '${selector[Object.getOwnPropertySymbols(selector)[0]].fn}' is not enabled, {
timeout,
});
}

test('test', async t => {
await t.maximizeWindow();
await t.navigateTo("https://guidetoeurope.com/best-vacation-packages?dateFrom=2024-05-19&dateTo=2024-05-27&destinationId=6effc2e7-a07e-469b-ba50-d66c308557a7&destinationName=Podgorica%2C%20Montenegro&includeFlights=1&numberOfDays=9&numberOfStops=any&occupancies=1&originId=616de33c-c8cb-4670-9580-0e1aa56afb48&originName=London%2C%20England&originType=2&requestId=df6a0e28-aa31-4566-2035-224ec87165e0");
await t.click(Selector("div > a[class][href*='best-vacation-packages'] div>img"));
const asd = await Selector("h1[class]").textContent;
console.log(asd);
await waitForEnabled(Selector("[id='vp-booking-widget-form'] button"));
await t.click(Selector("[id='vp-booking-widget-form'] button"));
await t.click(Selector("input[id='cardNumber']"))
});

Your complete configuration file

module.exports = {
screenshots: {
path: "./artifacts/screenshots",
takeOnFails: true,
pathPattern: "${DATE}${TIME}/${TEST}/${FILE_INDEX}${QUARANTINE_ATTEMPT}.png",
thumbnails: false
},
disableMultipleWindows: true,
browsers: "chrome",
concurrency: 3,
skipJsErrors: true,
browserInitTimeout: 120000,
pageLoadTimeout: 60000,
pageRequestTimeout: 65000,
selectorTimeout: 20000,
testExecutionTimeout: 720000,
quarantineMode: false,
disableNativeAutomation: false
}

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

just run the code

TestCafe version

3.6.0

Node.js version

v18.19.1

Command-line arguments

yarn testcafe

Browser name(s) and version(s)

No response

Platform(s) and version(s)

No response

Other

No response

[vasilyevi]

@PavelMor25 please have a look, it's critical

[PavelMor25]

Hello @vasilyevi,

TestCafe runs tests on a page by intercepting responses with content-type: Document and injecting all necessary scripts into a document. TestCafe uses the Chrome DevTools Protocol (CDP) to achieve this.

Unfortunately, CDP methods cannot intercept or handle requests/responses that a service worker has already processed. As a result, after a reload or role initialization, TestCafe cannot inject the necessary scripts because service worker - partytown-sw.js - has processed the required request type.

For this reason, we added a getCurrentCDPSession method, which allows native automation users to examine and control the CDP connection between TestCafe and the browser. Use this method and the Network.setBypassServiceWorker method CDP in a beforeEach hook to avoid this behavior:

fixture`A set of examples that illustrate how to use TestCafe API`
.afterEach(async t => {
await t.takeScreenshot();
})
.beforeEach(async t => {
  const cdpClient = await t.getCurrentCDPSession();
  await cdpClient.Network.setBypassServiceWorker({bypass: true});
})

Let us know if this helps.

[vasilyevi]

It helps, could you also take a look at point 2?
it searchs element div > a[class][href*='best-vacation-packages'] div>img for too long, but is able to find it

[PavelMor25]

Hello @vasilyevi,

Try to make the selector more specific to improve the search for the element on the page. Also, you can add a reduced timeout to the selector. These recommendations should speed up your test:

// specific selector 
await t.click(Selector('#content .x-1spwbp4.et1glnj1').nth(1))

// timeout 
await t.click(Selector("a[class][href*='best-vacation-packages'] div>img", {timeout: 7000}));