TestCafe prepends assets in the DOM with Test IP

[Robdel12]

What is this?

Hey y'all! 👋

I'm an SDK + Support engineer for Percy.io. We're in the process of building an SDK for TestCafe 🎉 (It's released, but unannounced due to this issue)

One of the most common issues folks reach out to us about with our TestCafe SDK is missing assets in their snapshots. When we debug these snapshots in Percy, the assets always seem to get the test server IP (+ the pages host name sometimes) prepended in the DOM. This breaks snapshots in Percy because it's not a valid URL that can be reached by our browsers. For example, given this DOM:

<div class="hero-background " style="background-image: url(https://example.com/image.jpg)">
  // ....
</div>

TestCafe will change it to something like:

<div class="hero-background " style="background-image: url(http://192.168.86.25:64800/g0x3xLBGm/https://example.com/image.jpg)">
  // ....
</div>

Which is what we capture when taking a snapshot, and it breaks the page from rendering correctly.

Hopefully that explains what's going on well! My question is, how do we disable that test URL from being prepended to assets in the DOM? We need the unaltered path to the asset for Percy to work. Presumably TestCafe is prepending this because you're doing some proxy work within the test framework?

Super curious to hear how we can work around this :)

[helen-dikareva]

Hello, @Robdel12.
I'm happy to hear that you are interested in integration with TestCafe.

Indeed, TestCafe uses the URL rewriting proxy to monitor a page state and simulate user actions. All page's resources are proxied during test execution.

I inspected the scenario you provided and found out that likely, the issue is related to the fact that the Percy server cannot receive content by the proxied URL. It happens because it is running on the user's machine and is unavailable due to NAT. In this case, if the user's machine has a public IP address, it can be specified using the hostname option for TestCafe.

To solve the problem in a more general case, we need to load the resources specified via CSS directly from the source server. This is quite possible, because the pictures specified by the <img> tag with the src attribute are loaded in this way. However, most likely, the implementation will take a large amount of time and I can't provide you with any estimates at the moment on when the feature will be ready.

[mlukjanska]

Hei!

We are working on a POC with Percy/Testcafe and run into this issue.
So wanted to ask if there's any progress on this issue or maybe other workaround than specifying the hostname?
Like cleaning up the Testcafe URLs before capturing the percy snapshot?

[Robdel12]

Hey @mlukjanska (and anyone else that might come across this)! I've found this seems to work pretty well:

# macOS method for grabbing the local IP
percy exec -h `ipconfig getifaddr en0` -- testcafe

What this does is add your computers local ip to Percy's SDK additional hostname config. That will tell the Percy SDK to capture assets that come from your local IP (and not just the hostname of the URL you're testing)

[mlukjanska]

Hey @Robdel12,

Thanks for replying here and for my support request!
I was experimenting yesterday with your suggestion (and even tried to setup ngrok and then pass it's url as a hostname), but for some reason I am still not getting webapp images loaded in the Percy snapshots.
Is there some way to debug it further?
I presume that Percy is downloading all the assets during Testcafe session, meaning - it does not try to re-query those assets when I later (after Testcafe session is over) preview the snapshots in Percy, right?

[Updated 10-08-2020]
In our case some of the issues were due to the test environment being behind Google IAP and adding the Authorization header to the percy call helped to solve some of the images not being loaded:

      await percySnapshot(t, "Landing Page", {
        requestHeaders: {
          Authorization: `Bearer ${googleIapJWTAuthorizationToken}`
        }
      });

In order to debug the percy calls, as per @Robdel12 suggestion, I've set the LOG_LEVEL=debug which gave details on percy requests and helped to pinpoint issues.

Finally, it seems that the -h or --allowed-hosts parameter did not get picked up when running the command (at least for me):
percy exec -h <my PC ip address> -- testcafe chrome tests/e2e/test.js

But adding .percy.yml configuration file and then running the percy without any parameters solved the issue.

version: 1
agent:
  asset-discovery:
    allowed-hostnames:
      - <my PC ip address>

[miherlosev]

@Robdel12

We need the unaltered path to the asset for Percy to work

TestCafe has utility functions that allow getting original asset URLs on the client (browser) or server (node.js) side.
I see that your https://docs.percy.io/docs/testcafe help topic describes how to set up Percy so it can correctly retrieve assets.
Would you please confirm that your request is still relevant?

[no-response]

This issue was automatically closed because there was no response to our request for more information from the original author. Currently, we don't have enough information to take action. Please reach out to us if you find the necessary information and are able to share it. We are also eager to know if you resolved the issue on your own and can share your findings with everyone.