Fix flaky wiki create test

There's an svg on the page that allows you to create a wiki page.
The svg takes a fraction of a second to load after which the
"Create your first page" button shifts up a bit. This can cause
 webdriver to miss the hit so we wait for the svg to load before
clicking the button.

Also update the elements used in the test to conform to our best
practice.

And replace `act` with `perform`

Finally, remove the `before` block and `login` method, making the
code slightly simpler.

8 files changed, 60 insertions, 35 deletions

diff --git a/app/views/projects/wikis/_form.html.haml b/app/views/projects/wikis/_form.html.haml
index 7d8826e540c..d1556dbd077 100644
--- a/app/views/projects/wikis/_form.html.haml
+++ b/app/views/projects/wikis/_form.html.haml
@@ -16,7 +16,7 @@
   .form-group.row
     .col-sm-12= f.label :title, class: 'control-label-full-width'
     .col-sm-12
-      = f.text_field :title, class: 'form-control', value: @page.title
+      = f.text_field :title, class: 'form-control qa-wiki-title-textbox', value: @page.title
       - if @page.persisted?
         %span.edit-wiki-page-slug-tip
           = icon('lightbulb-o')
@@ -31,7 +31,7 @@
     .col-sm-12= f.label :content, class: 'control-label-full-width'
     .col-sm-12
       = render layout: 'projects/md_preview', locals: { url: project_wiki_preview_markdown_path(@project, @page.slug) } do
-        = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea', placeholder: s_("WikiPage|Write your content or drag files here…")
+        = render 'projects/zen', f: f, attr: :content, classes: 'note-textarea qa-wiki-content-textarea', placeholder: s_("WikiPage|Write your content or drag files here…")
         = render 'shared/notes/hints'
 
       .clearfix
@@ -47,14 +47,14 @@
 
   .form-group.row
     .col-sm-12= f.label :commit_message, class: 'control-label-full-width'
-    .col-sm-12= f.text_field :message, class: 'form-control', rows: 18, value: commit_message
+    .col-sm-12= f.text_field :message, class: 'form-control qa-wiki-message-textbox', rows: 18, value: commit_message
 
   .form-actions
     - if @page && @page.persisted?
-      = f.submit _("Save changes"), class: 'btn-success btn'
+      = f.submit _("Save changes"), class: 'btn-success btn qa-save-changes-button'
       .float-right
         = link_to _("Cancel"), project_wiki_path(@project, @page), class: 'btn btn-cancel btn-grouped'
     - else
-      = f.submit s_("Wiki|Create page"), class: 'btn-success btn'
+      = f.submit s_("Wiki|Create page"), class: 'btn-success btn qa-create-page-button'
       .float-right
         = link_to _("Cancel"), project_wiki_path(@project, :home), class: 'btn btn-cancel'
diff --git a/app/views/shared/empty_states/_wikis.html.haml b/app/views/shared/empty_states/_wikis.html.haml
index df3308abe0d..73eedcc1dc9 100644
--- a/app/views/shared/empty_states/_wikis.html.haml
+++ b/app/views/shared/empty_states/_wikis.html.haml
@@ -2,7 +2,7 @@
 
 - if can?(current_user, :create_wiki, @project)
   - create_path = project_wiki_path(@project, params[:id], { view: 'create' })
-  - create_link = link_to s_('WikiEmpty|Create your first page'), create_path, class: 'btn btn-success', title: s_('WikiEmpty|Create your first page')
+  - create_link = link_to s_('WikiEmpty|Create your first page'), create_path, class: 'btn btn-success qa-create-first-page-link', title: s_('WikiEmpty|Create your first page')
 
   = render layout: layout_path, locals: { image_path: 'illustrations/wiki_login_empty.svg' } do
     %h4.text-left
diff --git a/app/views/shared/empty_states/_wikis_layout.html.haml b/app/views/shared/empty_states/_wikis_layout.html.haml
index a5f100e3469..d44017299b8 100644
--- a/app/views/shared/empty_states/_wikis_layout.html.haml
+++ b/app/views/shared/empty_states/_wikis_layout.html.haml
@@ -1,6 +1,6 @@
 .row.empty-state
   .col-12
-    .svg-content
+    .svg-content.qa-svg-content
       = image_tag image_path
   .col-12
     .text-content.text-center
diff --git a/qa/qa.rb b/qa/qa.rb
index 7aaf56bd51f..355034daec9 100644
--- a/qa/qa.rb
+++ b/qa/qa.rb
@@ -290,6 +290,7 @@ module QA
     #
     module Component
       autoload :ClonePanel, 'qa/page/component/clone_panel'
+      autoload :LazyLoader, 'qa/page/component/lazy_loader'
       autoload :LegacyClonePanel, 'qa/page/component/legacy_clone_panel'
       autoload :Dropzone, 'qa/page/component/dropzone'
       autoload :GroupsFilter, 'qa/page/component/groups_filter'
diff --git a/qa/qa/page/component/lazy_loader.rb b/qa/qa/page/component/lazy_loader.rb
new file mode 100644
index 00000000000..6f74a4691ba
--- /dev/null
+++ b/qa/qa/page/component/lazy_loader.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module QA
+  module Page
+    module Component
+      module LazyLoader
+        def self.included(base)
+          base.view 'app/assets/javascripts/lazy_loader.js' do
+            element :js_lazy_loaded
+          end
+        end
+      end
+    end
+  end
+end
diff --git a/qa/qa/page/label/index.rb b/qa/qa/page/label/index.rb
index 97ce8f0eba5..f0d323ca3b4 100644
--- a/qa/qa/page/label/index.rb
+++ b/qa/qa/page/label/index.rb
@@ -1,7 +1,11 @@
+# frozen_string_literal: true
+
 module QA
   module Page
     module Label
       class Index < Page::Base
+        include Component::LazyLoader
+
         view 'app/views/shared/labels/_nav.html.haml' do
           element :label_create_new
         end
@@ -10,10 +14,6 @@ module QA
           element :label_svg
         end
 
-        view 'app/assets/javascripts/lazy_loader.js' do
-          element :js_lazy_loaded
-        end
-
         def go_to_new_label
           # The 'labels.svg' takes a fraction of a second to load after which the "New label" button shifts up a bit
           # This can cause webdriver to miss the hit so we wait for the svg to load (implicitly with has_element?)
diff --git a/qa/qa/page/project/wiki/new.rb b/qa/qa/page/project/wiki/new.rb
index 2498af8600c..b90e03be36a 100644
--- a/qa/qa/page/project/wiki/new.rb
+++ b/qa/qa/page/project/wiki/new.rb
@@ -1,42 +1,58 @@
+# frozen_string_literal: true
+
 module QA
   module Page
     module Project
       module Wiki
         class New < Page::Base
+          include Component::LazyLoader
+
           view 'app/views/projects/wikis/_form.html.haml' do
-            element :wiki_title_textbox, 'text_field :title' # rubocop:disable QA/ElementWithPattern
-            element :wiki_content_textarea, "render 'projects/zen', f: f, attr: :content" # rubocop:disable QA/ElementWithPattern
-            element :wiki_message_textbox, 'text_field :message' # rubocop:disable QA/ElementWithPattern
-            element :save_changes_button, 'submit _("Save changes")' # rubocop:disable QA/ElementWithPattern
-            element :create_page_button, 'submit s_("Wiki|Create page")' # rubocop:disable QA/ElementWithPattern
+            element :wiki_title_textbox
+            element :wiki_content_textarea
+            element :wiki_message_textbox
+            element :save_changes_button
+            element :create_page_button
           end
 
           view 'app/views/shared/empty_states/_wikis.html.haml' do
-            element :create_link, 'Create your first page' # rubocop:disable QA/ElementWithPattern
+            element :create_first_page_link
+          end
+
+          view 'app/views/shared/empty_states/_wikis_layout.html.haml' do
+            element :svg_content
           end
 
           def go_to_create_first_page
-            click_link 'Create your first page'
+            # The svg takes a fraction of a second to load after which the
+            # "Create your first page" button shifts up a bit. This can cause
+            # webdriver to miss the hit so we wait for the svg to load before
+            # clicking the button.
+            within_element(:svg_content) do
+              has_element? :js_lazy_loaded
+            end
+
+            click_element :create_first_page_link
           end
 
           def set_title(title)
-            fill_in 'wiki_title', with: title
+            fill_element :wiki_title_textbox, title
           end
 
           def set_content(content)
-            fill_in 'wiki_content', with: content
+            fill_element :wiki_content_textarea, content
           end
 
           def set_message(message)
-            fill_in 'wiki_message', with: message
+            fill_element :wiki_message_textbox, message
           end
 
           def save_changes
-            click_on 'Save changes'
+            click_element :save_changes_button
           end
 
           def create_new_page
-            click_on 'Create page'
+            click_element :create_page_button
           end
         end
       end
diff --git a/qa/qa/specs/features/browser_ui/3_create/wiki/create_edit_clone_push_wiki_spec.rb b/qa/qa/specs/features/browser_ui/3_create/wiki/create_edit_clone_push_wiki_spec.rb
index a7d0998d42c..29589ec870a 100644
--- a/qa/qa/specs/features/browser_ui/3_create/wiki/create_edit_clone_push_wiki_spec.rb
+++ b/qa/qa/specs/features/browser_ui/3_create/wiki/create_edit_clone_push_wiki_spec.rb
@@ -3,22 +3,15 @@
 module QA
   context 'Create' do
     describe 'Wiki management' do
-      def login
-        Runtime::Browser.visit(:gitlab, Page::Main::Login)
-        Page::Main::Login.act { sign_in_using_credentials }
-      end
-
       def validate_content(content)
         expect(page).to have_content('Wiki was successfully updated')
         expect(page).to have_content(/#{content}/)
       end
 
-      before do
-        login
-      end
+      it 'user creates, edits, clones, and pushes to the wiki' do
+        Runtime::Browser.visit(:gitlab, Page::Main::Login)
+        Page::Main::Login.perform(&:sign_in_using_credentials)
 
-      # Failure reported: https://gitlab.com/gitlab-org/quality/nightly/issues/24
-      it 'user creates, edits, clones, and pushes to the wiki', :quarantine do
         wiki = Resource::Wiki.fabricate! do |resource|
           resource.title = 'Home'
           resource.content = '# My First Wiki Content'
@@ -27,7 +20,7 @@ module QA
 
         validate_content('My First Wiki Content')
 
-        Page::Project::Wiki::Edit.act { go_to_edit_page }
+        Page::Project::Wiki::Edit.perform(&:go_to_edit_page)
         Page::Project::Wiki::New.perform do |page|
           page.set_content("My Second Wiki Content")
           page.save_changes
@@ -41,7 +34,7 @@ module QA
           push.file_content = '# My Third Wiki Content'
           push.commit_message = 'Update Home.md'
         end
-        Page::Project::Menu.act { click_wiki }
+        Page::Project::Menu.perform(&:click_wiki)
 
         expect(page).to have_content('My Third Wiki Content')
       end