Agile Software Engineering, OPA5, UI5, Test Automation Customer Agile Software Engineering, OPA5, UI5, Test Automation Agile Software Engineering Home in SAP: https://wiki.wdf.sap.corp/wiki/display/ASE/Agile+Software+Engineering+Home 大家好，我叫毛伟成来自LoB FIN Accounting Team, 今天我给大家带来的是敏捷开发中测试的自动化部分，UI5的一个测试工具OPA5 或者叫做OPA 希望这次讲座能抛砖引玉，给大家带来有价值的信息。

Agenda Why Test Automation? Test Automation Tool Positioning Tool Pyramid Introduce OPA5? What’s OPA5? It’s advantage and limitation. Write OPA Test. Mock Server & Mock Data Tools Static Code Check - ESLint Isolation framework - Sinon.js Code Coverage Demo

Why Test Automation? Reduce manual testing efforts Automated Tests enable fast feedback cycles • Keep the system running – avoid regressions • Build in quality – submit tested code • Write better code ( loosely coupled code, enables refactoring ) Keep your mainline healthy 为什么要进行测试的自动化？ 1. 减少手动测试的时间。 2. 自动化测试能够形成快速的反馈环机制。 2.1 保证系统持续运行在最新状态，避免过多的手动回归测试。 2.2 通过不断提交测试过的代码，改进代码质量 2.3 书写更加健壮的代码（松散耦合，持续重构） 3. 保证主线分支健康

Test Automation Tool Positioning (maintenance) effort * Optional for specific use cases Test Type Purpose Tools Examples System Tests Integration Tests Component Tests Unit Tests Scenario test for complete stack START, Selenium* Order to Cash Test of multiple components UI: START, Selenium*, eCATT non UI: eCATT oData Assistant Fiori App  backend communication Test of a high level API built on multiple units QUnit/OPA5 (frontend), ABAP Unit (backend), eCATT (backend) oData service, transaction, Fiori App (isolated) Rules: Don‘t test UI5 framework functionality! Just test the code in the UI layer Better let a human check the UX and visualization 测试自动化工具的定位 SAP目前有哪些自动化工具，他们的作用是什么？ 他们所在的位置？ 对于每个层级，开发和维护自动化测试的effort 增加。 实现测试中的一些规则 在UI5 或者Fiori 开发过程中，我们一般会用到四种类型的测试方法，他们分别是单元测试，组件测试，集成测试，系统测试。 大家可以看到从单元测试到系统测试，用户花费的Effort是逐渐增加的，而且手动参与的成分在增加。也可以认为粒度越细，自动化成分越高。 对于单元测试，主要是对单个功能实体进行测试，在JS中我们一般指的是单个方法或者是函数， 组件测试主要是对于一个控件或者是它的高层级的一些API的测试，这些API一般的单元测试不易测试。 集成测试主要是多个组件放在一起形成一定功能的测试。 系统测试主要是场景测试。 这里列举了各个层级用到的工具，我们今天主要讲的是OPA以及部分Qunit 大家可以看到主要是组件测试和单元测试。 对于测试自动化还有一些原则需要我们去遵守，1. 不要测试UI5 框架的功能，2. 仅仅测试项目UI 层相关的代码 3 对于用户体验和可视化方面的测试，最好借助于人工检查。 Single unit test QUnit (frontend), ABAP Unit (backend), Jasmin (HANA content) get entity manual & automated automated

SAPUI5 Application Testing What Should You Test? Availability of certain controls Controller logic, e.g. trigger actions and check if the controls appear (based on the databinding) and check if the model/backend received the request and check if data are correct What Should You NOT Test? DOM of UI5 controls (not API) All properties of a control, only the most relevant UI5 framework functionality 这个页面主要介绍了这些规则的具体体现。 1. 具体某个控件是否可以获得，包括可视性，可操作性等。 2. 控件的逻辑，触发的行为 3. 检查控件的基于数据绑定的表现，比如数据的展示是否和预期一致。 4. 检查模型后台数据的请求和发送是否和预期一致。 5. 检查数据的正确性。 不应该测试的内容： UI5 控件的DOM 控件的所有属性 UI5框架的功能

OPA or OPA5 is an API for SAPUI5 controls. What’s OPA? OPA or OPA5 is an API for SAPUI5 controls. It hides asynchronicity and eases access to SAPUI5 elements. This makes OPA especially helpful for testing user interactions, integration with SAPUI5, navigation, and data binding. The OPA5 library is JavaScript-based. This means that you can write your tests in the same language in which your app is written. BDD(Behaviour Driven-Development, the pattern is Given, When, Then) What’s OPA? https://wiki.wdf.sap.corp/wiki/display/risg/OPA5 acceptance testing is a test conducted to determine if the requirements of a specification or contract are met. 接下来我们要看看我们这个工具OPA5 的庐山真面目。那么什么是OPA5 呢，他的全称是One Page Acceptance Tests for UI5, 是用来测试UI5 以及Fiori的一些控件的行为的。 它隐藏了一些异步和方便访问UI5 元素的操作，这使得OPA5对于测试用户交互，UI5 组件集成，导航，数据绑定有特别的帮助。 OPA5 是构建在Qunit，UI5基础类库之上的，是一个存粹的Javascript based 的类库，所以和Fiori 或者UI5的语言同宗，开发设计非常方便。 OPA5 是一种基于行为驱动的测试方法，也就是我们所说的BDD, BDD 简单来说就是Given, When, Then的模式。 BDD? Given在某种场景下 When发生了事件 Then导致了什么结果(简称Given, When, Then)。Bill Wake总结为3A模式, Arrage , Action, Assert. 我系统通过这些介绍，大家能大体了解OPA是什么样的工具，能帮助我们做什么。

OPA5 and Fiori – Pilot Experiences Limitation of OPA Screen capturing Testing across more than one page Remote test execution End-to-end tests are not recommended with OPA due to authentication issues and fragility of test data Advantages of OPA tests Integration tests implemented in same programing language as application No need to learn an additional programing language (Java – for the Selenium tests) Test execution is faster than with Selenium Tests are executed in the same way as unit QUnit tests Work well with mock data from the SAP UI5 Mock Server Things to consider implementing OPA tests Investing in reusable OPA5 artefacts for usage within application tests (similar to Selenium page objects) Having solid mock data in good quality Using iframe support in order to provide URL parameters https://wiki.wdf.sap.corp/wiki/display/webapptoolkit/OPA+testing+conclusions 优点 OPA5是JS实现的，所以对于Fiori 或者UI5的项目，编程语言是一致的。方便测试代码的调用和集成，debug。 语言一致，所以基本不需要学习额外的语言。 使用异步模式，执行速度比Selenium， 以我个人的观点，还是比较慢的。特别是在debug模式下 和QUnit测试执行的方法基本一致。后面附录部分有一页链接专门说明如何运行的。 通过Mock Data可以和Mock Server一起工作得很好 支持TDD和BDD的测试方法 局限： 不支持屏幕捕获 无法支持多个页面同时测试 （少部分可以支持2个页面，比如launchpad 选择tile 跳转到app） 无法进行远程执行 E2E 不推荐使用OPA 主要考虑是认证和测试数据的不稳定性 所以一般使用Mock Server 的方式进行 实现OPA 测试需要考虑的设计问题 将可复用的一些方法集成到common中 为了保证测试的稳定性使用mock data 使用iframe支持在url中使用参数， hash测试用到。

Write OPA Test – How to? Import necessary library for OPA test QUnit and JUnit compatible Adapter Code coverage library QUnit Utility library OPA library and QUnit Adapter Create arrangements, actions, assertions. Configure the OPA test with 3A and namespace. Module tests and implement test cases. Given-When-Then Pattern introduce: http://martinfowler.com/bliki/GivenWhenThen.html BDD的定义：Given在某种场景下 When发生了事件 Then导致了什么结果(简称Given, When, Then)。 因为OPA是基于Qunit， 所以OPA测试首先需要导入qunit测试的类库，需要测试覆盖率数据请导入覆盖率qunit-coverage的类库，这个事可选的。 导入qunit的一些辅助工具 导入OPA5实现的类库，以及opa5适配qunit的类库。 实现arragements, actions, asserts (生产过程)， 将3a配置到OPA5中（配置过程），也就是匹配given, when , then，然后根据3A实现具体的测试用例（装配过程）. 用户可以根据测试的场景进行模块化。 OPA gives you the following three objects: Given = arrangements Documentation When = actions Then = assertions

Demo

Write OPA Test - Page Objects - Structuring OPA Tests A page object represents a significant part of the app (e.g. a view) knows about locators groups actions and assertions of this part at one place 什么是Page Object? 开发中如何命名？一般的模式如何？尽量语义化 Page Object是UI开发中一个重要概念，一般指一个应用中的一部分，比如一个View, 一个页面等。组件有一个唯一的定位标识符，也就是ID，我们可以将同一个Object Page的操作和断言放在一起。 大家可以看这个例子。我们把对测试的一系列准备作为arrangements, 一组相关的模拟用户的操作作为Actions , 一部分对实际和预期结果的比较作为Assertions

Write OPA Test - Arrangements, Action, Assertions Asserts Do the setup work Provide some special URL parameter... Other setup like functionality Wait for UI5 controls to come available and trigger actions on them: Wait for UI5 controls to get certain properties: 3A 的具体作用： Arrangements: 测试的准备，和java中的一些setup 概念类似，OPA会更复杂一些，包括启动URL参数，应用程序的启动或者从launchpage page点击tile进入应用。 Actions 主要是使用浏览器JS对控件事件触发，异步请求等实现。 Asserts 主要是对呈现的结果和预期结果进行比较和断言，得出测试结论。

waitFor(oOptions) Restrict the area of the control(s) (Seconds, 15) Set the timer and filter to the control check. (Milliseconds 400) 查找namesapce指定的View 中的 Id 根据控件类型和matcher 函数过滤出对应的空间，然后调用check函数检查是否满足要求，返回true或者false

Mock Server Documentation When to use? Isolates your app from the backend Simulates OData backend calls with Sinon.JS Transparent to data binding Supports randomly generated data (based on the service metadata) Supports mock data provided in .JSON files (use same module path as for metadata.xml) Each OData service needs its own mock server Can be extended with additional calls to mock function import calls 1. 什么是Mock Server？什么情况下使用Mock Server Mock Server是在本地客户端启动一个服务，来模拟服务器端提供的服务，在UI5和Fiori 的测试中，Mock Server需要提供metadata 和 对应的Mock Data的服务。在快速原型设计的时候，后台服务没有准备好，这个时候可以使用Mock Server来作为服务；在UI acceptance Test中可以使用Mock Server提供服务，用于隔离后台服务。 2. Mock Server有哪些Benefit. a. 隔离后台服务，使得测试的前端的数据稳定。 b. 使用Sinon.js 来模拟后台的Odata调用 c. 用户无需修改数据绑定, 测试阶段和开发阶段的代码一致。 d. 可以根据metadata辅助成产随机的测试数据. e. 用户可以自己设计以JSon 方式提供的Mock Data f. 每个Odata service都需要一个Mock 服务 g. 支持mock 函数导入调用的方式进行扩展 3. UI5 开发测试中如何使用Mock Server Documentation When to use? Demo UI without backend/connectivity UI acceptance tests (test the complete UI layer, but without backend)

Mock Data Create metadata.xml file. Call the metadata of the service in a browser and save it into a file. Create the .json file for mock data. Generate random mock data automatically based on services metadata. Created manually or saved from an OData service response. Implement the mock server code. Make use of the Mock data UI5 测试中设计Mock Data. 如何在Mock Server中调用Mock Data. 2.1 If you want to use the Mock data instead of the Server data, you just have to add ?responderOn=true to the URL.  2.2 To use the Mock data in Automated Testing, you have to write sap.ui.test.Opa5.prototype.iStartMyAppInAFrame("../<IndexPage>?responderOn=true"); into your iStartMyApp Arrangement. 3. Web IDE 中运行菜单参数的调整即可。 Documentation

Test isolation framework for JavaScript Sinon.js Test isolation framework for JavaScript Helps to create and install test doubles Supplies higher-level test doubles for timers and AJAX requests Documentation 测试替身： Mock：构建Mock 按照调用要求设置测试数据，模拟时钟等。 Stub: 构建一个Stub，直接设置函数调用返回值 Spies: 构建一个Spy 和原来的函数一致，通过执行监控函数执行的情况，执行次数，调用者，参数等 When to use? Sophisticated mocking, stubbing, spying Warning: do you really need sophisticated mocks and why?

Code Coverage Client-side instrumentation with Blanket Limitations Just add sap.ui.qunit.qunit-coverage Limitations Doesn’t work when OPA5 runs the application in an iFrame Idea: instrument your code server-side https://github.com/karma-runner/karma-coverage 什么是Code Coverage? Code Coverage的作用是什么? Test Cases 衡量Story的实现进度，Code Coverage衡量了Test Case 对代码中各种情况考虑的深度以及代码的调用域(如果代码中局部代码在所有Case考虑到的情况下仍然没有执行到，可以考虑这些代码是否是无用代码的可能性)

Simple UI5 App OPA Test Fiori Project OPA Test Mock Server & Mock Data Demo Simple UI5 App OPA Test Fiori Project OPA Test Mock Server & Mock Data

Thank you

Appendix

Appendix: Source Code in openui5 openui5 git repository APIs in UI5 docs QUnit library OPA5 Library

Appendix: OPA & QUnit Test Files Structure

Appendix: OPA testing Files Structure

Appendix: Sinon.JS Integration – Example: Stub Sinon.JS API  Spies: sinon.spy()  Stubs: sinon.stub()  Faking time: sinon.useFakeTimers()  ……

The Grid Drawing area Headline area White space