Reduce duplication in QA page elements-related code

4 files changed, 14 insertions, 3 deletions

diff --git a/qa/qa/page/base.rb b/qa/qa/page/base.rb
index d1641565bad..3f409f1ba03 100644
--- a/qa/qa/page/base.rb
+++ b/qa/qa/page/base.rb
@@ -41,7 +41,7 @@ module QA
       end
 
       def click_element(name)
-        find("qa-#{name.tr('_', '-')}").click
+        find(Page::Element.new(name).selector).click
       end
 
       def self.path
diff --git a/qa/qa/page/element.rb b/qa/qa/page/element.rb
index 23e1b10fe33..d8db40b1b5d 100644
--- a/qa/qa/page/element.rb
+++ b/qa/qa/page/element.rb
@@ -5,7 +5,11 @@ module QA
 
       def initialize(name, pattern = nil)
         @name = name
-        @pattern = pattern || "qa-#{@name.to_s.tr('_', '-')}"
+        @pattern = pattern || selector
+      end
+
+      def selector
+        "qa-#{@name.to_s.tr('_', '-')}"
       end
 
       def expression
diff --git a/qa/qa/scenario/test/sanity/selectors.rb b/qa/qa/scenario/test/sanity/selectors.rb
index d42dfcfa364..365eb3315f8 100644
--- a/qa/qa/scenario/test/sanity/selectors.rb
+++ b/qa/qa/scenario/test/sanity/selectors.rb
@@ -17,7 +17,7 @@ module QA
 
               STDERR.puts <<~EOS
                 GitLab QA sanity selectors validation test detected problems
-                your merge request!
+                with your merge request!
 
                 The purpose of this test is to make sure that GitLab QA tests,
                 that are entirely black-box, click-driven scenarios, do match
diff --git a/qa/spec/page/element_spec.rb b/qa/spec/page/element_spec.rb
index c665267b90e..a48f1f54a32 100644
--- a/qa/spec/page/element_spec.rb
+++ b/qa/spec/page/element_spec.rb
@@ -1,4 +1,11 @@
 describe QA::Page::Element do
+  describe '#selector' do
+    it 'transform element name into QA-specific selector' do
+      expect(described_class.new(:sign_in_button).selector)
+        .to eq 'qa-sign-in-button'
+    end
+  end
+
   context 'when pattern is an expression' do
     subject { described_class.new(:something, /button 'Sign in'/) }