639.md

# Dynamic Element Validation

> 原文：[https://docs.gitlab.com/ee/development/testing_guide/end_to_end/dynamic_element_validation.html](https://docs.gitlab.com/ee/development/testing_guide/end_to_end/dynamic_element_validation.html)

*   [How it works](#how-it-works)
    *   [Navigation](#navigation)
    *   [Clicks](#clicks)
    *   [Required Elements](#required-elements)
        *   [Definition](#definition)
        *   [Application](#application)
*   [Examples](#examples)
    *   [Navigating](#navigating)
    *   [Clicking](#clicking)

# Dynamic Element Validation[](#dynamic-element-validation "Permalink")

我们设计了一种解决方案来解决常见的测试自动化问题，例如可怕的`NoSuchElementException` .

动态元素验证解决的其他问题是…

*   当我们用鼠标执行操作时，我们期望会发生一些事情.
*   当我们的测试导航到页面（或从页面导航）时，我们确保在继续测试之前我们位于期望的页面上.

## How it works[](#how-it-works "Permalink")

我们将页面上的用户操作解释为具有某种效果. 这些动作是

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

### Navigation[](#navigation "Permalink")

导航到页面时，有些元素将始终无条件地出现在页面上.

使用时进行动态元素验证

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

### Clicks[](#clicks "Permalink")

当我们在测试中执行单击时，我们期望会发生一些事情. 那可能是现在要出现在网页上的组件，或者是完全离开该页面的测试.

使用时进行动态元素验证

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

### Required Elements[](#required-elements "Permalink")

#### Definition[](#definition "Permalink")

First it is important to define what a “required element” is.

简而言之，必填元素是可见的 HTML 元素，它无需任何用户输入即可出现在 UI 组件上.

"可见"可以定义为

*   没有任何 CSS 阻止其显示. 例如： `display: none`或`width: 0px; height: 0px;` `width: 0px; height: 0px;`
*   能够与用户互动

" UI 组件"可以定义为

*   用户看到的任何内容
*   一个按钮，一个文本字段
*   位于页面上方的图层

#### Application[](#application "Permalink")

要求元素非常容易. 通过将`required: true`作为`element`的参数添加，您现在已经要求该元素在导航时显示在页面上.

## Examples[](#examples "Permalink")

鉴于...

```
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[](#navigating "Permalink")

给定[来源](#examples) ...

```
Runtime::Browser.visit(:gitlab, Page::MyPage)

execute_stuff 
```

在继续`execute_stuff`之前，将调用 GitLab 质量检查人员在`MyPage`上扫描`my_element`和`another_element`在页面上

### Clicking[](#clicking "Permalink")

给定[来源](#examples) ...

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

将在单击`my_element`时调用 GitLab 质量检查以确保`message_content`出现在 Layer 上.

这意味着在继续测试之前确实已渲染了 Layer.