percy / percy-cypress

Visual testing with Cypress and Percy
https://percy.io
MIT License
340 stars 41 forks source link

Percy doesn't show SVG in firefox #223

Closed tiagogoes closed 4 years ago

tiagogoes commented 4 years ago

Hello, In this build SVGs is displaying successfully on Chrome but in Firefox isn't. I've been set .percy.jsonas:

{
    "version": 1,
    "snapshot": {
      "widths": [375, 1280],
      "enable-javascript": true
    },
    "agent": {
      "asset-discovery": {
        "allowed-hostnames": [
          "proxyme.percy.io",
          "render.percy.local"
        ],
        "network-idle-timeout": 50,
        "page-pool-size-min": 5,
        "page-pool-size-max": 20
      }
    }
  }

Chrome: image

Firefox: image

In this gif is possible to see cypress execution that loads svgs:

ezgif com-video-to-gif

Robdel12 commented 4 years ago

Hey @tiagogoes! There's a few things to unpack here in the config you've posted. I'll drop (invalid because JSON) comments to annotate the config:

{
    "version": 1,
    "snapshot": {
      "widths": [375, 1280],
       // Generally not recommended to enable JS in our browsers. It can cause unexpected results & unstable screenshots. Is there anything specific you're looking to solve with this? 
      "enable-javascript": true
    },
    "agent": {
      "asset-discovery": {
       // This won't have any impact. These should hostnames that are within _your_ application (and is used to capture assets from other hosts that aren't the same as the applications URL)
      // This can be deleted 👍 
        "allowed-hostnames": [
          "proxyme.percy.io",
          "render.percy.local"
        ],
        // 50ms is quite low (we default to 125). This means percy will wait 50ms for _zero_ network requests to be made before closing asset discovery. If asset discovery is closed before all assets are captured, they will be missing in snapshots
        // I would try 250ms if this needs adjusting, but it doesn't appear like it does.  
        "network-idle-timeout": 50,
        "page-pool-size-min": 5,
        "page-pool-size-max": 20
      }
    }
  }

With all of that said, if an asset is present in one browser but not the other that means there's something going on with the browser (rather than the asset not being captured). This isn't an SDK issue, but an issue within our rendering env. I'm going to keep debugging & post back when I have a concrete answer for what's going on 😃