与Capybara一起获得边境风格

Question

与Capybara一起获得边境风格

我需要获得元素的边框样式.我尝试了以下代码:

sample = page.execute_script("
  var x = window.document.querySelector('#{path}');
  a = window.getComputedStyle(x, null).getPropertyValue('border');
  return a;
")                     
puts sample

Run Code Online (Sandbox Code Playgroud)

它打印为空.

(注意:元素的边框是 - 实心)

Answer 1

Jus*_* Ko 10

根据您之前的问题,我假设您使用的是selenium-webdriver.

本机selenium-webdriver元素具有检查计算样式的方法 - Element#css_value.

如果您有一个页面HTML:

<html>
    <body>
        <p style="border-style:solid;">A solid border.</p>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

然后你可以使用以下方式获得边框样式:

puts page.first('p').native.css_value('border-style')
#=> 'solid'

Run Code Online (Sandbox Code Playgroud)

请注意代码中:

Capybara使用定位所需的元素 page.first('p')
native 用于获取selenium-webdriver元素
css_value用于获取计算的样式.请注意,css_value方法必须传递参数'border-style'而不是简写'border'.

更新:

对于您的具体示例:

看来,如果使用简写的"border"属性,"border-style"属性将为空.相反,您必须使用特定的"border-bottom-style","border-left-style"等属性.
由于您知道元素的id,因此您可以使用Capybara元素 page.find_by_id('option')

考虑到上述情况,您可以使用以下方法检查计算的边框样式:

puts page.find_by_id('option').native.css_value('border-bottom-style')
#=> "solid"
puts page.find_by_id('option').native.css_value('border-left-style')
#=> "solid"
puts page.find_by_id('option').native.css_value('border-right-style')
#=> "solid"
puts page.find_by_id('option').native.css_value('border-top-style')
#=> "solid"

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，9 月前
查看次数：	3477 次
最近记录：	12 年，9 月前