welcome

高可维护性Selenium自动化实践

王成斌(Mark)

UI自动测试• UI Testing

• End to end testing• Black-Boxing testing• 测试用例容易设计/理解• 可以基于用户案例设计• 技术了解程度要求较低

• Service/API Testing• No End to end testing• White/Gray-Boxing testing• 仅能测试系统的局部可用性• 需要了解系统架构及实现细节• 复杂的数据结构不太容易Mock• 对测试人员要求较高• 建议：仅考虑公开接口的测试

• Unit Testing• 与产品的数据及实现紧绑定• 用户场景Mock复杂度较高• 开发人员维护

UI

Service

Unit

Browser

HTML5, Angular JS

Network

Service/API/Database

End-to-end testing

UI自动测试的问题？• 稳定性差

• 动态页面（Html5, ajax, require.js, AngularJS, React）• Page Ready无法判断• 多浏览器问题/多平台• Action模拟• 测试运行环境

• 维护成本高• UI变化• 设计变更

• 实现成本高• 选择的方式，架构设计• 记录/回放

代价 模式选择

稳定可靠稳定

维护 应对变化

如何优化，改善这些问题？

Selenium

Selenium

Extension

Component

Page Objects

Component

Test steps

Business process Abstract

Script

End Test Script

Selenium Extension

Selenium

Execute Script

Virtual

Element

依赖注入

Actions

Native Actions

Selenium Actions

JavaScript Actions

JavaScript Objects

Assertion

JQuery

Performance

Component Factory

Should js

ByContentText

Globalization

Mock Alert

Snapshot

Selenium Extension

• 提升稳定性• 动态查询元素(WebDriverWait)

• 每次UI Action后检查等待Ajax调用完成

• 所有的等待时间可以被配置（根据产品的网络情况）

• 尽量模拟Native的UI Actions• 多浏览器，多平台兼容性问题

• Upload

Selenium Extension

Selenium Extension

Action

Detect Ajax

User Action

UI组件化（Component）

• Web技术的飞速发展• Angular, React, Vue, Bootstrap, 响应式布局

• 产品代码的组件化提升代码的维护性，及代码的复用性

• 领域软件的Web化

• 企业级应用的普遍化

UI组件化（Component）Component

UI Control

Editor Checkbox

Radio box

List

List<T>

Combo box

List Checkbox

Grid Tree View

Page Object

Login Page Master Page

Design Page

Dashboard Page

Preview Page

UI组件化（Component）<p><input type="checkbox" value="Car" checked="checked"/>I have a car</p>

<div class="send-email-option-div c-checkbox"><input checked="checked" id="send-email-input" type="checkbox"><label for="send-email-input">

:: before"Send an invitation through e-mail“

</label></div>

<div class=“checkbox"><div class="select-header checked"></div><div class="name-header header-cell">

<span>Name</span></div>

</div>

UI组件化（Component）

• 测试UI组件化• 封装变化

• 易用和可复用性

• 业务与UI实现的分离

• 如何封装通用的UI组件• 定义组件的用户接口

• 发现组件的多种UI实现模式

• 将模式封装于组件内部，模式可以增加，修改，接口不变

Checkbox Component

Checkbox Component

UI组件化（Component）

UI组件化（Page Object）

• Page Object模式• PO的主要价值体现在对界面交互细节的封装，这样可以使测试案例可以更关注与业务而非界面细节，提高测试案例的可读性。

• Page Identifier• 定义页面唯一标识器（Element），通过检查唯一标识元素的加载状态判断页面是否加载完成。

• 提升测试的稳定性

Test Steps

• 提炼和封装业务行为• 业务是和UI相关绑定的

• 业务会根据需求的变化而改变

• 业务抽象需要力度，不能过小，也不能过大

Test Steps

Test Steps

• 如何设计忘记密码/找回密码这个业务？

Test Script

Test Script

Cucumber

Keyword

Unit

Test Process

• Wait Find Element

• Detect Ajax status

• Extend functionsSelenium

• Common

• package

• Steady

• Usability

Component

• Abstract

• Steady

• ReusableTest steps

• Simple

• Readability

• Data DriveTest Scripts

UI自动化测试

• 自动测试是一个系统的工程

• 建造一个高可维护的工程需要很多的工程知识

• 封装，适配变化的内容

• 让脚本和数据与UI隔离

• 让测试更加智能

Questions?

THANK YOU