Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to turn off CSS for faster automation tests execution?

Reference:

  1. What is the cleanest way to disable CSS transition effects temporarily?
  2. http://onezeronull.com/2016/10/06/disable-css-transitions-and-animations-temporarily-or-permanently/

Whenever I need to run test JavaScript I use JavascriptExecutor but none of the blogs above clarifies how it can be done with it.

I tried:

js.executeScript(".notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}");

But it does nothing for me.

Edit:

I tried after the answer provided by @AmerllicA

public void turnOffCss () {
    navigate("https://www.bureauofdigital.com");
    js.executeScript("*, *:before, *:after {
     -webkit-transition: none !important;
     -moz-transition: none !important;
     -ms-transition: none !important;
     -o-transition: none !important;        
     transition: none !important;

     -webkit-transform: none !important;
     -moz-transform: none !important;
     -ms-transform: none !important;
     -o-transform: none !important;        
     transform: none !important;
    }");
}
like image 624
paul Avatar asked Jun 24 '18 06:06

paul


1 Answers

I put another answer for your exact question on JavaScript Executor. let's to clarify the JavaScript code,

  1. make a style tag element.
  2. add id attribute with style-tag value.
  3. make a string of that CSSes I answered in another answer.
  4. put or append the string into style tag.
  5. append the style to head tag in DOM.

Now let's write above states to JavaScript codes:

const styleElement = document.createElement('style');
styleElement.setAttribute('id','style-tag');
const styleTagCSSes = document.createTextNode('*,:after,:before{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}');
styleElement.appendChild(styleTagCSSes);
document.head.appendChild(styleElement);

With this codes you could import my another answer CSSes to DOM. so you can put below string to your JavaScript Executor:

"const styleElement = document.createElement('style');styleElement.setAttribute('id','style-tag');const styleTagCSSes = document.createTextNode('*,:after,:before{-webkit-transition:none!important;-moz-transition:none!important;-ms-transition:none!important;-o-transition:none!important;transition:none!important;-webkit-transform:none!important;-moz-transform:none!important;-ms-transform:none!important;-o-transform:none!important;transform:none!important}');styleElement.appendChild(styleTagCSSes);document.head.appendChild(styleElement);"

If you wanna revert this action, just use:

document.getElementById('style-tag').remove();

Hope these codes help you.

like image 137
AmerllicA Avatar answered Nov 07 '22 07:11

AmerllicA