Apply style to a selector - WebPageTest

WebPageTestsnippet

The following script can be used to force show certain elements by e.g. tweaking opacity, visibility, dimensions in cases where a website has certain styles which cause an element to not be visible earlier.

console.log('applyCSS Script')
try {
    var perfScripts = window.perfScripts = window.perfScripts || {};
    perfScripts.applyCSS = function (config) {
     if(!document.head) {
            console.log('Head Not Found. Retrying');
            requestAnimationFrame(function() {perfScripts.applyCSS(config)},0)
            return;
      }
      const style = document.createElement('style');
      style.innerText = config.selector + '{' + config.style + '}';
      document.head.prepend(style);
        console.log('applyCSS:', config)
    }
    
    //perfScripts.applyCSS({selector: '.slideshow__slide', style:'opacity:1 !important'});
    //perfScripts.applyCSS({selector: '.slideshow__image', style: 'width: 360px; height: 500px'});
} catch(e) {
    // Log errors to identify if script errors at run time.
  console.log('applyCSS script gave Error', e);
}
... Loading comments