Introduce data-qa-selector to supplant .qa-class

In order to break away from using CSS classes as
our primary method of element identification, we
need to provide the ability to search for data
attributes.

Make Test::Sanity::Selectors now work

Utilize regex to match on literal strings of the element name

Suggest the data-qa-selector pattern vs the qa-

Add data-qa-selector to login page to start

We need a page that is heavily used in order to be
confident that this functionality works. Let's start
with the Login page

Use appropriate HAML data tag practices

1 files changed, 12 insertions, 1 deletions

diff --git a/qa/spec/page/element_spec.rb b/qa/spec/page/element_spec.rb
index f746fe06e40..87c9fbf74a3 100644
--- a/qa/spec/page/element_spec.rb
+++ b/qa/spec/page/element_spec.rb
@@ -11,7 +11,7 @@ describe QA::Page::Element do
   describe '#selector_css' do
     it 'transforms element name into QA-specific clickable css selector' do
       expect(described_class.new(:sign_in_button).selector_css)
-        .to eq '.qa-sign-in-button'
+        .to include('.qa-sign-in-button')
     end
   end
 
@@ -49,6 +49,10 @@ describe QA::Page::Element do
     it 'does not match if QA selector is not there' do
       expect(subject.matches?('some_name selector')).to be false
     end
+
+    it 'matches when element name is specified' do
+      expect(subject.matches?('data:{qa:{selector:"some_name"}}')).to be true
+    end
   end
 
   describe 'attributes' do
@@ -106,4 +110,11 @@ describe QA::Page::Element do
       end
     end
   end
+
+  describe 'data-qa selectors' do
+    subject { described_class.new(:my_element) }
+    it 'properly translates to a data-qa-selector' do
+      expect(subject.selector_css).to include("[data-qa-selector='my_element']")
+    end
+  end
 end