如何关闭CSS以加快自动化测试的执行速度？

Question

参考:

1. 临时禁用CSS过渡效果的最简洁方法是什么？
2. http://onezeronull.com/2016/10/06/disable-css-transitions-and-animations-temporarily-or-permanently/

每当我需要运行我使用的测试JavaScript JavascriptExecutor时,上面的博客都没有说明如何使用它.

我试过了:

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

但它对我没有任何作用.

编辑:

我试过@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

我为你的确切问题提出了另一个答案JavaScript Executor.让我们澄清JavaScript代码,

1. 制作style标签元素.
2. 添加id带有style-tag值的属性.
3. CSS我在另一个答案中回答了这一串.
4. 将字符串放入或附加到style标记中.
5. 将标签附加style到.headDOM

现在让我们将上述状态写入JavaScript代码:

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

有了这个代码,你可以导入我的另一个答案CSS下载到DOM.所以你可以把下面的字符串放到你的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);"

如果你想恢复这个动作,只需使用:

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

希望这些代码可以帮到你.

Answer 2

你的问题标题是How to turn of CSS什么意思？如果您的意思是在代码下方使用所有过渡使用:

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

我猜您的访问权限只是JavaScript因为您无法访问:before或:after只是添加*到CSSes以省略所有transitions.

但是一些动画和可爱的动作是通过transform translate CSS属性方法制作的,所以如果你想省略所有的动画和动作,你必须使用下面的代码:

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

这段代码绝对粉碎了所有网站用户界面,但也许可以帮助您运行测试.