Category Archives: 前端开发

使用Protractor 做终端测试

什么?为什么要做终端测试? 其实你可以不做,如果你的网站只是一次开发的话。 你如果看到10多页的电子表格回归测试,然后让你做10次…. 想想都会哭。在09年刚做开发的时候我竟然做的很开心,被虐的不够啊…. 我是被虐了近6年之后才接触自动化测试的 😭

由于是java程序员,刚开始做终端测试自然就想到用java的框架。感觉学习过程累,不容易掌握,跑起来有点慢,占用资源多。哇,好多缺点。

直到有一天听了一个特别无聊的分享之后,偶尔从中间听到了nodejs 的protractor 做终端测试,尝试了一下,确实挺容易。

到底有多容易呢? 看代码吧。

首先是配置文件

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    // seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['HomePageSpec.js'],
    onPrepare: function () {
        browser.driver.manage().window().setSize(1680, 1050);
    },
}

然后是测试用例

var HomePage = function() {
    this.centerStageButtons = element(by.css(".announcement-bar"));

    this.viewOnGitHubButton = this.centerStageButtons.all(by.css(".button.button-small")).get(0);
    // this.downloadButton = this.centerStageButtons.element(by.css(".btn-primary"));
    // this.designDocsButton = this.centerStageButtons.element(by.css(".btn-warning"));
};


describe('haha', function() {
    var homePage = new HomePage();

    beforeEach(function() {
        browser.get('https://angularjs.org/');
    });

    it('should have a three buttons', function() {
        expect(homePage.viewOnGitHubButton.isDisplayed()).toBe(true);
    });
});

 

这个例子测试在angularjs.org 的网站上要有一个github的链接,如果有测试就通过。

运行测试用例

$ protractor protractorConf.js

 

因为protractor 是专门用来测试angularjs 的网站的,假如不是angularjs 也没有关系,配置一下就可以了

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    // seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['HomePageSpec.js'],
    onPrepare: function () {
        browser.driver.manage().window().setSize(1680, 1050);
        browser.ignoreSynchronization = true;
    },
}

完整的代码可以在这里找到:https://github.com/yhjhoo/protractorTest.git

参考链接:http://blog.scottlogic.com/2015/11/06/ProtractorForBeginnersPart1.html

http://www.protractortest.org/#/tutorial

html5 中新的doctype

html5已经出来很长时间了,很多浏览器也开始支持html5,是时候开始关注一下了。 

以前我们写html的doctype 总是写成

<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”>
<“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

但是今天在测试的时候总是发现IE9会解释成IE7 的标准,很气人!

原来自从IE9 支持了html 5之后会自动将这些认为是老的网页,用旧的标准来显示页面。

新的页面doctype应该这样写:

<!DOCTYPE html>

是不是简介了好多

使用jquery获取 sharepoint restful web service(实例代码)

javascript本身的跨域问题是测试过程中遇到的主要问题,但是使用jquery可以很轻松的解决。

完整的代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Pragma" content="no-cache" />
	<title>Test MANS</title>
	<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
</head>



<body>

</body>

<script type="text/javascript">

$(document).ready(function() {
	
	jQuery.support.cors = true;
	$.ajax( {
		url : "http://test.sharepoint/_vti_bin/listdata.svc/Test",
		async:true,
		dataType : "json",
		cache : false,
		success : function(data) {
			alert("f");
			if(data!=null && data.d!=null && data.d.results!=null){								
				$(data.d.results).each(function(i) {
					//alert(this.Code);
				});
			}
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("error: " + errorThrown);
        }
	});
});
</script>
	
</html>