Dynamic Element Validation

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

Dynamic Element Validation

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

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

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

How it works

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

Navigation

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

使用时进行动态元素验证

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

Clicks

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

使用时进行动态元素验证

  1. 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

鉴于…

  1. class MyPage < Page::Base
  2.   view 'app/views/view.html.haml' do
  3.     element :my_element, required: true
  4.     element :another_element, required: true
  5.     element :conditional_element
  6.   end
  8.   def open_layer
  9.     click_element :my_element, Layer::MyLayer
  10.   end
  11. end
  13. class Layer < Page::Component
  14.   view 'app/views/mylayer/layer.html.haml' do
  15.     element :message_content, required: true
  16.   end
  17. end

Navigating

给定来源 …

  1. Runtime::Browser.visit(:gitlab, Page::MyPage)
  3. execute_stuff

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

Clicking

给定来源 …

  1. def open_layer
  2.   click_element :my_element, Layer::MyLayer
  3. end

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

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