动态元素验证

我们设计了一个解决方案来解决常见的测试自动化问题，比如令人头疼的 NoSuchElementException。

动态元素验证还能解决其他问题…

• 当我们执行鼠标操作时，我们期望某些事情发生。
• 当我们的测试正在导航到（或离开）某个页面时，我们在继续测试前确保我们处于期望的页面上。

动态元素验证的工作原理

我们解释页面上的用户操作会产生某种效果。这些操作包括

• 导航
• 点击

导航

当导航到一个页面时，有些元素总是会无条件地出现在页面上。

使用以下方法时会启用动态元素验证：

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

点击

当我们在测试中执行点击操作时，我们期望某些事情发生。这可能是某个组件现在出现在网页上，或者是测试完全离开当前页面。

使用以下方法时会启用动态元素验证：

click_element('my-element', Some::Page)

必需元素

定义

首先，重要的是要定义什么是"必需元素"。

必需元素是一个可见的 HTML 元素，它出现在 UI 组件上，无需任何用户输入。

“可见"可以定义为：

• 没有任何 CSS 阻止其显示，例如 display: none 或 width: 0px; height: 0px;
• 能够被用户交互

“UI 组件"可以定义为：

• 用户看到的所有内容
• 一个按钮、一个文本框
• 一个位于页面顶部的层

应用

要求元素非常简单。通过向 element 添加 required: true 作为参数，你就已经要求该元素在导航时出现在页面上。

示例

给定以下代码…

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

导航

给定 源代码 …

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

execute_stuff

这会触发 GitLab QA 扫描 MyPage，确保 my-element 和 another-element 在页面上，然后继续执行 execute_stuff

点击

给定 源代码 …

def open_layer
  click_element('my-element', Layer::MyLayer)
end

这会触发 GitLab QA 确保 message-content 在点击 my-element 后出现在 Layer 上。

这意味着在我们继续测试之前，Layer 确实已经被渲染了。