2020-10-30 18:08:56 +00:00
---
stage: none
group: unassigned
2022-09-21 21:13:33 +00:00
info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/product/ux/technical-writing/#assignments
2020-10-30 18:08:56 +00:00
---
2019-06-04 23:42:37 +00:00
# Dynamic Element Validation
We devised a solution to solve common test automation problems such as the dreaded `NoSuchElementException` .
Other problems that dynamic element validations solve are...
- When we perform an action with the mouse, we expect something to occur.
2019-06-25 04:34:55 +00:00
- When our test is navigating to (or from) a page, we ensure that we are on the page we expect before
test continuation.
2019-06-04 23:42:37 +00:00
## How it works
We interpret user actions on the page to have some sort of effect. These actions are
- [Navigation ](#navigation )
- [Clicks ](#clicks )
### Navigation
2020-11-20 00:09:06 +00:00
When a page is navigated to, there are elements that always appear on the page unconditionally.
2019-06-04 23:42:37 +00:00
2019-06-25 04:34:55 +00:00
Dynamic element validation is instituted when using
2019-06-04 23:42:37 +00:00
```ruby
Runtime::Browser.visit(:gitlab, Some::Page)
```
### Clicks
2020-02-11 21:08:44 +00:00
When we perform a click within our tests, we expect something to occur. That something could be a component to now
2019-06-04 23:42:37 +00:00
appear on the webpage, or the test to navigate away from the page entirely.
Dynamic element validation is instituted when using
```ruby
2021-03-11 06:09:43 +00:00
click_element(:my_element, Some::Page)
2019-06-04 23:42:37 +00:00
```
### Required Elements
#### Definition
First it is important to define what a "required element" is.
2022-10-12 00:10:06 +00:00
A required element is a visible HTML element that appears on a UI component without any user input.
2019-06-04 23:42:37 +00:00
"Visible" can be defined as
2021-10-18 12:13:41 +00:00
- Not having any CSS preventing its display, for example, `display: none` or `width: 0px; height: 0px;`
2019-06-04 23:42:37 +00:00
- Being able to be interacted with by the user
"UI component" can be defined as
- Anything the user sees
- A button, a text field
- A layer that sits atop the page
#### Application
2020-02-11 21:08:44 +00:00
Requiring elements is very easy. By adding `required: true` as a parameter to an `element` , you've now made it
2019-06-04 23:42:37 +00:00
a requirement that the element appear on the page upon navigation.
## Examples
Given ...
```ruby
class MyPage < Page::Base
view 'app/views/view.html.haml' do
element :my_element, required: true
element :another_element, required: true
element :conditional_element
end
2019-06-25 04:34:55 +00:00
2019-06-04 23:42:37 +00:00
def open_layer
2021-03-11 06:09:43 +00:00
click_element(:my_element, Layer::MyLayer)
2019-06-04 23:42:37 +00:00
end
end
class Layer < Page::Component
view 'app/views/mylayer/layer.html.haml' do
element :message_content, required: true
end
end
```
### Navigating
Given the [source ](#examples ) ...
```ruby
Runtime::Browser.visit(:gitlab, Page::MyPage)
execute_stuff
```
2020-11-20 00:09:06 +00:00
invokes GitLab QA to scan `MyPage` for `my_element` and `another_element` to be on the page before continuing to
2019-06-25 04:34:55 +00:00
`execute_stuff`
2019-06-04 23:42:37 +00:00
### Clicking
Given the [source ](#examples ) ...
```ruby
def open_layer
2021-03-11 06:09:43 +00:00
click_element(:my_element, Layer::MyLayer)
2019-06-04 23:42:37 +00:00
end
```
2020-11-20 00:09:06 +00:00
invokes GitLab QA to ensure that `message_content` appears on
2019-06-04 23:42:37 +00:00
the Layer upon clicking `my_element` .
2020-11-20 00:09:06 +00:00
This implies that the Layer is indeed rendered before we continue our test.