• どのように動作するか
  • ナビゲーション
  • クリック
  • 必須要素
    • 定義
    • アプリケーション
• 使用例
  • ナビゲーティング
  • クリック

動的要素の検証

私たちは、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_element とanother_element がページ上にあるかどうかをスキャンします。execute_stuff

クリック

出所を考えると…

def open_layer
  click_element :my_element, Layer::MyLayer
end

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

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