如何使用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值周围的报价。
• 结尾括号不一致 - 应该是“]”而不是“）”。