Webpages behind Netlify Authentication not showing css in Percy snapshot

[bennymeade]

Our test environment sites have recently moved from Basic Authentication to Netlify Authentication.

For Basic Authentication I was successfully utilising the .percy.js config:

module.exports = {
  version: 2,
  discovery: {
    disableCache: false,
    requestHeaders: {
      Authorization: process.env.CYPRESS_BASIC_AUTH
    }
  }
}

But now for Netlify Authentication, I don't know how to handle this authentication type and the result is that all our snapshots are without css (see attached image).

In our Cypress tests we POST the password to the site which responds with a 302 response redirecting us back to the authenticated site (with session cookie):

    cy.request({
      method: 'POST',
      url: urlNew,
      failOnStatusCode: false,
      body: {
        password: Cypress.env('AUTH_PASSWORD'),
      },
    }).then(() => {
      cy.visit(urlNew);
    });

Any help or guidance on how to get around this would be greatly appreciated?

[Robdel12]

Hey @bennymeade! I don't have access to those netlify features but it looks like they do auth via JWT. https://docs.netlify.com/visitor-access/password-protection/ You can look at the network requests that are being made in your browser after logging in to check, but it looks like you can pass an Authorization header with the JWT token https://stackoverflow.com/a/33281233/1352387

Or you could enable basic auth and provide that header: https://docs.netlify.com/visitor-access/password-protection/#selective-protection-with-basic-authentication

[DharaniY]

@bennymeade , I am also facing similar issue, Can you please help me on this. percy taking snapshot with blank page

[dharani420]

@bennymeade, I am not facing the issue, when I try to use the live site. The issue facing with QA site, which browser authentication required.

I tried the below code, the problem is the blank page captured as a snapshot.
cy.visit(
'https://xxxsdsdlklkads.com/rakhi/group/en/regression-testing/regression-testing-hero',
{
headers: {
username: Cypress.env('username'),
password: Cypress.env('password'),
},
}
)
cy.percySnapshot('home page')
I am not familiar with config setting which you are talking about, please help me on this. Really appreciated your help. Thanks in advance!

[bennymeade]

@DharaniY in your code you are only authenticating with Cypress. You will need to authenticate again using Percy config file: https://docs.percy.io/docs/cli-configuration#a-complete-config

To do this I use a .percy.js file on the root of my project (i.e. on same level as my Cypress folder, not inside Cypress) with the following values:

module.exports = {
  version: 2,
  discovery: {
    disableCache: false,
    authorization: {
      username: process.env.CYPRESS_AUTH_USERNAME,
      password: process.env.CYPRESS_AUTH_PASSWORD
    },
    requestHeaders: {
      Authorization: process.env.CYPRESS_AUTH_PASSWORD
    }
  }
}

This works for sites using Basic Authentication.

Also another tip when debugging Percy is to enable verbose logging. You can do this from your run command, example:

npx percy exec --verbose cypress run --spec 'cypress/integration/homepage.spec.ts'

[dharani420]

@bennymeade, I tried by adding .percy.js, i don't see the issue invoking the application, this time failed to upload the snapshot to percy.
Error : 1 snapshots in this build took too long to render even after multiple retries. This can happen in rare cases when a page loads an asset that takes too long and hangs the Percy renderer, or if a snapshot is triggering a browser dialog. If you'd like help troubleshooting this, feel free to reach out and we can help get this fixed.
Did I missed anything, please suggest me on this.
cy.visit('https://asdasdsads.com/group/en', {
auth: {
username: 'asdasdasdr',
password: "asdadasd",
},
})
.percy.js
module.exports = {
version: 2,
discovery: {
disableCache: false,
authorization: {
username: 'asdasdasdr',
password: "asdadasd",
},

},

}
percy:client] Uploading resources for 13192364... (974ms)
[percy:client] Uploading resource: https://asadsads/com/group/market-images/group-startpage-hero.jpg/_jcr_content/renditions/cq5dam.blur-up.40.0.jpeg... (1ms)
[percy:client] Uploading resource: https://asdadsa/com/group/market-images/group-startpage-hero.jpg/_jcr_content/renditions/cq5dam.XS.400.0.jpeg... (2ms)
[percy:client] Uploading resource: https://asdasdasd/etc/clientlibs/themes/assa-abloy/com-cyrillic.lc-7fe908f67cc09de41c99f5c0adce5b69-lc.min.css... (531ms)
[percy:client] Uploading resource: https://asdasdasdsas/com/group/market-images/group-startpage-hero.jpg/_jcr_content/renditions/cq5dam.L.1600.0.jpeg... (94ms)
[percy:client] Uploading resource: https://asdsadsad.com/content/dam/placeholder/Image.png/_jcr_content/renditions/cq5dam.thumbnail.48.48.png... (561ms)
[percy:client] Uploading resource: https://asdasdsadsa.com/com/career/market-images/our-benefits-card.jpg/_jcr_content/renditions/cq5dam.blur-up.40.0.jpeg... (993ms)
[percy:client] Uploading resource: https://asdasdas/etc.clientlibs/assa-abloy-onecms/clientlibs/global.lc-f199efde36ac0f4f31c302c81c510bcc-lc.min.css... (310ms)
[percy:client] Uploading resource: /percy.1633887534565.log... (251ms)
[percy:client] Uploading resource: https://asdasdsasa/group/en... (803ms)
[percy:client] Uploading resource: https://asdasdasd/etc.clientlibs/assa-abloy-onecms/clientlibs/themes/asdasd-d0b196192663e749dad443dba8b13a1f-lc.min.css... (110ms)

[bennymeade]

@DharaniY I don't believe that error is related to you adding the .percy.js config. Have you tried on a different test environment i.e. Stage. Or a different test page on your QA site, some lightweight page?

Also, ensure you have added the required node package:

"@percy/cli": "1.0.0-beta.62",
"@percy/cypress": "3.1.1",

[Robdel12]

@dharani420 you'll want to reach out to support. When there's a timeout rendering the snapshot, that means something is going wrong when we're trying to rerender the captured DOM/assets. If there's basic auth, this part of that timeout message is relevant:

or if a snapshot is triggering a browser dialog

The debugging SDKs doc will be helpful to understand what's going on and how Percy works: https://docs.percy.io/docs/debugging-sdks

[bennymeade]

Hi @Robdel12 our Netlify site is protected by a password, which when entered creates a session cookie. It's not using JWT and unfortunately I have no say over how this is implemented.

I mentioned above my method for handling this with Cypress: POST request the password to the site which responds with a 302 response redirecting us back to the authenticated site (with session cookie).

Is it possible to do similar with Percy config?

[Robdel12]

Hey @bennymeade! The session is set when you login like that, which then sends an auth token header with each request the browser makes. What I was suggesting was finding that token (their docs suggest its JWT) and finding that header and then passing that value to Percy's asset discovery. There's no way to provide automation steps to Percy's asset discovery browser, you're going to have to pass the right request header to authenticate those requests. Something like:

module.exports = {
  version: 2,
  discovery: {
    requestHeaders: {
      Authorization: "Bearer [Token here]"
    }
  }
}

Since this config file is JS, you could script something that automatically grabs a valid auth token and then sets it. I don't have access to this since it's a paid Netlify feature, but it should be possible.

You could also grab while your tests are running and pass it as a per-snapshot config option too (if it's easier to find the request header there):

cy.percySnapshot('name', { 
  discovery: { 
    requestHeaders: {
      Authorization: `Bearer ${interpolate token here}`
    }
  }
});

[bennymeade]

Thanks @Robdel12 i'll bring this info to our devOps.