如何使用css标识符和属性创建页面对象

Question

如何使用带有属性的css标识符定义页对象？

For example,
<div class="presc" date-range="3 months">3m</div>
<div class="presc selected" date-range="6 months">6m</div>
<div class="presc" date-range="1 year">1y</div>

如何使用属性名数据范围？

div(:date_range_3m, css:div.prescription[@data-range = '3 month')

Answer 1

你想要的访问者是：

div(:date_range_3m, css: 'div.presc[date-range~="3"][date-range~="months"]')  

关于变化/问题的一些注意事项：

• date-range="3 months"被认为是一个带有空格分隔的值列表的属性。对于这些类型的值，您只能与每个单独的单词进行比较。这就是为什么建议的选择器有[date-range~="3"][date-range~="months"]。请注意，这有一个问题，即它也将匹配date-range="months 3"和date-range="3 months some other values"。
• 类值是"presc“，而不是”处方“。
• 元素上的属性实际上是“日期范围”，而不是“数据范围”。
• 与XPath不同，CSS-选择器不以"@“作为属性的前缀。
• CSS值周围的引号缺失。
• 有一个不匹配的结尾括号--它应该是"]“而不是")”。