Question

参考：

每当我需要运行测试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

您的问题标题是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，因此只需在* es中添加CSS即可全部省略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;
}

此代码绝对破坏了网站的所有UI，但也许可以帮助您运行测试。

Answer 2

对于您的确切问题，我在JavaScript Executor上又做了一个回答。让我们澄清一下JavaScript代码，

制作一个style标签元素。
为id属性添加style-tag值。
将我在另一个答案中回答的CSS串成一串。
将字符串放入或附加到style标记中。
在style中将head附加到DOM标签。

现在让我们将以上状态写为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();

希望这些代码对您有所帮助。

如何关闭CSS以更快地执行自动化测试？

2 个答案: