diff options
Diffstat (limited to 'doc/development/testing_guide/end_to_end')
3 files changed, 10 insertions, 14 deletions
diff --git a/doc/development/testing_guide/end_to_end/beginners_guide.md b/doc/development/testing_guide/end_to_end/beginners_guide.md index b57757c5aac..5fc18d7aeae 100644 --- a/doc/development/testing_guide/end_to_end/beginners_guide.md +++ b/doc/development/testing_guide/end_to_end/beginners_guide.md @@ -321,22 +321,22 @@ the **Issue Show** page already exists, add the `closed?` method. module Page::Project::Issue class Show view 'app/views/projects/issues/show.html.haml' do - element :closed_status_box + element 'closed-status-box' end def closed? - has_element?(:closed_status_box) + has_element?('closed-status-box') end end end ``` -Next, define the element `closed_status_box` within your view, so your Page Object +Next, define the element `closed-status-box` within your view, so your Page Object can see it. ```haml -#=> app/views/projects/issues/show.html.haml -.issuable-status-box.status-box.status-box-issue-closed{ ..., data: { qa_selector: 'closed_status_box' } } +.issuable-status-box.status-box.status-box-issue-closed{ ..., data: { testid: 'closed-status-box' } } ``` ## Run the spec diff --git a/doc/development/testing_guide/end_to_end/capybara_to_chemlab_migration_guide.md b/doc/development/testing_guide/end_to_end/capybara_to_chemlab_migration_guide.md index 64bb5df5db1..98484b7f2d6 100644 --- a/doc/development/testing_guide/end_to_end/capybara_to_chemlab_migration_guide.md +++ b/doc/development/testing_guide/end_to_end/capybara_to_chemlab_migration_guide.md @@ -95,12 +95,12 @@ end ### Element Naming Convention -Since the element type is preserved within the Page Library, there is no need to specify a `_field` or `_button` suffix to the data-qa-selector. +Since the element type is preserved within the Page Library, there is no need to specify a `_field` or `_button` suffix to the data-testid. ```html <!-- Before --> <input type="text" name="first-name" data-testid="first_name_field" /> -<input type="submit" name="continue" value="Continue" data-testid="continue_button" /> +<input type="submit" name="continue" value="Continue" data-testid="continue-button" /> <!-- After --> <input type="text" name="first-name" data-testid="first_name" /> diff --git a/doc/development/testing_guide/end_to_end/page_objects.md b/doc/development/testing_guide/end_to_end/page_objects.md index 812d2724b72..33f70c73c91 100644 --- a/doc/development/testing_guide/end_to_end/page_objects.md +++ b/doc/development/testing_guide/end_to_end/page_objects.md @@ -158,20 +158,16 @@ Things to note: - The name of the element and the `data-testid` must match and be either snake cased or kebab cased - If the element appears on the page unconditionally, add `required: true` to the element. See [Dynamic element validation](dynamic_element_validation.md) -- You may see `data-qa-selector` classes in existing Page Objects. We should prefer the [`data-testid`](#data-testid-vs-data-qa-selector) - method of definition over the `data-qa-selector` CSS class +- You should not see `data-qa-selector` classes in Page Objects. + We should use the [`data-testid`](#data-testid-vs-data-qa-selector) + method of definition ### `data-testid` vs `data-qa-selector` > Introduced in GitLab 16.1 -There are two supported methods of defining elements within a view. - -1. `data-testid` -1. `data-qa-selector` attribute - Any existing `data-qa-selector` class should be considered deprecated -and we should prefer the `data-testid` method of definition. +and we should use the `data-testid` method of definition. ### Dynamic element selection |