Question

在Watir中，我如何更改DOM元素的类？实际上我需要删除元素中的一个类（三个）？

我已经尝试了许多可能的解决方案，但无法让它们中的任何一个起作用。什么都有帮助。

Answer 1

由于普通用户不会直接更改元素的类，因此Watir没有提供直接执行此操作的方法。但是，由于可以使用Javascript删除类，因此可以通过execute_script方法执行此操作。

假设我们有一个包含三个类的文本的页面 - 一个用于使文本变大，一个用于使文本变为红色，一个用于使文本变为粗体：

<html>
  <head>
    <style>
      .label {font-size: 14em;}
      .required {font-weight: bold;}
      .error {color: red;}
    </style>
  </head>
  <body>
    <span class="label required error">text</span>
  </body>
</html>

我们可以通过对页面执行Javascript来删除其中一个类，比如使文本变为红色的类：

# Locate the element in Watir
element = browser.span

# Check that the text's original color is red
p element.style('color')
#=> "rgba(255, 0, 0, 1)" (red)

# Execute Javascript to remove the required class, which makes the text red
browser.execute_script('arguments[0].classList.remove("error");', element)

# Check that the text's new colour is now black
p element.style('color')
#=> "rgba(0, 0, 0, 1)" (black)

classList方法仅在某些浏览器版本中受支持。我相信Chrome / Firefox已经支持它很长一段时间了，因为IE至少需要10版本。如果你需要支持旧的浏览器，你也可以进行字符串替换：

browser.execute_script('arguments[0].className = arguments[0].className.replace( /(?:^|\s)error(?!\S)/ , "" )', element)

如果有可用的话，也可以使用JQuery。

请注意，在execute_script中，我们使用Watir / Selenium的特殊arguments数组，以便我们可以将Watir元素传递给Javascript。我发现这对于定位元素更容易，但如果您愿意，也可以使用Javascript找到该元素。

Ruby Watir，如何更改DOM元素的类？

1 个答案: