Happy Coding, Happy Life

Page Object Understanding

| Comments

什么是Page Object

Page Object是Selenium中提出的一种测试设计模式。在Web前端自动化测试的过程中,Page Object可以称得上是居家必备的良品之一。PageObject将与Web测试页面交互的行为封装在其内部,旨在将每个页面或者相似页面的功能封装,例如页面中需要测试的元素(按钮,输入框,标题等),这样,通过在测试中访问Page类的相应方法来获取页面相应的元素,从而巧妙的避免了当页面元素id或者位置变化时,需要修改测试代码的情况。

言而总之,总而言之,PageObject就是将Web页面元素的变化封装起来,提供API供外部测试代码调用,从而达到将测试代码于Web页面元素的变化解耦。

Page Object的优点

  • 将测试代码与页面元素的操作解耦
  • 将Web页面元素的访问统一化、规范化、结构化
  • 封装不同浏览器对元素访问的差异
  • 易于实现Web元素访问的DSL

对于小规模站点的Web自动化测试,直接使用Capybara之类的框架并不会出现问题。但对于业务复杂,功能完备的大规模Web站点自动化测试而言,如果不使用PageObject将测试代码于Web页面元素的访问解耦,而在测试代码中直接访问Web页面元素,不仅易造成冗余代码,还会导致测试集结构混乱,后期难于理解和维护。

Gizmo

在最近的一个项目中,我们使用Capybara进行Web自动化测试,同时使用Gizmo来完成PageObject的定义。 Gizmo出自REA Group之手,使用Nokogiri对Selenimu的Driver进行轻量级的封装,并定义自己的Page对象。

使用Gizmo时注意的要点:

  • PageObject可以是整个页面,也可是页面的某一小块。但都统称为Page Module。
  • PageObject被定义成module,而非class
  • PageObject的命名为page_with_, 而调用者则遵循on_page_with :的模式进行调用
  • PageObject使用define_action作为行为的定义,例如 点击button,填充form,输入文本等。
  • PageObject使用def selectors作为获取属性的定义,例如获取页面对象,获取文本等。

不过,Gizmo中也存在一些问题:

a) Page对象只对生成时的DOM元素有效。

如果DOM元素随后发生变化(例如Javascript操作DOM), 则无法捕获到。需要显示的重新更新PageObject对DOM元素的引用。

def refresh
  @document = Nokogiri::HTML(body)
end

另外,作者貌似已经不再维护Gizmo了,上次的更新要追溯到3年前了。所以如果有不爽的地方,要做好fork&customize的打算。 :(

Capybara-Page-Object(CPO)

了解完Gizmo,让我们来认识下Capybara-Page-Object。
除了包含Gizmo现有的大部分优点之外,CPO对开发者更加友好:

Page与Component共同使用

在CPO中,Page的定义通常是指整个页面。而对于页面的某一块功能或者布局,通常被定义为Component。
譬如,首页作为一个Page对象,可能会包含Login,BasicSearchForm,SearchResult等Component。
而搜索页面,作为Page对象,可能包含Login,BasicSearchForm以及AdvancedSearchForm等Component。 换句话说,一个Page是由多个Component组成,而Component(如果Element类似)则又可以被不同的Page重用。

对HTML元素的封装

在CPO中,实现了对HTML不同元素的分装。如Form,Image,List,ListItem, Select, Input等。

通过使用CPO封装后的HTML元素类,开发者可以更轻松的访问不同类型的HTML元素,而不必为每个心仪元素定义CSS或者Xpath查找策略。
如下是CapybaraPageObject::Form的定义,其中已经提供了对Form内buttons,inputs,selects等内元素的访问接口。

class Form < CapybaraPageObject::Element
    def fields
      r = ActiveSupport::OrderedHash.new
      r.merge! inputs
      r.merge! selects
      r.merge! textareas
    end

    def buttons
      r = []
      all('input').each do |element|
        input = Input.new(element)
        next unless input.button?
        r << element
      end
      all('button').each do |button|
        r << button
      end
      r
    end

    def inputs
      all('input').each_with_object(ActiveSupport::OrderedHash.new) do |input_tag, hash|
        input = Input.new(input_tag)
        next if input.button?
        if input.checkable?
          hash[input.key] = !! input.checked?
        else
          hash[input.key] = input_tag.value
        end
      end
    end

      def textareas
            all('textarea').inject(ActiveSupport::OrderedHash.new) do |result, element|
            textarea = Textarea.new(element)
            result.merge textarea.key => textarea.value
        end
    end

    def selects
        all('select').inject(ActiveSupport::OrderedHash.new) do |result, element|
            select = Select.new(element)
            result.merge select.key => select.value
        end
    end
end

有了这些封装类,在定义Component时需要做的逻辑就很简单了

module Pages
  module Components
    class SearchForm < CapybaraPageObject::Form

      def search(query)
        source.fill_in 'as_q',    :with => query
        source.click_button 'Search'
      end

    end
  end
end

然后再Page中使用Component时,只需传入Form对应的Selector即可。

module Pages
  module Search
    class Index < Pages::Base

      component(:search_form) do
        Components::SearchForm.new find('.advsearch')
      end

      def search(*args)
        search_form.search(*args)
      end
    end
  end
end

关于本篇提到的代码,如有兴趣,请参考我的cucumber-capybara示例

Comments

comments powered by Disqus