Extend `data-qa-*` functionality to match on custom selection
Problem to solve
Given:
%ul.list
- [:a, :b, :c].each do |item|
%li= a.to_s
We have no good way in the data-qa-selector
to manage this, since if we used...
%ul.list
- [:a, :b, :c].each do |item|
%li{ data: { qa_selector: 'item' } }= item.to_s
would render...
<ul>
<li data-qa-selector="item">a</li>
<li data-qa-selector="item">b</li>
<li data-qa-selector="item">c</li>
</ul>
which means we can't determine the difference unless we match on text, which we shouldn't do.
Proposal
We extend on data-qa
to include a more extensible selection mechanism.
Something like:
%ul.list
- [:a, :b, :c].each do |item|
%li{ data: qa_selector: 'item', qa_content: a } }= index.to_s
element :item, content: 'a' #=> match [data-qa-selector='item'][data-qa-content='a']
The extensibility could be with the qa_*: ''
since we could match on anything.
{ data: { qa_index: 1 } }
and match on element :something, index: 1
Edited by Dan Davison