Bad decoding of html entities on screenshots

[Tolexia]

What is your Scenario?

My company has made several websites for one of our clients. We have various types of tests which work fine, but in this case, we want to run a "visual-only" daily test on these websites, which should mostly navigate on a url, resize window, scroll and take screenshots at each scrolling move.

The script works well, but we can see on screenshots some "bad encoded characters". I precise that I work in a french company with french clients, and that most of the displayed text is written by employees of my client in a back-office, on an interface including the text editor CKEditor (which is likely to add html entities and weird encoded characters). That is to say that website texts contain latin characters like accents, and some characters like quotes or tabs are sometimes rendered by html entities.

The problem is that it works well when a human visits the website (on any device and most navigators), because we handle text encoding/decoding on server side before display, but here the screenshots display a wrong behaviour.

I did not find any workaround in the documentation.

What is the Current behavior?

What is the Expected behavior?

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

https://www.ecole-blot.com/ https://www.concours-pompier.com/

What is your TestCafe test code?

import { Selector } from "testcafe" import { ClientFunction } from 'testcafe'; fixture ecole-blot.com .page ("https://www.ecole-blot.com/") ;

const resolutions = [ [375,667], [768,960], [1680,1050] ] const getBodyHeight = ClientFunction(() => { return document.body.clientHeight; }); const getScrollTop = ClientFunction(() => { return document.scrollingElement.scrollTop; }); const scrollBy = ClientFunction((height) => { window.scrollBy(0,height); });

test('Login', async t => { await t .resizeWindow(1680,1050) .wait(2000)

const cookieButton = await Selector('button').withText("Accepter").filterVisible();
if (cookieButton.exists) 
{
    await t
    .click(cookieButton)
}


for(let res of resolutions) {
	
	await t
	.resizeWindow(res[0],res[1])
	.wait(1000)
	.takeScreenshot({})
	let startpoint = 0;
	let pageHeight = await getBodyHeight();
	let realScrollTop = 0;
	while(!(startpoint >= pageHeight-res[1]))
	{
		await scrollBy(res[1]);
		startpoint += parseInt(res[1]);
		if(await getScrollTop() != realScrollTop)
		{
			realScrollTop = await getScrollTop();
			await t
			.wait(500)
			.takeScreenshot({});
		}
	}
	await scrollBy(-pageHeight);
}
    

});

Your complete configuration file

No config file

Your complete test report

{ "startTime": "2023-02-21T14:52:53.429Z", "endTime": "2023-02-21T14:54:09.765Z", "userAgents": [ "Chrome 110.0.5481.104 / Windows 10" ], "passed": 1, "total": 1, "skipped": 0, "fixtures": [ { "name": "ecole-blot.com", "path": "C:\Users\vm-be\Tests\659\ecole-blot\chrome\testcafe_659_chrome63f4da9ddb0a0.js", "meta": {}, "tests": [ { "name": "Login", "meta": {}, "errs": [], "durationMs": 75801, "unstable": false, "screenshotPath": "C:\Users\vm-be\Tests\659\ecole-blot\chrome\result\screenshots", "skipped": false } ] } ], "warnings": [] }

Screenshots

The part of the DOM displayed on the screenshot of the website "ecole-blot.com"

Steps to Reproduce

Copy/Paste the same script code I shared and you should reproduce the issue

TestCafe version

2.3.1

Node.js version

9.5.0

Command-line arguments

testcafe chrome, firefox test.js

Browser name(s) and version(s)

No response

Platform(s) and version(s)

Windows 10

Other

No response

[Tolexia]

Chrome Version : 110.0.5481.104 Firefox Version : 110.0

[Aleksey28]

Hi @Tolexia,

I managed to reproduce the issue. The problem isn't trivial, and I can't get you a fast solution. We will update this thread once we have any news.

[Tolexia]

Hi @Aleksey28 ,

It's been a while since last update, have you got any news about this issue ?

[Aleksey28]

Hi @Tolexia,

We don't have any updates yet. We are working on the Nativae Automation Mode that should help you in the future. Currently, it doesn't work correctly in your example.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had any activity for a long period. It will be closed and archived if no further activity occurs. However, we may return to this issue in the future. If it still affects you or you have any additional information regarding it, please leave a comment and we will keep it open.

[github-actions[bot]]

We're closing this issue after a prolonged period of inactivity. If it still affects you, please add a comment to this issue with up-to-date information. Thank you.