I'm trying to use Percy.io to snapshot pages on a site that requires a custom header in the request (any requests missing this header receive a HTTP 403).
I'm looking at the docs here: https://docs.percy.io/docs/cli-configuration#snapshot
I'm confused. The discovery
section includes a request-headers
option:
request-headers: An object containing HTTP headers to be sent for each request made during asset discovery.
But that seems to relate only to asset discovery - fetching CSS, JS and other page assets required by the URL I'm trying to snapshot.
I want to send a custom HTTP header with the original request; the one for the URL I want a snapshot of. And I don't see any option for it. But... it must be possible, no?
Here's what I'm doing:
const puppeteer = require('puppeteer');
const percySnapshot = require('@percy/puppeteer');
const pageReferences = [
'https://www.my-url.com',
];
const options = {
requestHeaders: {
"proxy-authorization":"************"
}
};
(async () => {
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox']
});
let page = await browser.newPage();
await page.goto(pageReferences[0]);
await percySnapshot(page, pageReferences[0], options);
})();
That gives me a snapshot of a 403 error page. But I can otherwise reach the page fine with the correct header:
$ curl -I -H "proxy-authorization:***********" https://www.my-url.com
HTTP/2 200
What am I missing here?
Asset discovery is the same as what you are calling the "original request". Percy loads all the assets related to a page (html, css, js, images, etc.) from your server - where you will need authorization.
The easiest way is to create a local .percy.yml config file. Into that, add your headers:
version: 2
snapshot:
widths: [390, 1280]
discovery:
proxy-authorization: secret
# and/or for your target
authorization:
username: itsme
password: supersecret
Nice side effect: you don't have to commit your secrets to your code version control if you keep the percy.yml local