welcome selenium · 2016-12-11 · ui自动测试 •ui testing •end to end testing...
TRANSCRIPT
![Page 1: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/1.jpg)
welcome
高可维护性Selenium自动化实践
王成斌(Mark)
![Page 2: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/2.jpg)
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
![Page 3: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/3.jpg)
UI自动测试的问题?• 稳定性差
• 动态页面(Html5, ajax, require.js, AngularJS, React)• Page Ready无法判断• 多浏览器问题/多平台• Action模拟• 测试运行环境
• 维护成本高• UI变化• 设计变更
• 实现成本高• 选择的方式,架构设计• 记录/回放
代价 模式选择
稳定可靠稳定
维护 应对变化
![Page 4: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/4.jpg)
如何优化,改善这些问题?
Selenium
Selenium
Extension
Component
Page Objects
Component
Test steps
Business process Abstract
Script
End Test Script
![Page 5: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/5.jpg)
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
![Page 6: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/6.jpg)
Selenium Extension
• 提升稳定性• 动态查询元素(WebDriverWait)
• 每次UI Action后检查等待Ajax调用完成
• 所有的等待时间可以被配置(根据产品的网络情况)
• 尽量模拟Native的UI Actions• 多浏览器,多平台兼容性问题
• Upload
![Page 7: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/7.jpg)
Selenium Extension
![Page 8: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/8.jpg)
Selenium Extension
Action
Detect Ajax
User Action
![Page 9: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/9.jpg)
UI组件化(Component)
• Web技术的飞速发展• Angular, React, Vue, Bootstrap, 响应式布局
• 产品代码的组件化提升代码的维护性,及代码的复用性
• 领域软件的Web化
• 企业级应用的普遍化
![Page 10: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/10.jpg)
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
![Page 11: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/11.jpg)
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>
![Page 12: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/12.jpg)
UI组件化(Component)
• 测试UI组件化• 封装变化
• 易用和可复用性
• 业务与UI实现的分离
• 如何封装通用的UI组件• 定义组件的用户接口
• 发现组件的多种UI实现模式
• 将模式封装于组件内部,模式可以增加,修改,接口不变
![Page 13: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/13.jpg)
Checkbox Component
![Page 14: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/14.jpg)
Checkbox Component
![Page 15: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/15.jpg)
UI组件化(Component)
![Page 16: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/16.jpg)
UI组件化(Page Object)
• Page Object模式• PO的主要价值体现在对界面交互细节的封装,这样可以使测试案例可以更关注与业务而非界面细节,提高测试案例的可读性。
• Page Identifier• 定义页面唯一标识器(Element),通过检查唯一标识元素的加载状态判断页面是否加载完成。
• 提升测试的稳定性
![Page 17: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/17.jpg)
![Page 18: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/18.jpg)
Test Steps
• 提炼和封装业务行为• 业务是和UI相关绑定的
• 业务会根据需求的变化而改变
• 业务抽象需要力度,不能过小,也不能过大
![Page 19: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/19.jpg)
Test Steps
![Page 20: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/20.jpg)
Test Steps
• 如何设计忘记密码/找回密码这个业务?
![Page 21: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/21.jpg)
Test Script
Test Script
Cucumber
Keyword
Unit
![Page 22: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/22.jpg)
Test Process
• Wait Find Element
• Detect Ajax status
• Extend functionsSelenium
• Common
• package
• Steady
• Usability
Component
• Abstract
• Steady
• ReusableTest steps
• Simple
• Readability
• Data DriveTest Scripts
![Page 23: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/23.jpg)
UI自动化测试
• 自动测试是一个系统的工程
• 建造一个高可维护的工程需要很多的工程知识
• 封装,适配变化的内容
• 让脚本和数据与UI隔离
• 让测试更加智能
![Page 24: welcome Selenium · 2016-12-11 · UI自动测试 •UI Testing •End to end testing •Black-Boxing testing •测试用例容易设计/ ... Test Script Cucumber Keyword Unit. Test](https://reader036.vdocuments.mx/reader036/viewer/2022081505/5f12d5f230b3c41afc02cae5/html5/thumbnails/24.jpg)
Questions?
THANK YOU