如何关闭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. 添加具有style-tag值id属性。
3. 做一串那个CSSes 我在另一个答案中回答了。
4. 将字符串放入或追加到style标记中。
5. 将style附加到DOM中的head标记。

现在让我们将上面的状态写成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);

使用此代码，您可以将我的另一个答案导入CSSes 到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。

但是有些动画和可爱的动作是通过transformtranslateCSS属性方法制作的，所以如果你想省略所有的动画和动作，你必须使用以下代码：

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

这段代码绝对粉碎了所有的网站 UI，但可能会帮助您运行测试。