3 files changed, 17 insertions, 6 deletions
diff --git a/qa/qa/page/element.rb b/qa/qa/page/element.rb
index 7a01320901d..9e6fd2fdd4f 100644
--- a/qa/qa/page/element.rb
+++ b/qa/qa/page/element.rb
@@ -28,7 +28,7 @@ module QA
       end
 
       def selector_css
-        ".#{selector}"
+        %Q([data-qa-selector="#{@name}"],.#{selector})
       end
 
       def expression
@@ -40,7 +40,7 @@ module QA
       end
 
       def matches?(line)
-        !!(line =~ expression)
+        !!(line =~ /["']#{name}['"]|#{expression}/)
       end
     end
   end
diff --git a/qa/qa/page/main/menu.rb b/qa/qa/page/main/menu.rb
index 9c99e43d4c0..c98d85d7911 100644
--- a/qa/qa/page/main/menu.rb
+++ b/qa/qa/page/main/menu.rb
@@ -12,7 +12,7 @@ module QA
         view 'app/views/layouts/header/_default.html.haml' do
           element :navbar, required: true
           element :user_avatar, required: true
-          element :user_menu, '.dropdown-menu' # rubocop:disable QA/ElementWithPattern
+          element :user_menu, required: true
         end
 
         view 'app/views/layouts/nav/_dashboard.html.haml' do
@@ -82,7 +82,7 @@ module QA
         private
 
         def within_top_menu
-          page.within('.qa-navbar') do
+          within_element(:navbar) do
             yield
           end
         end
@@ -91,7 +91,7 @@ module QA
           within_top_menu do
             click_element :user_avatar
 
-            page.within('.dropdown-menu') do
+            within_element(:user_menu) do
               yield
             end
           end
diff --git a/qa/spec/page/element_spec.rb b/qa/spec/page/element_spec.rb
index f746fe06e40..20d4a00c020 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(%q([data-qa-selector="my_element"]))
+    end
+  end
 end