srcset Proxying doesn't work with React

[helgenlechner]

What is your Scenario?

I'm trying to load responsive images with srcsets in an integration test for a React app.

What is the Current behavior?

Images cannot be loaded, because the proxying does not work correctly. The proxied URL is malformed.

What is the Expected behavior?

Images with srcsets can be loaded and rendered correctly.

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

Here's a minimal Sandbox where the behavior can be observed: https://codesandbox.io/s/srcset-proxying-test-58w6s7

The first image is rendered with a simple React app, that just renders the image with a srcset. The second image is just rendered in static HTML but has the same properties as the first image. In the preview, the image is visible twice, as expected:

When running the provided Testcafe script and test, the image rendered through React fails to load, and only the statically rendered image shows up:

(The image itself is different in the two screenshots because I'm using an sample image API.)

What is your TestCafe test code?

Test Runner Script: https://codesandbox.io/s/srcset-proxying-test-58w6s7?file=/test/runTest.js

Test Script: https://codesandbox.io/s/srcset-proxying-test-58w6s7?file=/test/imgTest.js

Your complete configuration file

None other than what is specified in the Sandbox.

Your complete test report

No response

Screenshots

No response

Steps to Reproduce

1. Run the Testcafe script that is provided in the Sandbox. I'm not sure if that is possible within the Sandox. You may have to paste the runTest.js and imgTest.js to local files.
2. The test will open the Sandbox and pause, showing one failed and one successfully loaded image.

TestCafe version

2.6.2

Node.js version

16.14.2

Command-line arguments

node ./test/runTest.js

Browser name(s) and version(s)

Chrome 116.0.5845.96

Platform(s) and version(s)

macOS 13.4.1

Other

I can't use Testcafe's new Native Automation because we run the tests in CI in Browserstack and in Chrome, Edge, Firefox and Safari.

[Aleksey28]

Hi @helgenlechner,

I didn't manage to reproduce the issue with the latest TestCafe version. Please update your TestCafe package.

[helgenlechner]

Hi @Aleksey28,

Thank you for taking a look. I have now updated to the latest version of TestCafe (3.3.0) and the issue still persists. I wonder how you got it to work? Are you using Native Automation? Like I stated in the original description, I can't use Native Automation, because we use remote browsers and also we need to test in Firefox and Safari.

[AlexKamaev]

@helgenlechner
I confirm that the issue still exists in non-Native Automation mode.

[gg-kialo]

I ran into the same issue and have opened a PR to fix: #2968

[github-actions]

Release v31.6.3 addresses this.