Dynamic Element Validation · Gitlab 中文文檔

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