Commit 9842152f authored by Marcin Sedlak-Jakubowski's avatar Marcin Sedlak-Jakubowski

Merge branch 'cngo-add-more-examples-to-ui-testing-docs' into 'master'

Add more examples to UI Testing docs

See merge request gitlab-org/gitlab!59385
parents 78824581 814b81bd
...@@ -362,20 +362,16 @@ The benefits of testing in this way are that: ...@@ -362,20 +362,16 @@ The benefits of testing in this way are that:
- It is less brittle, as it avoids querying by IDs, classes, and attributes, which are not visible to the user. - It is less brittle, as it avoids querying by IDs, classes, and attributes, which are not visible to the user.
We strongly recommend that you query by the element's text label instead of by ID, class name, or `data-testid`. We strongly recommend that you query by the element's text label instead of by ID, class name, or `data-testid`.
If needed, you can scope interactions within a specific area of the page by using `within`. If needed, you can scope interactions within a specific area of the page by using `within`.
As you will likely be scoping to an element such as a `div`, which typically does not have a label,
you may use a `data-testid` selector in this case.
##### Actions ##### Actions
Where possible, use more specific [actions](https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Node/Actions), such as the ones below. Where possible, use more specific [actions](https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Node/Actions), such as the ones below.
```ruby ```ruby
# bad
find(".group-name", text: group.name).click
find('.js-show-diff-settings').click
find('[data-testid="submit-review"]').click
find('input[type="checkbox"]').click
find('.search').native.send_keys('gitlab')
# good # good
click_button 'Submit review' click_button 'Submit review'
...@@ -391,6 +387,14 @@ uncheck 'Checkbox label' ...@@ -391,6 +387,14 @@ uncheck 'Checkbox label'
choose 'Radio input label' choose 'Radio input label'
attach_file('Attach a file', '/path/to/file.png') attach_file('Attach a file', '/path/to/file.png')
# bad - interactive elements must have accessible names, so
# we should be able to use one of the specific actions above
find('.group-name', text: group.name).click
find('.js-show-diff-settings').click
find('[data-testid="submit-review"]').click
find('input[type="checkbox"]').click
find('.search').native.send_keys('gitlab')
``` ```
##### Finders ##### Finders
...@@ -398,9 +402,6 @@ attach_file('Attach a file', '/path/to/file.png') ...@@ -398,9 +402,6 @@ attach_file('Attach a file', '/path/to/file.png')
Where possible, use more specific [finders](https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Node/Finders), such as the ones below. Where possible, use more specific [finders](https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Node/Finders), such as the ones below.
```ruby ```ruby
# bad
find('[data-testid="submit-review"]')
# good # good
find_button 'Submit review' find_button 'Submit review'
find_button 'Submit review', disabled: true find_button 'Submit review', disabled: true
...@@ -413,24 +414,26 @@ find_field 'Search projects', with: 'gitlab' # find the input field with text ...@@ -413,24 +414,26 @@ find_field 'Search projects', with: 'gitlab' # find the input field with text
find_field 'Search projects', disabled: true find_field 'Search projects', disabled: true
find_field 'Checkbox label', checked: true find_field 'Checkbox label', checked: true
find_field 'Checkbox label', unchecked: true find_field 'Checkbox label', unchecked: true
# acceptable when finding a element that is not a button, link, or field
find('[data-testid="element"]')
``` ```
##### Matchers ##### Matchers
Where possible, use more specific [matchers](https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Node/Matchers), such as the ones below. Where possible, use more specific [matchers](https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/RSpecMatchers), such as the ones below.
```ruby ```ruby
# bad
expect(find('[data-testid="submit-review"]')).to have_content(content)
expect(page).to have_selector('[data-testid="submit-review"]')
# good # good
expect(page).to have_button 'Submit review' expect(page).to have_button 'Submit review'
expect(page).to have_button 'Submit review', disabled: true
expect(page).to have_button 'Notifications', class: 'is-checked' # assert the "Notifications" GlToggle is checked
expect(page).to have_link 'UI testing docs' expect(page).to have_link 'UI testing docs'
expect(page).to have_link 'UI testing docs', href: docs_url # assert the link has an href expect(page).to have_link 'UI testing docs', href: docs_url # assert the link has an href
expect(page).to have_field 'Search projects' expect(page).to have_field 'Search projects'
expect(page).to have_field 'Search projects', disabled: true
expect(page).to have_field 'Search projects', with: 'gitlab' # assert the input field has text expect(page).to have_field 'Search projects', with: 'gitlab' # assert the input field has text
expect(page).to have_checked_field 'Checkbox label' expect(page).to have_checked_field 'Checkbox label'
...@@ -443,8 +446,40 @@ expect(page).to have_select 'Sort by', with_options: ['Created date', 'Due date' ...@@ -443,8 +446,40 @@ expect(page).to have_select 'Sort by', with_options: ['Created date', 'Due date'
expect(page).to have_text 'Some paragraph text.' expect(page).to have_text 'Some paragraph text.'
expect(page).to have_text 'Some paragraph text.', exact: true # assert exact match expect(page).to have_text 'Some paragraph text.', exact: true # assert exact match
expect(page).to have_current_path 'gitlab/gitlab-test/-/issues'
expect(page).to have_title 'Not Found'
# acceptable when a more specific matcher above is not possible
expect(page).to have_css 'h2', text: 'Issue title'
expect(page).to have_css 'p', text: 'Issue description', exact: true
expect(page).to have_css '[data-testid="weight"]', text: 2
expect(page).to have_css '.atwho-view ul', visible: true
```
##### Other useful methods
After you retrieve an element using a [finder method](#finders), you can invoke a number of
[element methods](https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Node/Element)
on it, such as `hover`.
Capybara tests also have a number of [session methods](https://rubydoc.info/github/teamcapybara/capybara/master/Capybara/Session) available, such as `accept_confirm`.
Some other useful methods are shown below:
```ruby
refresh # refresh the page
send_keys([:shift, 'i']) # press Shift+I keys to go to the Issues dashboard page
current_window.resize_to(1000, 1000) # resize the window
scroll_to(find_field('Comment')) # scroll to an element
``` ```
You can also find a number of GitLab custom helpers in the `spec/support/helpers/` directory.
#### Live debug #### Live debug
Sometimes you may need to debug Capybara tests by observing browser behavior. Sometimes you may need to debug Capybara tests by observing browser behavior.
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment