前端测试 海豚 (Web UI 自动化测试平台) 近期的功能更新

前端测试 海豚 (Web UI 自动化测试平台) 近期的功能更新
距离之前写的一片介绍海豚的文章:海豚-Web UI 自动化测试平台 已经有一段时间了,简单介绍下到目前为止海豚所更新的一些功能以及一些思考。 到目前为止公司内部已经有八九个业务在使用(没有在本团队之外的团队分享过海豚,都是慕名而来并使用上的)。这是自己能够继续坚持开发海豚更多功能的动力啊。 自己所负责的业务也在深度使用,不再担心上线的功能会影响到其他的功能,并且没有及时发现。 功能更新...

海豚中用户交互行为录制功能的实现详解

海豚中用户交互行为录制功能的实现详解
之前有同学(@jet )对海豚录制这块的功能感兴趣,所以就专门写一个帖子来说一下海豚录制功能的实现逻辑以及解决了哪些坑。 下面详细说一下海豚中录制功能的实现细节以及代码DEMO。 海豚对录制功能做了比较多的考量,前期也在这方面栽了很多跟头,比如: 获取到的DOM元素的Selector,选择出来之后,可能页面会有多个DOM元素的情况,因为有些ID相同的容器,只是隐藏了而已 点击事件的时候,DOM元素绑定了有...

海豚中用户交互行为录制功能的实现详解

海豚中用户交互行为录制功能的实现详解
海豚是什么? 没错,它是一个 Web UI自动化测试工具,专治Web UI的各种疑难杂症,目前只针对移动端Webapp量身定做。 说到 Web UI的自动化测试,大家信口拈来都能够说出来很多:Totoro/Dalekjs/Automaton/Selenium/CatJS/[Maoxu UITestPI]阿里内部的自动化测试工具/Baidu Pagediff ... 还有很多隐藏功与名的自动化测试工具罗列不出来了,就让我们先顶礼膜拜一下吧 上面罗列的其实有些不算是Web UI自动化测试...

使用HeadlessChrome做单页应用SEO

使用HeadlessChrome做单页应用SEO
有没有一个可用于任何单页应用的SEO解决方案,让我们不用对代码做改变保持原有的开发效率?chrome-render可以帮我们做到这点,它通过控制HeadlessChrome渲染出最终的HTML返回给爬虫来实现。 HeadlessChrome介绍 前不久chrome团队宣布chrome支持headless模式,HeadlessChrome支持chrome所具有的所有功能只不过因为不显示界面而更快资源占用更小。相比于之前的phantomjs(作者因为HeadlessChrome的推出而宣布...

无线性能优化:页面可见时间与异步加载

无线性能优化:页面可见时间与异步加载
如何让页面尽可能早地渲染页面,页面更早可见,让白屏时间更短,尤其是无线环境下,一直是性能优化的话题。 页面可见时间 页面可见要经历以下过程: 解析 HTML 为 DOM,解析 CSS 为 CSSOM(CSS Object Model) 将 DOM 和 CSSOM 合成一棵渲染树(render tree) 完成渲染树的布局(layout) 将渲染树绘制到屏幕 layout 由于 JS 可能随时会改变 DOM 和 CSSOM,当页面中有大量的 JS 想立刻执行时,浏览器下...

chrome-remote-interface 中文api

chrome-remote-interface 中文api
API module([options], [callback])基于chrome调试协议连接调试目标 options object类型,具有如下属性: host 默认localhost port 默认9222 chooseTab 决定调试哪个tab。该参数可以为三种类型: function 提供一个返回tab序号的函数 object 正如new 和 list返回的对象一样 string websocket url 默认为一个函数,返回当前激活状态的tab的序号,如:function(tabs){return 0;} protocol 协议描述符,...

基于HeadlessChrome的网页自动化测试系统-FinalTest

基于HeadlessChrome的网页自动化测试系统-FinalTest
我总是追求合理高效的方法来解决我所遇到的问题,于是我幻想要是有一个工具可以智能的监视网页一旦出现异常就提醒我们该多好。就在出故障的几天后chrome团队宣布chrome支持headless模式,这让我很兴奋因为它正是我在找的,于是我开始做FinalTest(等成熟了再开源)。 HeadlessChrome介绍 HeadlessChrome支持chrome所具有的所有功能只不过因为不显示界面而更快资源占用更小。相比于之前的phantomjs(作者因为...

前端自动化测试探索

前端自动化测试探索
背景 测试是完善的研发体系中不可或缺的一环。前端同样需要测试,你的css改动可能导致页面错位、js改动可能导致功能不正常。由于前端偏向GUI软件的特殊性,尽管测试领域工具层出不穷,在前端的自动化测试上面却实施并不广泛,很多人依旧以手工测试为主。本文试图探讨前端自动化测试领域的工具和实践。 为什么需要自动化测试 一个项目最终会经过快速迭代走向以维护为主的状态,在合理的时机以合理的方式引入...

css3效果:波浪效果

css3效果:波浪效果
实现效果 如图所示: 首先得准备三张图,一张是浅黄色的背景图loading_bg.png,一张是深红色的图loading.png,最后一张为bolang.png。 css代码 body{background:#ffe894;} .loading_bg{width:113px; height:111px;background:url(loading_bg.png) no-repeat left top;margin:30px auto;} .loading{width:113px; height:111px;position:relative; -webkit-mask-image:url(loading.png);} .show{ ...

百度移动端首页前端速度那些事儿

百度移动端首页前端速度那些事儿
欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码):https://segmentfault.com/blog/frontenddriver 这一期,咱们一起聊一聊----百度移动端首页前端速度的那些事儿 1 长什么样? 我们的业务就是 https://m.baidu.com 别以为只有一个搜索框,我们还有下面丰富的卡片内容,可以提供各式各样的服务。如图1.1 其实整个页面的逻辑相对是比较复杂的。 还有各式各...
Copyright © web前端技术开发个人博客 保留所有权利.   Theme  Ality

用户登录