Page with link rel=prefetch hungs during test execution

[StanTheIV]

Are you requesting a feature or reporting a bug?

bug

What is the current behavior?

When I run the test in chrome (version 67.0.3396) some pages stop loading. The testwindow even gets unlocked and if you hardreset the page (CTRL + SHIFT + R) the test keeps going. When running it normaly it just gets stuck occasionally, but if you run the test in debug-mode (-d) the error occurs every time on two pages.
In Firefox, Safari and Edge the test passes.

What is the expected behavior?

The tests should run through and pass.

How would you reproduce the current behavior (if this is a bug)?

Run the test in debug mode and once you get to the second page just 'Resume' the test. The third page won't load completly.

Provide the test code and the tested page URL (if applicable)

Tested page URL: https://www.durchblicker.at/strom

Test code

import {ClientFunction, Selector} from 'testcafe';
import StromVerlauf from 'strom-model.js';

const getLocation = ClientFunction(() => document.location.href);
const strom = new StromVerlauf();
const baseurl = 'https://www.durchblicker.at/strom'

fixture `Strom`
	.page `${baseurl}`;

test('Genereller Ablauf V', async t => {
	await t
		.typeText(strom.landingPageNr, '6000', {replace: true})
		.click(strom.landingNextButton);

	await t
		.expect(getLocation()).eql(baseurl+'/vergleich/haushalt')
		.typeText(strom.haushaltPLZ, '1010')
		.click(strom.haushaltVSelector)
		.click(strom.haushaltUebernahmeJa)
		.click(strom.haushaltNextButton);

	await t
		.expect(getLocation()).eql(baseurl+'/vergleich/produkt')
		.click(strom.produktNextButton);
	
	await t
		.expect(getLocation()).contains(baseurl+'/vergleich/ergebnis#calcid')
		.click(strom.elWechselButton);

	await t
		.expect(getLocation()).contains(baseurl+'/vergleich/ergebnis/aktionen#txid')
		.click(strom.tarifNextButton);
	
	await t
		.expect(getLocation()).contains(baseurl+'/ausfuellen/haushalt#txid')
});

import { Selector } from 'testcafe';

export default class StromVerlauf {
    constructor () {
        this.landingPageNr = Selector('#strom-widget-kwh',{ visibilityCheck: true });
        this.landingNextButton = Selector('.js-widget-button');
        this.haushaltPLZ = Selector('#input_energie_haushalt_region',{ visibilityCheck: true });
        this.haushaltVSelector = Selector('input[name=energie_haushalt_stromfluss][value=true]',{ visibilityCheck: true });
        this.haushaltFSelector = Selector('input[name=energie_haushalt_stromfluss][value=false]',{ visibilityCheck: true });
        this.haushaltUebernahmeJa = Selector('input[name=energie_haushalt_netzvertrag][value=true]',{ visibilityCheck: true });
	this.haushaltUebernahmeNein = Selector('input[name=energie_haushalt_netzvertrag][value=false]',{ visibilityCheck: true });
        this.haushaltZInstalliertJa = Selector('input[name=energie_haushalt_zaehlerinstalliert][value=true]',{ visibilityCheck: 
        this.haushaltZInstalliertNein = Selector('input[name=energie_haushalt_zaehlerinstalliert][value=false]',{ visibilityCheck: true });
	this.haushaltNextButton = Selector('.continue').find('button');
	this.produktNextButton = Selector('.weiter',{ visibilityCheck: true });
	this.elWechselButton = Selector('.js-el-row-upper', { visibilityCheck: true }).find('button');
	this.tarifNextButton	 = Selector('.js-btn-abschluss');
    }
}

Specify your

• operating system: Windows 10 and Mac OS X 10.13.5
• testcafe version: 0.20.3
• node.js version: v8.10.0

Chrome Console Error

[miherlosev]

Hi @StanTheIV

I've reproduced the issue. I need an additional time to investigate the reason of the problem.

[waquner]

Hi,

I'm a colleague of @StanTheIV and quite new to TestCafe - so sorry for anything that's obvious anyway...

It seems to be a problem with prefetching. On the page prior the one that hangs, we use prefetch tags to cache the next page.

• If there's enough time on the previous page, Chrome prefetches the next page
• Chrome seems to use Accept: */* instead of text/html or similar there

Example:

{ host: 'x.x.x.x:61160',
  connection: 'keep-alive',
  purpose: 'prefetch',
  'user-agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36',
  accept: '*/*',
  referer: 'http://x.x.x.x:61160/xxxxxxxxx/https://durchblicker.at/strom/vergleich/ergebnis/aktionen',
  'accept-encoding': 'gzip, deflate',
  'accept-language': 'de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7' }

• isPage is then set to false @ testcafe-hammerhead/lib/request-pipeline/context.js
• HTML is proxied through without changes
• and so hammerhead.js & others are not injected
• for the real page request (now with Accept: text/html...) the cached content is used (so again without hammerhead)
• --> site crashes because hammerhead.js (and others) are missing but other proxied .js files refer to variables declared in hammerhead.js

Maybe you could determine if isPage should be true only using the response headers in case of Purpose: prefetch

Hope that helps!

[Farfurix]

I'm working on it

[AndreyBelym]

Hi @StanTheIV, I've just published [email protected] with the fix! Please, update your TestCafe installation, and feel free to reopen the issue if the problem isn't fixed in your environment.

[miherlosev]

Fixed in 94c4d6c

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or feature requests. For TestCafe API, usage and configuration inquiries, we recommend asking them on StackOverflow.