Get widths from the config file

[klamping]

I'd like to get certain properties from my Percy config file (e.g., the 'widths' property under 'snapshot'). Is it possible to do this in a relatively simple way?

I know that I can use the PercyConfig utility to load my Percy config file, but the issue I'm running into there is that the PercyConfig utility, on its own, doesn't have the full Percy Config Schema loaded. So when I load my config file, it throws a validation error, and I'd rather not add the complexity to my code of going through the full schema loading instructions.

I also know that I could just create a new Percy instance and access it like so:

const Percy = require('@percy/core');

console.log(new Percy().config.snapshot.widths)

But when I try that method inside of the Cypress SDK, it gets into a circular reference issue. Still not sure why it does this, so any answers to that would be great.

[wwilsman]

Hey @klamping!

In the context of the Cypress SDK, you could potentially utilize @percy/sdk-utils (a dependency of the SDK). Here's a how you would read the config, but only after isPercyEnabled() is called and returns true.

Casting aside any SDK, while Percy is running you can access its loaded config from either of two endpoints: http://localhost:5338/percy/healthcheck or http://localhost:5338/percy/config.

But this is only possible while Percy is running. If you're looking to read the config file regardless of if Percy is running, I would recommend just reading and parsing the file directly. If using a .percy.js config file, you could just import it like any other JS file. If using any other config file format, you could use fs.readyFileSync or similar and parse the contents with either JSON.parse for .json files, or YAML.parse for .yml files (internally the CLI uses the yaml library).

[klamping]

I had tried reading the config from the Percy object, but didn't realize I need to run isPercyEnabled to populate those values. Here's what my solution looks like:

const utils = require('@percy/sdk-utils');

utils.isPercyEnabled().then((isEnabled) => {
    if (!isEnabled) {
        return false;
    }

    const configWidths = utils.percy.config.snapshot.widths;
    // do something with the widths
});

Since I already coded it before realizing the previous solution, here's a possible /percy/config endpoint code solution:

const utils = require('@percy/sdk-utils');

utils.request('/percy/config').then(res => {
      const configWidths = res.body.config.snapshot.widths
      // do something with the widths
})

Thanks for the guidance with this. It's what I needed to get this issue figured out.