動的要素の検証

私たちは、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

を続ける前に、GitLab QA を起動してMyPage をスキャンし、my_element とanother_element がページにあるかどうかを調べます。execute_stuff

をクリックします。

ソースを考えると…

def open_layer
  click_element(:my_element, Layer::MyLayer)
end

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

これは、テストを続ける前にレイヤーが確かにレンダリングされていることを意味します。