percy snapshot should offer a dump option for debugging

[mbr-sn]

One of the challenges we are currently facing with dynamic (JS-based) changes to our page DOM, is that we don't really know exactly what kind of DOM state is frozen and uploaded to percy.io
Even the debug log does not provide this.
So we need a lot of trial-and-error playing around with timeout values, beforeSnapshot Javascripts hacks, etc.

Suggested new feature for percy snapshot command:
What would be really helpful in that case, would be a --dump directory option for the percy snapshot command.
This option should cause percy to write a copy of the frozen DOM tree as a file to that folder, also including all the assets it identified during asset discovery phase. In other words a full 1-1 as-is copy of everything that percy uploads to the cloud for the screenshots to be taken.

[itsjwala]

Hey @mbr-sn This is a very nice suggestion!

currently, you may intercept these requests and store them till we have support for this.
these are the network call that runs behind the scenes.

cli/packages/client/src/client.js

Lines 294 to 345 in eb03b7e

	async createSnapshot(buildId, {
	name,
	widths,
	scope,
	minHeight,
	enableJavaScript,
	clientInfo,
	environmentInfo,
	resources = []
	} = {}) {
	validateId('build', buildId);
	this.addClientInfo(clientInfo);
	this.addEnvironmentInfo(environmentInfo);
	if (!this.clientInfo.size || !this.environmentInfo.size) {
	this.log.warn('Warning: Missing `clientInfo` and/or `environmentInfo` properties');
	}
	this.log.debug(`Creating snapshot: ${name}...`);
	for (let resource of resources) {
	if (resource.sha || resource.content || !resource.filepath) continue;
	resource.content = await fs.promises.readFile(resource.filepath);
	}
	return this.post(`builds/${buildId}/snapshots`, {
	data: {
	type: 'snapshots',
	attributes: {
	name: name || null,
	widths: widths || null,
	scope: scope || null,
	'minimum-height': minHeight || null,
	'enable-javascript': enableJavaScript || null
	},
	relationships: {
	resources: {
	data: resources.map(r => ({
	type: 'resources',
	id: r.sha ?? (r.content && sha256hash(r.content)),
	attributes: {
	'resource-url': r.url || null,
	'is-root': r.root || null,
	'for-widths': r.widths || null,
	mimetype: r.mimetype || null
	}
	}))
	}
	}
	}
	});
	}

cli/packages/client/src/client.js

Lines 265 to 291 in eb03b7e

	async uploadResource(buildId, { url, sha, filepath, content } = {}) {
	validateId('build', buildId);
	this.log.debug(`Uploading resource: ${url}...`);
	if (filepath) content = await fs.promises.readFile(filepath);
	return this.post(`builds/${buildId}/resources`, {
	data: {
	type: 'resources',
	id: sha || sha256hash(content),
	attributes: {
	'base64-content': base64encode(content)
	}
	}
	});
	}
	// Uploads resources to the active build concurrently, two at a time.
	async uploadResources(buildId, resources) {
	validateId('build', buildId);
	this.log.debug(`Uploading resources for ${buildId}...`);
	return pool(function*() {
	for (let resource of resources) {
	yield this.uploadResource(buildId, resource);
	}
	}, this, 2);
	}

[mbr-sn]

Since there can be multiple items in the snapshot.yml, the --dump option should just take the "name:" value of each item, and create a subfolder underneath the main dump directory, and in that folder store the DOM file and all related assets. :-)