動的要素の検証

私たちは、NoSuchElementExceptionのような一般的なテスト自動化の問題を解決するソリューションを考案しました。

動的要素のバリデーションが解決するその他の問題は…

  • マウスを使ってアクションを実行するとき、私たちは何かが起こることを期待します。
  • テストがページに移動する(あるいはページから移動する)場合、テストを続行する前に期待するページに移動していることを確認します。

どのように動作するか

私たちはページ上でのユーザーのアクションが何らかの効果を持つように解釈します。 これらのアクションは

ページがナビゲートされると、常に無条件でページに表示される要素があります。

を使用する場合、動的要素検証が行われます。

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

クリック

テスト内でクリックを実行するとき、私たちは何かが発生することを期待します。 その何かとは、コンポーネントがウェブページに表示されることかもしれませんし、テストがページから完全にナビゲートすることかもしれません。

を使用する場合、動的要素検証が行われます。

click_element :my_element, Some::Page

必須要素

定義

まず、「必須要素」とは何かを定義することが重要です。

簡単に言うと、必須要素は、ユーザー入力なしでUIコンポーネントに表示される可視HTML要素です。

「見える」とは

  • 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

MyPage を続行する前に、GitLab QA を起動し、my_elementanother_element がページ上にあるかどうかをスキャンします。execute_stuff

クリック

出所を考えると…

def open_layer
  click_element :my_element, Layer::MyLayer
end

をクリックすると、GitLab QA が起動し、my_elementをクリックしたときにmessage_content がレイヤーに表示されることを確認します。

これでレイヤーがレンダリングされたことが確認できます。