How to turn off CSS for faster automation tests execution?

Question

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;
    }");
}

Answer 1

Your question title is How to turn of CSS and what does it means? if you mean turn of all transition use below code:

*, *:before, *:after {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;        
    transition: none !important;
}

I guess your access is just by JavaScript so you can not access to :before or :after so just add * to CSSes to omit all transitions.

But some animations and lovely motions are made by transform translate CSS property method, so if you wanna omit all animations and motions, you must use below code:

*, *: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;
}

This code absolutely smash all of website UI but maybe help you to run your test.

Answer 2

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.