企业官网建设流程全解析

如何用page-object配合Cucumber写出BDD风格的UI测试

【免费下载链接】page-objectGem to implement PageObject pattern in watir-webdriver and selenium-webdriver项目地址: https://gitcode.com/gh_mirrors/pa/page-object

page-object是一款经典的 Ruby 页面对象模式实现库，能让你的 UI 自动化测试代码与页面结构彻底解耦。本文将以Cucumber + page-object为例，手把手教你搭建一套可读性强、易于维护的BDD 风格 UI 测试，即使你从未写过 Ruby 测试，也能在半小时内跑通第一个场景。无论是基于 Watir 还是 Selenium WebDriver，page-object 都能无缝支持，是新手入门 UI 自动化的理想选择。

为什么 BDD 风格 UI 测试要用 page-object

很多测试新手习惯把元素定位、操作逻辑直接堆在 Step Definitions 里，结果脚本越写越长、改一个按钮 ID 就要全局搜索替换。BDD 的核心思想是"用业务语言描述行为"，而page-object（页面对象模式）正是把"页面上有什么、能做什么"封装成独立类，让测试步骤只关心业务动作，不关心 HTML 细节。

page-object 的三大好处：

• 🧩解耦：页面结构调整时，只需改页面类，测试用例零改动
• 📖可读：Cucumber 特性文件像需求文档，业务人员也能看懂
• ♻️复用：同一页面对象可供多个场景共享，大幅减少重复代码

第一步：快速安装 page-object 测试环境

安装 page-object 非常简单，你只需要 Ruby 环境和两个 gem：

gem install page-object gem install cucumber gem install watir # 或 gem install selenium-webdriver

如果你要克隆项目源码自己研究，可以执行：

git clone https://gitcode.com/gh_mirrors/pa/page-object

安装完成后，在测试入口文件（如features/support/env.rb）中引入依赖并注册页面工厂，参考项目中的 env.rb 写法：

require 'page-object' World(PageObject::PageFactory)

World注册后，你就能在所有 Step Definitions 中直接使用visit_page、on_page等快捷方法。

第二步：用 page-object 定义页面对象

页面对象的核心就是"一个页面一个类"。以登录页为例，在类中声明元素访问器即可：

class LoginPage include PageObject page_url 'http://example.com/login' text_field(:username, id: 'username') text_field(:password, id: 'password') button(:login, value: '登录') def login_with(name, pwd) self.username = name self.password = pwd login end end

仅仅三行声明，page-object 就为你自动生成了username=、password=、login、username_element等一系列方法，你完全不需要手写 find_element。项目的 page.rb 就是一份真实的大型示例，展示了文本框、复选框、下拉框、表格等几十种元素的声明方式，非常适合照抄模仿。

page_url会额外生成goto方法，用于打开页面。还支持expected_title、expected_element等校验方法，可以在页面加载完成后自动验证是否进入正确页面。

第三步：编写 BDD 风格的 Cucumber 特性文件

BDD 的关键是特性文件要"像人话"。参考项目中的 check_box.feature，一个场景可以这样写：

功能: 登录 背景: 假如 我在登录页面 场景: 使用正确账号密码登录成功 当 我输入用户名 "cheezy" 和密码 "secret" 并且 我点击登录按钮 那么 我应该看到欢迎信息

注意，特性文件里绝不出现id、xpath 等元素定位信息，只用业务词汇描述，这正是 BDD 风格的 UI 测试与普通自动化脚本的最大区别。

第四步：编写 Step Definitions 调用页面对象

接下来把"业务语言"翻译成"页面对象动作"。因为 PageFactory 已注册，可以这样写：

假如(/^我在登录页面$/) do visit_page LoginPage end 当(/^我输入用户名 "([^"]*)" 和密码 "([^"]*)"$/) do |user, pwd| on_page(LoginPage).login_with user, pwd end 当(/^我点击登录按钮$/) do on_page(LoginPage).login end 那么(/^我应该看到欢迎信息$/) do on_page(HomePage) do |page| expect(page.welcome_message).to include '欢迎' end end

visit_page负责打开页面并返回页面对象，on_page负责在已打开的页面上执行操作，并自动把当前页面对象缓存到@current_page中。项目中的 check_box_steps.rb 展示了完整的步骤定义示例，可以看到每个步骤都极其简短。

第五步：用 PageFactory 管理页面跳转（进阶）

当测试流程跨多个页面时，navigate_to可以帮你按预设路由自动跳转。在env.rb中定义路由表：

PageObject::PageFactory.routes = { default: [ [LoginPage, :login_with, 'cheezy', 'secret'], [HomePage, :goto] ] }

然后在步骤中一句navigate_to HomePage就能按路由自动完成前置操作，具体实现可查阅 page_factory.rb。这一技巧在长流程回归测试中能显著减少重复代码。

第六步：让测试更健壮的三个小技巧

1. 统一等待策略：page-object 内置wait_until和wait_for_ajax方法（见 page-object.rb），处理异步加载页面时非常可靠
2. 批量填充表单：用populate_page_with方法，一次传入 Hash 即可批量填写文本框、下拉框和勾选复选框，实现细节在 page_populator.rb
3. 面向对象封装业务动作：像login_with这样把"多步操作"封装成高层方法，是页面对象模式的最佳实践，能让步骤定义保持一行一个动作

总结

page-object 配合 Cucumber 的组合，本质上是"页面对象模式 + BDD 框架"的黄金搭档：Cucumber 负责把测试写成需求文档，page-object 负责把页面封装成可复用的对象，两者结合后，你的 UI 测试会变得像文档一样清晰、像积木一样易拼装。从一个小登录页开始尝试吧，相信你会很快爱上这种 BDD 风格的 UI 测试方式。

【免费下载链接】page-objectGem to implement PageObject pattern in watir-webdriver and selenium-webdriver项目地址: https://gitcode.com/gh_mirrors/pa/page-object