有赞

“心愿本人能放弃一点少年感，心愿能给世界留下一点什么”——我是嘉涵，我是有赞一名前端工程师。我正在和一群乏味的人，一起做一件乏味的事儿~ 曾幻想执笔走咫尺，而今敲代码闯天下作为初中时写过网络小说，曾幻想执笔走咫尺的我，而今换了一种形式向世界传递着本人的能量。因为在我看来，敲代码其实和写作相差无几，都属于传播信息的媒介，写作是对读者表白，编码则是对机器表白。浏览代码后，计算机了解了咱们的想法，并发明出对应的产品，这是一个很有意思的事件。 而且，写代码是最容易触达到几亿人的形式：只须要找到一个用户体量较大的产品，在外面写下几行代码，转眼间，这些代码就会被散发到有数用户的设施上。通过代码，咱们与远方的人们达成了某种联结，产生了强劲而美妙的影响，继而感到幸福，这便是心理学家阿德勒描述的“共同体感觉”。 17年的时候，在逛 Github 时看到了有赞一系列的开源技术我的项目，外面正好有我感兴趣的方向，所以过后没太多思考就来了。当初回头看，技术团队的开源我的项目或博客其实是一面镜子，对外折射出整个团队的技术气氛和成员素养。包含技术分享，有赞始终都在做继续投入，所以才会有这么多优良的小伙伴被吸引并且退出咱们。 团队中每个人都乏味有料，而且还有一个“大哥文化”——人人都是大哥。在相互称说时，大家会主动加上“大哥”后缀，显得特地亲切。如果有新搭档入职，退出群聊的那一刻就会一下子收到几十条“欢送某某大哥”的音讯，产生一种“混入社会组织”的微妙感。 触碰代码，拥抱成长与变动在有赞，最大的扭转是认知程度产生了变动。 退出有赞的时候，我刚毕业一年，那时候对待事物还是以一种学生视角，感觉写好代码就是最牛掰的事。 当初我慢慢开始理解事物是多元的。比方一个互联网产品胜利了，背地其实隐含着很多因素，可能是抓住了社会的小趋势，或是有资本在火上浇油。意识到这些，能够帮忙咱们跳脱出单纯的技术思维，找准技术的定位，更好地施展本身的价值。 在有赞，每个期间都会遇到不同的技术挑战。 比方外围交易链路重构、双十一大促压测、线上紧急问题等等，但这些艰难都是短期的，终将会被攻克。在我集体看来，最有挑战的是保持做长期有价值的事件。 从退出有赞开始，我就始终在保护有赞的开源组件库 Vant。组件库其实是一个很平庸的技术我的项目，每个成熟的互联网公司都会开发本人的组件库。但组件库同时也是一个很重要的技术我的项目，所有的前端页面都是基于组件库搭建的，组件库的品质时刻影响着咱们的产品体验和研发效率。 在过来三年里，咱们与设计同学从业务场景中提炼出 60 多个通用组件，并继续收集来自内外部的反馈，对每个组件的细节进行打磨，累计迭代 300 多个版本。过程中最磨人的是适配挪动端千奇百怪的机型，很多组件在 iPhone 上出现成果很好，但放到某些安卓机上就出幺蛾子了，渲染偏移、动画卡顿等问题层出不穷。有些问题只影响大量用户，但为了保障体验的一致性，还是得找到对应的测试机，重复尝试兼容计划，直到呈现出统一的成果。 继续不间断的投入，Vant 曾经成为业界最有影响力的组件库之一，对内承载有赞所有的 C 端业务，对外服务十多万开发者。这些过程很漫长、很磨人，但后果很美妙，本身也满满成就感。这就是长期主义的魅力，并且这也是最能让人成长的。 还有一个让我历历在目的期间：18年底，公司恰好有反对翻新业务的机会，加之原先做的事件到了一个稳定期，于是我跟着TL退出到翻新业务团队。这是一个从0到1的我的项目，产品状态、业务模式都是不确定的，工作中很有守业的气氛。咱们团队一共十几个小伙伴，在闭关室里埋头做产品，不到一年工夫内，从产品试验、产品内测到大量主播入驻，成就感满满。在这过程中，各位业务大佬也给予了咱们很多领导，这对我个人成长影响十分大。 在有赞，最大的感触是工夫过得可真快。 眼睛一闭一睁，三年就过来了。 对我本人来说，我把这三年归类为我职业生涯的初期——起步阶段，就像SaaS行业的外围是逐年稳定增长，心愿我在职业生涯上也做到这一点。 作为前端岗位，也想分享一下我对前端工程师这个工种的认识：其实在程序员这个行当里，前端是技术门槛绝对较低的，大部分工夫里，咱们面对的需要都是不难实现的。在这些场景里，前端的价值不在于解决技术难题，而在于施展本身的同理心，秉持匠心，将产品细节、技术架构打磨到极致。做到这些，门槛天然就有了。 就像微小的修建，总是由一木一石叠起来的，咱们何妨做做这一木一石呢？ 我时常做这些“一木一石”的碎事,在我看来，任何事都是有意义和价值的，就像人人都懂万丈高楼平地起的情理，只有咱们保持去做一件有意义的事儿，那么剩下的就是把答案交给工夫。最近在看《重来3》这本书，其中看到一个概念，叫做“信赖电池”，挺有意思的，有一些感悟想和大家分享一下： “咱们和每个共事之间都有一节信赖电池，当咱们刚进公司的时候，这节电池的电量是50%。在工作中的每一次单干，都会为这节电池“充电”或“耗电”。电量高时，单干过程会非常顺畅，一件事件很容易就做成了。电量过低，则容易产生抵触，大量工夫耗费在扯皮上，导致工作效率变低。用今人的话来类比，就是“得道多助，失道寡助”。” 因而，在工作中，咱们须要用心经营与每个共事之间的信赖电池，踊跃帮忙别人解决问题，及时给出后果反馈。把信赖电池充斥，工作天然得心应手。 当然，这些每一个习惯都是在习惯中养成的，坏的习惯必须突破，好的习惯必须加以造就。保持你所酷爱的，拥抱你所看见的，信赖这无穷的力量。这样，咱们能力走的更加动摇决绝，更加有力量！

前言最近一年多一直在做前端的一些测试，从小程序到店铺装修，基本都是纯前端的工作，刚开始从后端测试转为前端测试的时候，对前端东西茫然无感，而且团队内没有人做过纯前端的测试工作，只能一边踩坑一边总结经验，然后将容易出现问题的点形成体系、不断总结摸索，最终形成了目前的一套前端测试解决方案。在此，将有赞的前端质量保障体系进行总结，希望和大家一起交流。 先来全局看下有赞前端的技术架构和针对每个不同的层次，主要做了哪些保障质量的事情： 有赞的 Node 技术架构分为业务层、基础框架层、通用组件和基础服务层，我们日常比较关注的是基础框架、通用组件和业务层代码。Node 业务层做了两件事情，一是提供页面渲染的 client 层，用于和 C 端用户交互，包括样式、行为 js 等；二是提供数据服务的 server 层，用于组装后台提供的各种接口，完成面向 C 端的接口封装。 对于每个不同的层，我们都做了一些事情来保障质量，包括： 针对整个业务层的 UI 自动化、核心接口|页面拨测；针对 client 层的 sentry 报警；针对 server 层的接口测试、业务报警；针对基础框架和通用组件的单元测试；针对通用组件变更的版本变更报警；针对线上发布的流程规范、用例维护等。下面就来分别讲一下这几个维度的质量保障工作。 一、UI自动化很多人会认为，UI 自动化维护成本高、性价比低，但是为什么在有赞的前端质量保证体系中放在了最前面呢？ 前端重用户交互，单纯的接口测试、单元测试不能真实反映用户的操作路径，并且从以往的经验中总结得出，因为各种不可控因素导致的发布 A 功能而 B 功能无法使用，特别是核心简单场景的不可用时有出现，所以每次发布一个应用前，都会将此应用提供的核心功能执行一遍，那随着业务的不断积累，需要回归的测试场景也越来越多，导致回归的工作量巨大。为了降低人力成本，我们亟需通过自动化手段释放劳动力，所以将核心流程回归的 UI 自动化提到了最核心地位。 当然，UI 自动化的最大痛点确实是维护成本，为降低维护成本，我们将页面分为组件维度、页面维度，并提供统一的包来处理公用组件、特殊页面的通用逻辑，封装通用方法等，例如初始化浏览器信息、环境选择、登录、多网点切换、点击、输入、获取元素内容等等，业务回归用例只需要关注自己的用例操作步骤即可。 1.框架选择-- puppeteer[1]，它是由 Chrome 维护的 Node 库，基于 DevTools 协议来驱动 chrome 或者 chromium 浏览器运行，支持 headless 和 non-headless 两种方式。官网提供了非常丰富的文档，简单易学。 UI 自动化框架有很多种，包括 selenium、phantom；对比后发现 puppeteer 比较轻量，只需要增加一个 npm 包即可使用；它是基于事件驱动的方式，比 selenium 的等待轮询更稳当、性能更佳；另外，它是 chrome 原生支持，能提供所有 chrome 支持的 api，同时我们的业务场景只需要覆盖 chrome，所以它是最好的选择。 ...

作者：王前一、背景小票打印是零售商家的基础功能，在小票信息中，必然会存在一些相关店铺的信息。比如，logo 、店铺二维码等。对于商家来说，上传 logo 及店铺二维码时，基本都是彩图，但是小票打印机基本都是只支持黑白二值图打印。为了商家的服务体验，我们没有对商家上传的图片进行要求，商家可以根据实际情况上传自己的个性化图片，因此就需要我们对商家的图片进行二值图处理后进行打印。 这次文章是对《有赞零售小票打印跨平台解决方案》中的图片的二值图处理部分的解决方案的说明。 二、图像二值化处理流程图像二值化就是将图像上的像素点的灰度值（如果是 RGB 彩图，则需要先将像素点的 RGB 转成灰度值）设置为 0 或 255 ，也就是将整个图像呈现出明显的黑白效果的过程。 其中划分 0 和 255 的中间阈值 T 是二值化的核心，一个准确的阈值可以得到一个较好的二值图。 二值化整体流程图： 从上面的流程图中可以看出，获取灰度图和计算阈值 T 是二值化的核心步骤。 三、以前的解决方案以前使用的方案是，首先将图像处理成灰度图，然后再基于 OTSU（大津法、最大类间方差法）算法求出分割 0 和 255 的阈值 T ，然后根据 T 对灰度值进行二值化处理，得到二值图像。 我们的所有算法都有使用 C 语言实现，目的为了跨平台通用性。 流程图： 灰度算法： 对于 RGB 彩色转灰度，有一个很著名的公式： <center>Gray = R 0.299 + G 0.587 + B * 0.114</center> 这种算法叫做 Luminosity，也就是亮度算法。目前这种算法是最常用的，里面的三个数据都是经验值或者说是实验值。由来请参见 wiki 。 然而实际应用时，大家都希望避免低速的浮点运算，为了提高效率将上述公式变形成整数运算和移位运算。这里将采用移位运算公式：<center>Gray = (R 38 + G 75 + B * 15) >> 7</center> ...