Enable JavaScript to test the new Vue Password component
The password field has been replaced by a Vue component in all the sign-in pages. We want the Vue component to be exercised when running the tests. In order to accomplish that, we should do the following three things:
- In the HAML, convert the password field to a dummy/placeholder input field (without name, QA or testid selector)
-
Add the Vue component to the QA selector list: https://gitlab.com/gitlab-org/gitlab/-/blob/7a656bbe58c0cdb677ad2e572794c470745938cf/qa/qa/page/main/login.rb#L21(apparently it is not needed) - Enable JS in all the tests that check the sign-in pages.
The following discussion from !120137 (merged) should be addressed:
-
@eduardosanz started a discussion: (+4 comments) issue: I am not comfortable keeping the password field in HAML.
In Add reveal-conceal password option (!115357 - merged), we replaced the password field by a generic input field that did not have any QA or testid attributes. That way we make sure that the tests are exercising the Vue component not the HAML password field. As a consequence, maybe we will need to enable JavaScript for some tests needs.
%input.form-control.gl-form-input.js-password{ data: { id: "#{resource_name}_password", qa_selector: 'password_field', testid: 'password-field', name: "#{resource_name}[password]" } }
The HAML for this
password_field
QA selector has to be replaced by the Vue component: https://gitlab.com/gitlab-org/gitlab/-/blob/7a656bbe58c0cdb677ad2e572794c470745938cf/qa/qa/page/main/login.rb#L21