summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorddavison <ddavison@gitlab.com>2019-05-29 16:47:53 -0700
committerddavison <ddavison@gitlab.com>2019-07-10 16:09:43 -0700
commit390e0d8906c066996e8bbb14aa5824643f9798f8 (patch)
tree8b220d1d2e0770bc96cc958ce624043e1ae0885e
parent48fa47e07d54979b70704beb16ea55548f2190c4 (diff)
downloadgitlab-ce-390e0d8906c066996e8bbb14aa5824643f9798f8.tar.gz
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
-rw-r--r--app/views/devise/sessions/_new_base.html.haml6
-rw-r--r--app/views/layouts/devise.html.haml2
-rw-r--r--app/views/layouts/header/_default.html.haml2
-rw-r--r--qa/qa/page/element.rb4
-rw-r--r--qa/spec/page/element_spec.rb13
-rw-r--r--rubocop/cop/qa/element_with_pattern.rb2
6 files changed, 20 insertions, 9 deletions
diff --git a/app/views/devise/sessions/_new_base.html.haml b/app/views/devise/sessions/_new_base.html.haml
index 7dacd0b1d72..2f10f08c839 100644
--- a/app/views/devise/sessions/_new_base.html.haml
+++ b/app/views/devise/sessions/_new_base.html.haml
@@ -1,10 +1,10 @@
= form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'new_user gl-show-field-errors', 'aria-live' => 'assertive'}) do |f|
.form-group
= f.label "Username or email", for: "user_login", class: 'label-bold'
- = f.text_field :login, class: "form-control top qa-login-field", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required."
+ = f.text_field :login, class: "form-control top", autofocus: "autofocus", autocapitalize: "off", autocorrect: "off", required: true, title: "This field is required.", data: { qa_selector: 'login_field' }
.form-group
= f.label :password, class: 'label-bold'
- = f.password_field :password, class: "form-control bottom qa-password-field", required: true, title: "This field is required."
+ = f.password_field :password, class: "form-control bottom", required: true, title: "This field is required.", data: { qa_selector: 'password_field' }
- if devise_mapping.rememberable?
.remember-me
%label{ for: "user_remember_me" }
@@ -17,4 +17,4 @@
= recaptcha_tags
.submit-container.move-submit-down
- = f.submit "Sign in", class: "btn btn-success qa-sign-in-button"
+ = f.submit "Sign in", class: "btn btn-success", data: { qa_selector: 'sign_in_button' }
diff --git a/app/views/layouts/devise.html.haml b/app/views/layouts/devise.html.haml
index ff3410f6268..e9a4a068599 100644
--- a/app/views/layouts/devise.html.haml
+++ b/app/views/layouts/devise.html.haml
@@ -1,7 +1,7 @@
!!! 5
%html.devise-layout-html{ class: system_message_class }
= render "layouts/head"
- %body.ui-indigo.login-page.application.navless.qa-login-page{ data: { page: body_data_page } }
+ %body.ui-indigo.login-page.application.navless{ data: { page: body_data_page, qa_selector: 'login_page' } }
= header_message
.page-wrap
= render "layouts/header/empty"
diff --git a/app/views/layouts/header/_default.html.haml b/app/views/layouts/header/_default.html.haml
index f9ee6f42e23..36ae24fc4bf 100644
--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -5,7 +5,7 @@
- else
- search_path_url = search_path
-%header.navbar.navbar-gitlab.qa-navbar.navbar-expand-sm.js-navbar
+%header.navbar.navbar-gitlab.navbar-expand-sm.js-navbar{ data: { qa_selector: 'navbar' } }
%a.sr-only.gl-accessibility{ href: "#content-body", tabindex: "1" } Skip to content
.container-fluid
.header-content
diff --git a/qa/qa/page/element.rb b/qa/qa/page/element.rb
index 7a01320901d..f9aa9cc6377 100644
--- a/qa/qa/page/element.rb
+++ b/qa/qa/page/element.rb
@@ -28,7 +28,7 @@ module QA
end
def selector_css
- ".#{selector}"
+ "[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/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
diff --git a/rubocop/cop/qa/element_with_pattern.rb b/rubocop/cop/qa/element_with_pattern.rb
index d14eeaaeaf3..f7debf13151 100644
--- a/rubocop/cop/qa/element_with_pattern.rb
+++ b/rubocop/cop/qa/element_with_pattern.rb
@@ -30,7 +30,7 @@ module RuboCop
return if args.first.nil?
args.first.each_node(:str) do |arg|
- add_offense(arg, message: MESSAGE % "qa-#{element_name.value.to_s.tr('_', '-')}")
+ add_offense(arg, message: MESSAGE % "data-qa-selector=\"#{element_name.value}\"")
end
end