干货 | 携程机票前端UI自动化与持续集成升级实践

作者简介

 

JinG、YuWang，携程前端开发工程师，负责机票主流程预定React Native技术栈相关开发工作。

一、前言

随着携程机票APP全流程由Native技术栈转向RN（React Native，以下均称RN），同时引入了BDD的敏捷开发模式，以应对日益增长的产品需求。高速的开发迭代过程中，如何确保稳定且可持续的交付质量，显得尤为重要。本篇旨在介绍携程机票APP主流程团队使用与升级持续集成/持续交付（以下均称CI/CD）来兼顾前端开发高效率及高质量的实践。

二、机票APP主流程CI/CD

2.1 持续集成/持续交付

     

在软件工程中，持续集成是一种在保证质量的前提下将每天新增代码合并到共享主线中的做法。持续交付是一种能够使得软件在较短的循环中可靠发布的方法。

传统的持续交付过程着重于代码的安全交付，对于持续交付流程的执行效率没有足够重视，往往使得整个持续交付过程时间成本过高。对于前端工程而言，传统的持续交付缺乏快速、便捷、及时响应的UI自动化测试方案，页面展示的正确性难以得到保障。

面对这些问题，携程机票通过采用更为高效的CI/CD策略，实现快速、便捷、及时响应的UI自动化测试方案，达到了从代码提交到发布上线的全UI闭环的持续交付效果。

2.2 机票主流程前端开发现状

本次CI/CD升级实践前，机票APP主流程前端流程中，开发人员完成功能开发后，大致有以下几个步骤：

1）在代码仓库上提交代码时，会进行CI检测，通过后会合并进主分支；

2）QA通过发布平台进行测试环境的打包部署等操作；

3）QA进行手工测试，并进行本地UI自动化脚本测试，测试完成后进行结果反馈；

4）通过测试，进入下一步的生产发布流程。

主流程CI/CD流程图

整个过程，虽然使用了自动化手段，但是，还是存在一些问题：

1）人工干预过多：平台的发布、部署，运行UI自动化，这些重复的固化步骤都需要人工参与；

2）发布回归成本高：在每周常规发布两次的节奏下，人力回归测试加上集成反馈链路过长，都会增加验证成本；

3）UI自动化测试参与度不够：整个测试过程中，手工测试占比大，UI自动化测试由于用例数量庞大以及真机运行效率瓶颈，仅在测试阶段进行辅助测试，并不能保证UI功能验证的完整度，远没有发挥真正的效用。

     

我们针对这些问题进行了流程改进。

2.3 携程机票CI/CD改进后流程

改进后主流程CI/CD流程图

与之前相比，开发阶段：

1）CI检查的过程中增加了ESLint校验和增强了UT检验，可以在根源上排除低质量却难以发现的bug；

2）自动发布免除繁杂的人力操作和漫长等待编译的过程；

3）增加了自动触发CRN-WEB的UI自动化测试，使得UI自动化测试提前介入，将简单功能提前进行测试，早一步发现问题，减少测试成本和沟通成本。

测试阶段：

由原来的手工测试为主，UI自动化测试为辅，切换成UI自动化真机测试为主。

关于最大效率发挥UI自动化的作用，自动打包发布等，会在下面的内容里进行详细介绍。

三、CI检验完善