diff --git a/src/services/agent-service.ts b/src/services/agent-service.ts
index 3f535110..6c56d146 100644
--- a/src/services/agent-service.ts
+++ b/src/services/agent-service.ts
@@ -107,13 +107,6 @@ export class AgentService {
}
let domSnapshot = request.body.domSnapshot
- const percyCSSFileName = `percy-specific.${Date.now()}.css` as string
-
- // Inject the link to the percy specific css if the option is passed
- if (snapshotOptions.percyCSS) {
- const cssLink = ``
- domSnapshot = domSnapshot.replace(/<\/body>/i, cssLink + '$&')
- }
if (domSnapshot.length > Constants.MAX_FILE_SIZE_BYTES) {
logger.info(`snapshot skipped[max_file_size_exceeded]: '${request.body.name}'`)
@@ -127,10 +120,21 @@ export class AgentService {
snapshotLogger,
)
+ const percyCSSFileName = `percy-specific.${Date.now()}.css` as string
+
+ // Inject the link to the percy specific css if the option is passed
+ // This must be done _AFTER_ asset discovery, or you risk their server
+ // serving a response for this CSS we're injecting into the DOM
+ if (snapshotOptions.percyCSS) {
+ const cssLink = ``
+ domSnapshot = domSnapshot.replace(/<\/body>/i, cssLink + '$&')
+ }
+
resources = resources.concat(
- this.snapshotService.buildLogResource(snapshotLog),
+ this.snapshotService.buildRootResource(request.body.url, domSnapshot),
// @ts-ignore we won't write anything if css is not is passed
- this.snapshotService.buildPercyCSSResource(percyCSSFileName, snapshotOptions.percyCSS),
+ this.snapshotService.buildPercyCSSResource(percyCSSFileName, snapshotOptions.percyCSS, snapshotLogger),
+ this.snapshotService.buildLogResource(snapshotLog),
)
const snapshotCreation = this.snapshotService.create(
diff --git a/src/services/snapshot-service.ts b/src/services/snapshot-service.ts
index 9933d8af..d849c8bf 100644
--- a/src/services/snapshot-service.ts
+++ b/src/services/snapshot-service.ts
@@ -23,27 +23,27 @@ export default class SnapshotService extends PercyClientService {
this.assetDiscoveryService = new AssetDiscoveryService(buildId, configuration)
}
- async buildResources(
+ buildResources(
rootResourceUrl: string,
domSnapshot = '',
options: SnapshotOptions,
logger: any,
): Promise {
- const rootResource = this.percyClient.makeResource({
- resourceUrl: rootResourceUrl,
- content: domSnapshot,
- isRoot: true,
- mimetype: 'text/html',
- })
-
- const discoveredResources = await this.assetDiscoveryService.discoverResources(
+ return this.assetDiscoveryService.discoverResources(
rootResourceUrl,
domSnapshot,
options,
logger,
)
+ }
- return [rootResource].concat(discoveredResources)
+ buildRootResource(rootResourceUrl: string, domSnapshot = ''): Promise {
+ return this.percyClient.makeResource({
+ resourceUrl: rootResourceUrl,
+ content: domSnapshot,
+ isRoot: true,
+ mimetype: 'text/html',
+ })
}
buildLogResource(logFilePath: string) {
@@ -65,8 +65,10 @@ export default class SnapshotService extends PercyClientService {
})
}
- buildPercyCSSResource(fileName: string, css: string) {
+ buildPercyCSSResource(fileName: string, css: string, logger: any) {
if (!css) { return [] }
+ logger.debug(`Creating Percy Specific file: ${fileName}. CSS string: ${css}`)
+
const buffer = Buffer.from(css, 'utf8')
const sha = crypto.createHash('sha256').update(buffer).digest('hex')
const localPath = path.join(os.tmpdir(), sha)
@@ -74,6 +76,8 @@ export default class SnapshotService extends PercyClientService {
// write the SHA file if it doesn't exist
if (!fs.existsSync(localPath)) {
fs.writeFileSync(localPath, buffer, 'utf8')
+ } else {
+ logger.debug(`Skipping writing Percy specific file: ${fileName}.`)
}
return this.percyClient.makeResource({