GitLab Fulfillment E2E Tests: Phase out `data-qa-selector` and replace it with `data-testid`
Now that https://gitlab.com/gitlab-org/quality/chemlab/-/merge_requests/36 has been merged to Chemlab, we can begin migrating over the remaining data-qa-selector
s used by Fulfillment E2E tests using GitLab pages to use data-testid
s instead.
Page Object Classes
GitLab
Found in gitlab/qa/lib/gitlab/page
:
-
GitLab::Page::Admin::Dashboard
| gitlab-org/gitlab!128387 (merged) -
GitLab::Page::Admin::Subscription
| gitlab-org/gitlab!128387 (merged) -
GitLab::Page::Group::Settings::Billing
| gitlab-org/gitlab!129719 (merged) -
GitLab::Page::Group::Settings::UsageQuotas
| gitlab-org/gitlab!130236 (merged) -
GitLab::Page::Main::Login
| gitlab-org/gitlab!130959 (merged) (removal- no longer in use) -
GitLab::Page::Main::SignUp
| gitlab-org/gitlab!130971 (merged) -
GitLab::Page::Subscriptions::New
| gitlab-org/gitlab!131445 (merged)
Found in gitlab/qa/qa/ee/page
:
-
QA::EE::Page::Admin::Settings::Component::AddLicense
| gitlab-org/gitlab!131309 (merged) -
QA::EE:Page::Admin::Subscription
| gitlab-org/gitlab!128387 (merged)
CustomersDot
Found in qa/vendor/gitlab/page
:
-
QA::Vendor::Gitlab::Page::Component::NavigationBar
| No changes needed -
QA::Vendor::Gitlab::Page::Component::OrderSummary
| https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/8246 -
QA::Vendor::Gitlab::Page::CheckoutPage
| No changes needed -
QA::Vendor::Gitlab::Page::GroupBillingPage
| No changes needed -
QA::Vendor::Gitlab::Page::GroupPage
| https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/8299 -
QA::Vendor::Gitlab::Page::LoginPage
| No changes needed -
QA::Vendor::Gitlab::Page::NewLicensePage
| https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/8231 -
QA::Vendor::Gitlab::Page::PricingPage
| No changes needed -
QA::Vendor::Gitlab::Page::ProfileBillingPage
| No changes needed -
QA::Vendor::Gitlab::Page::SubscriptionPage
| https://gitlab.com/gitlab-org/customers-gitlab-com/-/merge_requests/7984 -
QA::Vendor::Gitlab::Page::UsageQuotaPage
| No changes needed
Requirements
We will be standardizing on using kebab-case
for the data-testid
values. The GitLab page objects that do not use Chemlab are also changing the selector names from symbols to strings to allow for using kebab-case
, ex:
Before
view 'path/to/component.vue' do
element :example_selector
end
After
view 'path/to/component.vue' do
element 'example-selector'
end
We should also evaluate the feasibility of making a similar change for Chemlab elements.
General Migration Steps
For each GitLab page/group of related GitLab pages:
- Migrate
data-qa-selector
s todata-testid
s for the GitLab page(s) in the GitLab project - Migrate the corresponding GitLab page(s) in the CustomersDot framework to
data-testid
, if needed - Run affected CustomersDot and GitLab E2E tests locally against updated GitLab UI
- Open MRs in GitLab and CustomersDot projects
- Gain approval for both MRs
- Merge GitLab MR first
- Make an announcement in
#s_fulfillment_engineering
and#quality
Slack channels stating CustomersDot E2E tests may fail temporarily and what to expect - Merge CustomersDot MR once GitLab changes have deployed to Staging
Related discussions:
Edited by Valerie Burton