Fix QA selector class used to click on QA elements

app/views/layouts/nav/_dashboard.html.haml

@@ -6,8 +6,8 @@
     .dropdown-menu.projects-dropdown-menu
       = render "layouts/nav/projects_dropdown/show"
 
-  = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "hidden-xs qa-groups-link" }) do
-    = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', title: 'Groups' do
+  = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "hidden-xs" }) do
+    = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups qa-groups-link', title: 'Groups' do
       Groups
 
   = nav_link(path: 'dashboard#activity', html_options: { class: "visible-lg" }) do

qa/qa/page/base.rb

@@ -41,7 +41,7 @@ module QA
       end
 
       def click_element(name)
-        find(Page::Element.new(name).selector).click
+        find(Page::Element.new(name).selector_css).click
       end
 
       def self.path

qa/qa/page/element.rb

@@ -12,6 +12,10 @@ module QA
         "qa-#{@name.to_s.tr('_', '-')}"
       end
 
+      def selector_css
+        ".#{selector}"
+      end
+
       def expression
         if @pattern.is_a?(String)
           @_regexp ||= Regexp.new(Regexp.escape(@pattern))

qa/spec/page/element_spec.rb

@@ -1,11 +1,18 @@
 describe QA::Page::Element do
   describe '#selector' do
-    it 'transform element name into QA-specific selector' do
+    it 'transforms element name into QA-specific selector' do
       expect(described_class.new(:sign_in_button).selector)
         .to eq 'qa-sign-in-button'
     end
   end
 
+  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'
+    end
+  end
+
   context 'when pattern is an expression' do
     subject { described_class.new(:something, /button 'Sign in'/) }