Dynamic Element Validation

原文：https://docs.gitlab.com/ee/development/testing_guide/end_to_end/dynamic_element_validation.html

• How it works
  • Navigation
  • Clicks
  • Required Elements
    • Definition
    • Application

• Examples
  • Navigating
  • Clicking

Dynamic Element Validation

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

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

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

How it works

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

• Navigation
• Clicks

Navigation

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

使用时进行动态元素验证

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

Clicks

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

使用时进行动态元素验证

click_element :my_element, Some::Page 

Required Elements

Definition

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

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

Examples

鉴于...

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

给定来源 ...

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

execute_stuff 

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

Clicking

给定来源 ...

def open_layer
  click_element :my_element, Layer::MyLayer
end 

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

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