Skip to content

Commit

Permalink
Removing PercyCSS from CLI for performance benefit (#1377)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Amit3200
Amit3200 authored Sep 27, 2023
1 parent f520fbe commit 19d8767
Show file tree
Hide file tree
Showing 2 changed files with 1 addition and 119 deletions.
45 changes: 1 addition & 44 deletions packages/webdriver-utils/src/providers/genericProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,32 +42,6 @@ export default class GenericProvider {
this.options.freezeAnimation = this.options.freezeAnimation || false;
}

defaultPercyCSS() {
return `*, *::before, *::after {
-moz-transition: none !important;
transition: none !important;
-moz-animation: none !important;
animation: none !important;
animation-duration: 0 !important;
caret-color: transparent !important;
content-visibility: visible !important;
}
html{
scrollbar-width: auto !important;
}
svg {
shape-rendering: geometricPrecision !important;
}
scrollbar, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
pointer-events: none !important;
-moz-appearance: none !important;
display: none !important;
}
video::-webkit-media-controls {
display: none !important;
}`;
}

async createDriver() {
this.driver = new Driver(this.sessionId, this.commandExecutorUrl, this.capabilities);
log.debug(`Passed capabilities -> ${JSON.stringify(this.capabilities)}`);
Expand All @@ -92,20 +66,6 @@ export default class GenericProvider {
}
}

async addPercyCSS(userCSS) {
const createStyleElement = `const e = document.createElement('style');
e.setAttribute('data-percy-specific-css', true);
e.innerHTML = '${userCSS}';
document.body.appendChild(e);`;
await this.driver.executeScript({ script: createStyleElement, args: [] });
}

async removePercyCSS() {
const removeStyleElement = `const n = document.querySelector('[data-percy-specific-css]');
n.remove();`;
await this.driver.executeScript({ script: removeStyleElement, args: [] });
}

async screenshot(name, {
ignoreRegionXpaths = [],
ignoreRegionSelectors = [],
Expand All @@ -120,9 +80,7 @@ export default class GenericProvider {

this.addDefaultOptions();

const percyCSS = (this.defaultPercyCSS() + (this.options.percyCSS || '')).split('\n').join('');
log.debug(`[${name}] : Applying the percyCSS - ${this.options.percyCSS}`);
await this.addPercyCSS(percyCSS);
this.options.percyCSS = (this.options.percyCSS || '').split('\n').join('');

log.debug('Fetching comparisong tag ...');
const tag = await this.getTag();
Expand All @@ -140,7 +98,6 @@ export default class GenericProvider {
await this.setDebugUrl();
log.debug(`[${name}] : Debug url ${this.debugUrl}`);

await this.removePercyCSS();
return {
name,
tag,
Expand Down
75 changes: 0 additions & 75 deletions packages/webdriver-utils/test/providers/genericProvider.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,14 +138,10 @@ describe('GenericProvider', () => {
describe('screenshot', () => {
let getTagSpy;
let getTilesSpy;
let addPercyCSSSpy;
let removePercyCSSSpy;

beforeEach(() => {
getTagSpy = spyOn(GenericProvider.prototype, 'getTag').and.returnValue(Promise.resolve('mock-tag'));
getTilesSpy = spyOn(GenericProvider.prototype, 'getTiles').and.returnValue(Promise.resolve({ tiles: 'mock-tile', domInfoSha: 'mock-dom-sha' }));
addPercyCSSSpy = spyOn(GenericProvider.prototype, 'addPercyCSS').and.returnValue(Promise.resolve(true));
removePercyCSSSpy = spyOn(GenericProvider.prototype, 'removePercyCSS').and.returnValue(Promise.resolve(true));
spyOn(DesktopMetaData.prototype, 'windowSize')
.and.returnValue(Promise.resolve({ width: 1920, height: 1080 }));
});
Expand All @@ -154,12 +150,8 @@ describe('GenericProvider', () => {
genericProvider = new GenericProvider('123', 'http:executorUrl', { platform: 'win' }, {}, 'local-poc-poa', 'staging-poc-poa', {});
await genericProvider.createDriver();
let res = await genericProvider.screenshot('mock-name', {});
const defaultPercyCSS = genericProvider.defaultPercyCSS().split('\n').join('');
expect(addPercyCSSSpy).toHaveBeenCalledTimes(1);
expect(addPercyCSSSpy).toHaveBeenCalledWith(defaultPercyCSS);
expect(getTagSpy).toHaveBeenCalledTimes(1);
expect(getTilesSpy).toHaveBeenCalledOnceWith(0, 0, false);
expect(removePercyCSSSpy).toHaveBeenCalledTimes(1);
expect(res).toEqual({
name: 'mock-name',
tag: 'mock-tag',
Expand All @@ -175,57 +167,6 @@ describe('GenericProvider', () => {
});
});

describe('defaultPercyCSS', () => {
const expectedResult = `*, *::before, *::after {
-moz-transition: none !important;
transition: none !important;
-moz-animation: none !important;
animation: none !important;
animation-duration: 0 !important;
caret-color: transparent !important;
content-visibility: visible !important;
}
html{
scrollbar-width: auto !important;
}
svg {
shape-rendering: geometricPrecision !important;
}
scrollbar, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {
pointer-events: none !important;
-moz-appearance: none !important;
display: none !important;
}
video::-webkit-media-controls {
display: none !important;
}`;

it('should return defaultPercyCSS', () => {
genericProvider = new GenericProvider('123', 'http:executorUrl', { platform: 'win' }, {}, 'local-poc-poa', 'staging-poc-poa', {});
const resp = genericProvider.defaultPercyCSS();
expect(resp).toBe(expectedResult);
});
});

describe('addPercyCSS', () => {
beforeEach(() => {
spyOn(Driver.prototype, 'executeScript').and.returnValue(Promise.resolve(true));
});

it('should call executeScript to add style', async () => {
genericProvider = new GenericProvider('123', 'http:executorUrl', { platform: 'win' }, {}, 'local-poc-poa', 'staging-poc-poa', {});
await genericProvider.createDriver();
const percyCSS = 'h1{color:green !important;}';
await genericProvider.addPercyCSS(percyCSS);
const expectedArgs = `const e = document.createElement('style');
e.setAttribute('data-percy-specific-css', true);
e.innerHTML = '${percyCSS}';
document.body.appendChild(e);`;
expect(genericProvider.driver.executeScript).toHaveBeenCalledTimes(1);
expect(genericProvider.driver.executeScript).toHaveBeenCalledWith({ script: expectedArgs, args: [] });
});
});

describe('getWindowHeight', () => {
beforeEach(() => {
spyOn(Driver.prototype, 'executeScript').and.returnValue(Promise.resolve(true));
Expand All @@ -240,22 +181,6 @@ describe('GenericProvider', () => {
});
});

describe('removePercyCSS', () => {
beforeEach(() => {
spyOn(Driver.prototype, 'executeScript').and.returnValue(Promise.resolve(true));
});

it('should call executeScript to add style', async () => {
genericProvider = new GenericProvider('123', 'http:executorUrl', { platform: 'win' }, {}, 'local-poc-poa', 'staging-poc-poa', {});
await genericProvider.createDriver();
await genericProvider.removePercyCSS();
const expectedArgs = `const n = document.querySelector('[data-percy-specific-css]');
n.remove();`;
expect(genericProvider.driver.executeScript).toHaveBeenCalledTimes(1);
expect(genericProvider.driver.executeScript).toHaveBeenCalledWith({ script: expectedArgs, args: [] });
});
});

describe('getRegionObject', () => {
let provider;
let mockLocation = { x: 10, y: 20, width: 100, height: 200 };
Expand Down

0 comments on commit 19d8767

Please sign in to comment.