feat: Expanded .percy.yml configuration support

[djones]

New configuration options in .percy.yml

On the surface this PR gives us the ability to now configure these options in the .percy.yml file:

• static-snapshots
  • path
  • port (the port your static site ends up hosted on)
• agent
  • port (configurable but not fully functional yet though)
  • asset-discovery
    • network-idle-timeout
    • page-pool-size-min
    • page-pool-size-max

Configuration handling refactor

Deeper into the PR, you'll find a total refactor of the way we handle configuration in @percy/agent. As we've expanded what you can configure in .percy.yml, it's become more important to be able to layer config from various places on top of each other.

These configuration layers are setup like this:

1. default configuration
2. .percy.yml configuration
3. supplied command line flags
4. supplied command line arguments

The ConfigurationService can handle input from all of these places and produce one unified configuration for use by other service objects.

Page pool size experiment

Now that you can configure page-pool-size I ran some experiments to understand the resource differences. The test I ran took 101 snapshots with 3 widths on a very simple todo app page and it sent them up in parallel. Here's the script snapshots.js I used:

const PercyScript = require('@percy/script');

PercyScript.run(async (page, percySnapshot) => {
  let i = 0
  await page.goto('http://localhost:8000');
  const snapshots = []
  const parallelTotal = 100

  while (i <= parallelTotal) {
     snapshots.push(percySnapshot(`Parallel Snapshot ${i}`))
     i++
  }

  await Promise.all(snapshots)
});

and here's the results with different page-pool settings. I ran time npm run snapshots.

# page-pool-size-min: 1
# page-pool-size-max: 1
# network-idle-timeout: 50
npm run snapshots  23.56s user 5.14s system 78% cpu 36.328 total
npm run snapshots  24.01s user 5.21s system 78% cpu 37.019 total
npm run snapshots  22.22s user 4.90s system 76% cpu 35.666 total

# page-pool-size-min: 1
# page-pool-size-max: 3
# network-idle-timeout: 50
npm run snapshots  20.16s user 4.62s system 141% cpu 17.497 total
npm run snapshots  21.74s user 4.84s system 147% cpu 18.058 total
npm run snapshots  21.61s user 4.84s system 147% cpu 17.905 total

# page-pool-size-min: 1
# page-pool-size-max: 5
# network-idle-timeout: 50
npm run snapshots  25.29s user 5.32s system 185% cpu 16.503 total
npm run snapshots  28.69s user 5.98s system 210% cpu 16.508 total
npm run snapshots  24.54s user 5.35s system 180% cpu 16.519 total

# page-pool-size-min: 1
# page-pool-size-max: 10
# network-idle-timeout: 50
npm run snapshots  25.84s user 5.44s system 199% cpu 15.691 total
npm run snapshots  28.79s user 5.95s system 209% cpu 16.597 total
npm run snapshots  28.06s user 5.82s system 198% cpu 17.105 total

# page-pool-size-min: 3
# page-pool-size-max: 5
# network-idle-timeout: 50
npm run snapshots  24.88s user 5.27s system 181% cpu 16.575 total
npm run snapshots  25.17s user 5.22s system 185% cpu 16.371 total
npm run snapshots  25.70s user 5.35s system 190% cpu 16.296 total

# page-pool-size-min: 3
# page-pool-size-max: 5
# network-idle-timeout: 0 <- not recommended
npm run snapshots  24.84s user 5.16s system 185% cpu 16.194 total
npm run snapshots  25.12s user 5.27s system 191% cpu 15.897 total
npm run snapshots  33.71s user 6.57s system 246% cpu 16.362 total

For each page open in the pool, I noticed about ~130mb of RAM was used.

What I observe from this is the following:

• If you would like a good tradeoff of speed and resources just leave these settings as the default (min 1, max 5).
• If you want @percy/agent to take up the minimum amount of resources (CPU and memory) and aren't concerned about speed, you should set your min and max pool size to 1.
• If you have a large machine running your tests you might find a small performance boost by setting your max pool size to something larger, like 10 or 20.
• Setting a min size to something higher than 1 didn't really yield any benefit. @percy/agent will quickly scale up to the max pool size if it's needed.

[djones]

this is questionable about if this should be here since it's not really supported properly.

[Robdel12]

yeah, I think we should create a follow up ticket to fix it. I've seen a few folks in support try to use it

[djones]

these had to be explicitly split out because they are imported into PercyAgentClient.

[djones]

previously we were not guarding against '' values for the snapshot globs, which appear to match everything. This is a bit of a bonus change.

[djones]

this is one of the key bits of this PR. We're now supplying a configurable min/max pool size.

[Robdel12]

🏁 Nice work here! Just need to remove the left over console.log and everything looks good to me 😃

[Robdel12]

yeah, I think we should create a follow up ticket to fix it. I've seen a few folks in support try to use it