404 when using enableJavaScript

[mattdell]

Bit of a strange one, but have two URL's where the same code is deployed. One just happens to be behind a proxy.

For example

• https://www.mysite.com (behind proxy)
• https://front-end.mysite.com (just the front-end application)

This code works just fine on the front-end application, but returns a 404 when I run it on the proxy URL.

  percySnapshot(name, {
    enableJavaScript: true,
    widths: [375, 414, 768, 1024, 1280],
  })

It only works when I remove the enableJavaScript flag

  percySnapshot(name, {
    widths: [375, 414, 768, 1024, 1280],
  })

This is what appears in my Percy test run, have to hide the URL's unfortunately.

It's most peculiar and I don't know where to start with this. Do any of the maintainers have any insight?

I'm using these packages:

"@percy/cli": "1.0.0-beta.50",
"@percy/storybook": "3.3.1",  <-- not being used in this scenario
"@percy/webdriverio": "2.0.0",

[Robdel12]

Hey @mattdell! Is there a reason you're enabling JS?

Percy works by capturing a snapshot of the DOM state & the assets needed to rerender the site. From there its sent to the API to rerender & capture screenshots concurrently across widths/browsers. Enabling JS usually has bad side effects like this. It's likely the JS on the page is detecting a logged out state and forcing a redirect or something like that.

[mattdell]

Hey @Robdel12, thanks for the quick reply!

The reason I have enabled JavaScript is because we have an adaptive website that adjusts markup for mobile / desktop devices, which requires JavaScript (React) to detect the render. Without enabling JavaScript my desktop and tablet snapshots are simply stretched out mobile versions.

These are simple landing pages, I can't see any obvious reason for them redirecting.

[Robdel12]

No problem! That makes sense -- you'll want to resize the test browser the right size before capturing the snapshot: https://webdriver.io/docs/api/browser/setWindowSize/ This will make it so the DOM captured matches the width -- the downside of this is the API/UI currently doesn't support capturing multiple DOM snapshots to a single snapshot name (yet!). You'll have to do something like this (untested code):

// in a test
let width = 375;
await browser.setWindowSize(width, 1024);
await percySnapshot(browser, `Snapshot name - ${width}`, { widths: [width] });

This will make it so each snapshot name is unique & also have the correct captured DOM state. You can wrap over the percySnapshot function to do this each time, if you wanted to. We'll have a first class version this in the SDKs once the API & UI support it. 😀

[mattdell]

I've decided to just target the proxy version since that seems to work. Thanks for the help!