summaryrefslogtreecommitdiff
path: root/doc/development/testing_guide/end_to_end/dynamic_element_validation.md
blob: f7b3ca8bc89d73505dca2f06e1a1d95e11d2ba64 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
# 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.
- When our test is navigating to (or from) a page, we ensure that we are on the page we expect before 
test continuation.

## How it works

We interpret user actions on the page to have some sort of effect. These actions are

- [Navigation](#navigation)
- [Clicks](#clicks)

### Navigation

When a page is navigated to, there are elements that will always appear on the page unconditionally.

Dynamic element validation is instituted when using 

```ruby
Runtime::Browser.visit(:gitlab, Some::Page)
```

### Clicks

When we perform a click within our tests, we expect something to occur.  That something could be a component to now 
appear on the webpage, or the test to navigate away from the page entirely.

Dynamic element validation is instituted when using

```ruby
click_element :my_element, Some::Page
```

### Required Elements

#### Definition

First it is important to define what a "required element" is.

Simply put, a required element is a visible HTML element that appears on a UI component without any user input.

"Visible" can be defined as

- Not having any CSS preventing its display. E.g.: `display: none` or `width: 0px; height: 0px;`
- 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

Requiring elements is very easy.  By adding `required: true` as a parameter to an `element`, you've now made it
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
  
  def open_layer
    click_element :my_element, Layer::MyLayer
  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
```

will invoke GitLab QA to scan `MyPage` for `my_element` and `another_element` to be on the page before continuing to
`execute_stuff` 

### Clicking

Given the [source](#examples) ...

```ruby
def open_layer
  click_element :my_element, Layer::MyLayer
end
```

will invoke GitLab QA to ensure that `message_content` appears on
the Layer upon clicking `my_element`.

This will imply that the Layer is indeed rendered before we continue our test.