diff --git a/packages/core/src/percy.js b/packages/core/src/percy.js
index 63653c7aa..7afb1b5af 100644
--- a/packages/core/src/percy.js
+++ b/packages/core/src/percy.js
@@ -164,7 +164,11 @@ export class Percy {
if (!this.skipDiscovery) yield this.#discovery.start();
// start a local API server for SDK communication
if (this.server) yield this.server.listen();
- if (this.projectType === 'web') this.deviceDetails = yield this.client.getDeviceDetails(this.build?.id);
+ if (this.projectType === 'web') {
+ if (!process.env.PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS || process.env.PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS !== 'true') {
+ this.deviceDetails = yield this.client.getDeviceDetails(this.build?.id);
+ }
+ }
const snapshotType = this.projectType === 'web' ? 'snapshot' : 'comparison';
this.syncQueue = new WaitForJob(snapshotType, this);
// log and mark this instance as started
diff --git a/packages/core/test/discovery.test.js b/packages/core/test/discovery.test.js
index c3849d544..a0d50d14a 100644
--- a/packages/core/test/discovery.test.js
+++ b/packages/core/test/discovery.test.js
@@ -2092,12 +2092,12 @@ describe('Discovery', () => {
const fetchUpstream = async(request) => {
return await fetch(request.clone());
}
-
+
self.addEventListener('fetch', (event) => {
const { request } = event
event.respondWith(fetchUpstream(request));
});
-
+
self.addEventListener("activate", (event) => {
event.waitUntil(clients.claim());
});
@@ -2107,9 +2107,9 @@ describe('Discovery', () => {
const registerServiceWorker = async () => {
await navigator.serviceWorker.register('sw.js',{ scope: './', });
};
-
+
await registerServiceWorker();
-
+
// create and insert image element which will be intercepted and resolved by service worker
// adding a sleep of 1s for service worker to get activated
await new Promise(r => setTimeout(r, 1000));
@@ -2254,6 +2254,9 @@ describe('Discovery', () => {
});
describe('Capture responsive assets =>', () => {
+ afterEach(() => {
+ delete process.env.PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS;
+ });
it('should capture js based assets', async () => {
api.reply('/discovery/device-details?build_id=123', () => [200, { data: [{ width: 375, deviceScaleFactor: 2 }, { width: 390, deviceScaleFactor: 3 }] }]);
// stop current instance to create a new one
@@ -2324,6 +2327,75 @@ describe('Discovery', () => {
}));
});
+ it('should not capture js based assets and returns default', async () => {
+ process.env.PERCY_DO_NOT_CAPTURE_RESPONSIVE_ASSETS = 'true';
+ api.reply('/discovery/device-details?build_id=123', () => [200, { data: [{ width: 375, deviceScaleFactor: 2 }, { width: 390, deviceScaleFactor: 3 }] }]);
+ // stop current instance to create a new one
+ await percy.stop();
+ percy = await Percy.start({
+ projectType: 'web',
+ token: 'PERCY_TOKEN',
+ snapshot: { widths: [1000] },
+ discovery: { concurrency: 1 }
+ });
+ let responsiveDOM = dedent`
+
+
+
+
+ Responsive Images Example
+ 
+
+
+
+ `;
+
+ server.reply('/', () => [200, 'text/html', responsiveDOM]);
+ server.reply('/default.jpg', () => [200, 'image/jpg', pixel]);
+ server.reply('/small.jpg', () => [200, 'image/jpg', pixel]);
+ server.reply('/medium.jpg', () => [200, 'image/jpg', pixel]);
+ server.reply('/large.jpg', () => [200, 'image/jpg', pixel]);
+
+ await percy.snapshot({
+ name: 'image srcset',
+ url: 'http://localhost:8000',
+ widths: [1024]
+ });
+
+ await percy.idle();
+
+ let resource = path => jasmine.objectContaining({
+ attributes: jasmine.objectContaining({
+ 'resource-url': `http://localhost:8000${path}`
+ })
+ });
+
+ expect(captured[0]).toEqual(jasmine.arrayContaining([
+ resource('/default.jpg')
+ ]));
+
+ expect(captured[0]).not.toContain(jasmine.objectContaining({
+ attributes: jasmine.objectContaining({
+ 'resource-url': 'http://localhost:8000/large.jpg'
+ })
+ }));
+ });
+
it('handle cases when asset was changed on load', async () => {
api.reply('/discovery/device-details?build_id=123', () => [200, { data: [{ width: 390, deviceScaleFactor: 3 }] }]);
// stop current instance to create a new one