Protractor E2E Test for Non-Angular Website (jQuery-based)

GitHub: https://github.com/lanshunfang/protractor-jquery/

Videos

YouTube

YouTube Video clip for usage of Protractor for Non-Angular

YouKu (China)

优酷视频 - 使用 Google Protractor 测试非 Angular 页面

Why

Google invented Protractor over WebDriverJs Protocol with crispy designs on real world testing scenarios. It’s originally for AngularJS and people like it.

But what if you want to use it as an E2E framework for Non-Angular websites?

Say Paul is working on a project over Microsfot KnockoutJs. And I would like to have my team get the most out of Google’s hard and smart work.

That is the reason why I made this Protractor-jQuery, the utility to have Protractor running over jQuery-based websites (Non-Angular), as an End-To-End testing framework.

How to use it?

Install

Start Mock Server

Run Cases

Add Your Own Test Case

Create new suite under test/spec-e2e/pages/, refer them in test/cfg/protractor-config.js,#under “suites:”

I have already provided a demo suites “test/spec-e2e/pages/home” for you to get started. Just duplicate the folder and tweak it.

Debug A Test Case


 

Technical consideration

The main idea to tweak Protractor for Non-Angular websites, is to rewrite


 

Which is how Protractor handle all asynchronised requests. If any jQuery.ajax request is pending, then we wait until it’s done.

Screenshots

Protractor is runningConsole Output

 

正版和免费的安装 IE Edge 和其他版本在你的 Mac 上 — Install Internet Explorer / Microsoft Edge on your Mac

参考:http://osxdaily.com/2011/09/04/internet-explorer-for-mac-ie7-ie8-ie-9-free/

小方提出中国特色的新修正,而且加入了 EDGE。

一个用 MacBook 的人为什么会用 IE? 因为中国还有很多网站忽略投资前端工程师——我们只能用 IE 打开他们。

根据此教程,你可以安装所有版本的 IE, 从 IE6-IE11 到 EDGE。

不过,如果你安装了 EDGE,就同时自动拥有 Internet Explorer 11。而 Internet Explorer 11 自带的其他版本 IE 模拟是很好用的(EDGE也带,但不好用)一般这也差不多够用了。

效果图,一个免费的,微软官方 ModernIE 允许使用的 Windows 10 + EDGE + IE 11

Screen Shot 2016-03-23 at 10.09.06 AM

Screen Shot 2016-03-23 at 3.49.22 PM

Screen Shot 2016-03-24 at 8.02.07 AM

 

如果你硬要安装所有版本的 IE (文末给出方法),那么你要知道,你的电脑里将会有一个 Windows XP,一个 Windows 7和一个 Windows 10 的虚拟机。土豪 SSD 硬盘请忽略。

步骤:

Screen Shot 2016-03-23 at 9.32.23 AM

  • 终端运行
  • 等待1分钟左右,当页面出现下载 MSEdge_Win10.zip 时,按 Ctrl+C 中断 终端下载。我们要使用迅雷来下载,快、准、狠。这个 5G 多的大家伙。Screen Shot 2016-03-23 at 9.24.32 AM
  • 再回到 Terminal 终端,执行

稍等 1分钟,即可搞定。

  • (极其重要)然后打开 VirtualBox,先不要直接启动实例
  • 根据微软 ModernIE 官方权威说明,请遵循他们的意见,可长久免费试用此 Windows 10

Screen Shot 2016-03-23 at 9.53.05 AM

  • 也就是,在启动虚拟机之前,务必使用还原 VirtualBox 快照启动。
    Screen Shot 2016-03-23 at 9.58.33 AM

 

有图有真相。

Windows Edge 有了:

Screen Shot 2016-03-23 at 10.04.33 AM

Screen Shot 2016-03-23 at 3.47.41 PM

 

还同时有副产品 Internet Explorer 11 (Windows 10 自带)

Screen Shot 2016-03-23 at 3.46.21 PM

 

如果你硬要安装其他版本,那么:

所有版本 (6, 7, 8, 9, 10, 11, EDGE,别忘了,它会额外下载三个操作系统虚拟机文件, Win XP/7/10):

IE 11 (同时自动安装下载 Win 8,如果已经有IE9,则会自动重用 Win 7)

 

IE 10 (同时自动安装下载 Win 8,如果已经有IE9,则会自动重用 Win 7)

 

IE 9 (同时自动安装下载 Win 7)

 

IE 8 (同时自动安装下载 Win XP)

 

IE 7 (同时自动安装下载 Win XP)

 

IE 6 (同时自动安装下载 Win XP)

 

Everything are HTML components – 小谈 HTML 组件化与可视化的编程

从 AngularJS 1.0.7 开始,我们就拿它做项目。刚开始使用了 angular-seed 创建页面,结合 ng-controller 做了好多事。同时我们也用了 directive 做了些公用组件。

我们组在 retrospection 时,慢慢地有了对比。 ng-controller 做出来的东西都是大块大块的,彼此连动,组织很不清晰。而 directive 却是自成体系,透过组件嵌套和通信控制,我们可以做出任意的页面——而且还保证各个组件自己是独立、可测试和不受其他 Scope / EventListener 影响的。甚至,我们还总结出了一个原则:

Everything should be directives.


 

具体呢,举个栗子。

这个简单的 html 结构,是我们吃了很多亏之后总结出来了 (高仿样本)

你能看出什么门道?1. 组件化 2. 可视化 HTML 3. 可测试单元

1. 组件化

无需多言,bw-appnode 是一个组件,bw-table 与 bw-search 也是。这些组件彼此嵌套,也彼此独立,使用协议(Scope或者Service)通信。这样的好处非常明显。

比如我们现在还没有做好 bw-table ,服务器 Restful API 也还没有完成,但我们却可以独立开始开发 bw-search 。bw-search 自带独立的 UI 与复杂逻辑,其将对 bw-appnode 的假数据进行过滤,而 bw-table 则是渲染层而已,任何 bw-appnode 上面的变化,都会自动的 reactive 到 bw-table 里 (就是 Angular Scope 了)。

2. 可视化/具象化

缘由一:我们习惯于把很多的功能使用 JavaScript 事件绑定的方式实现。慢慢地,点击了一个按钮会发生什么,我们只能猜,或者辛辛苦苦的去跟踪源代码。而到底一个 Dom 节点上的  JavaScript 事件监听器有几个,我们也很难察觉——每个工程师都可能在 JS 文件的任何地方给某个节点添加上不可预期、天花乱醉的监听事件。

缘由二:还记得你初学 HTML5 时,相关牛文告诉你它为什么要增加那么多新标签么?比如 section/article/video等。因为这样,HTML 页面与功能就可以更加“可视化”和“组件化”了。

第一,“可视化”。“可视化”就是一看代码就知道这个是干什么的(Chrome Developer Tools Inspect、Google Crawler 精准搜索)。

这里讲的 HTML5 标签“可视化”,严格意义上讲,应该叫“语义化”,不过我觉得“可视化”这个词更 Cool。前端么,几个人会在乎语义不语义,HTML结构读了通顺不通顺,分析起来合理不合理?好看和干脆(Crispy, Handy, Intuitive)很重要——主要*看*气质;两者,语义化就是“看了就明白”的意思,所以干嘛不用“可视化”这词替代呢?;

第二,“组件化”。就是一个标签就渲染出自己的一套独立行为与 view (Web Component / Shadow-Dom的题中之义)。

我们很多人都曾近乎引颈渴望:如果从 HTML 上面就可以看出这一段 HTML 片断/页面块 是干什么的,是何等的奇妙和方便啊—— 不好意思,这忽然想到了另外一个术语,“描述性编程”,在此也可见一斑,门当户对。

在我们的例子中,顶级节点有一个新的 directive,叫

顾名思义,这个就是用来拿服务端数据的。在 Server 还没有做完时,在它里面直接拿的是静态的数据 (使用Promise resolve),拿到数据之后,直接将之存为 bw-appnode 上的 一个 Scope 属性。

而更有意思的是,由于这个节点是独立的另外一个 directive,我们可以在上面考虑更多复杂的逻辑,比如 ajax 数据缓存处理等。我们坦然地对这个组件说,“反正你就干这事,要怎么干,你慢慢想;想做多精,就做多精;要做多细,就做多细;一辈子你一个人只做一件事,就不相信你做不好”。另外,这个节点还可以用在其他地方——想想,要 appnode 数据的,可不止于这个 bw-appnode 页面。不过呢,我这里不是说, Component 的主要目的是为了做重用——这个明显不是本文要谈的。

3. 可测试单元和 jsDoc

这里讲的不是单元测试,而是测试单元。显而易见,上面的任何一个 Component 都可以独立拿出来做测试。我们只需要引入相关的 directive 的 js 文件与 view html 文件,就可以在另外一个独立的页面测试空间,给这个 directive 做全面细化的 UI 测试 (Protractor驱动)。测试用例、数据环境,想加就加,想改就改。完全不用担心耦合问题。

而既然是组件化, jsDoc 也好写多了。一个 directive,一个 module 定义,便于观看,颜值高,清晰度强。


当我们把这个经验(Everything should be directives.)总结出来之后不久几个月,我们就发现 Angular2 / React 的团队其实早已经意识到这个原则的重要性,他们默默地调整了一切。

在 React / Angular2 看来,一切都是组件。在写一个新的 SPA 时,你首先要做的,就是把你要做的页面划分成不同的嵌套的组件。

借用别人的图举个栗子。

component_example

一目了然,不言而喻。不过多说一句,划出组件之后,你还要决定是使用 Scope 通信,还是使用 Publish/Subscribe 通信;另外是串页面(容器组件)的 Router 抽象层,是这种组件化编程不得不提到的——一句话:用现成的 Router 都太弱,你应该用自己发明的 Router。这里不再多谈,喜欢了解,就找小方。

下面有几个好资源与童鞋们共享。

Facebook React: Step 1: break the UI into a component hierarchy

AngularJS: Component Based Thinking in AngularJS

AngularJS: Refactoring Angular Apps to Component Style

 

最后再来一个给力的,别人做的东西。

component_refac

让 Component 革命中关村和硅谷的前端吧。

后记:

我当前使用的是 Microsoft KnockoutJS,然而,从 Angular/React 得来的经验,已经彻底的革命了我们的 KnockoutJS 云应用。

Component,成功人士的不二之选。

小方,中关村软件园,Mar. 18, 2016。转载请标明出处。

IMG_1336

A plnkr for you to get started with RequireJS + KnockoutJS + BootstrapCSS + jQuery, with KnockoutJS nested Component and CSS animation support

It’s pretty hard to work on KnockoutJS on a real world project with better folder organisation on Plunker.

Here it is:

With RequireJS / Bootstrap / jQuery / CSS3 Animation involved.
Also, it brings data diff/sync/throttle util for you to communicate with server in a faster way — think about Git.