????????????????????????????? WEB ????????????????????????????????????????????????????????°淢??????????????????????????????????????????????????????????????????????????????? WEB ????????????????????????End to End Test????? E2E ?????????????????л???????????? GitHub ???????????? Node.js E2E ????????????????????? GitHub ?? star ???????????? 5 ???о????￡?????????????? star ??????????????????μ????
????· CasperJS— 6460 ?? star????????http://casperjs.org
????· Protractor— 6408 ?? star????????http://www.protractortest.org
????· Nightwatch.js— 6121 ?? star????????http://nightwatchjs.org
????· TestCafe— 2268 ?? star????????https://devexpress.github.io/testcafe
????· CodeceptJS— 1087 ?? star????????http://codecept.io
??????????????????????д?????????????????????? 5 ?? E2E ???????????????????????????????а??????????????????????????????????????Щ???? E2E ?????г??ò????????????????????ò??????????д??E2E ???????ò??????￡?
????· ????????????????? Github ???????
????· ??д??????????????????????????????????
????· ??????????????????????????????
????· ??????????????????????????????? 10 ????
????· ??????л?????????????????????????
????CasperJS
????CasperJS ?? star ??????????????????翪?????? E2E ?????????? Python ??д????????????????????? Node.js ???????????????????? npm ???????????????? Node.js ??????????????????????????????????????????????????????????????Headless Browser????????????? PhantomJS ?? SlimerJS??????? CasperJS ??????????????????????????????????????????????????????????а????????????????????????????汾????????????????????????????????????????????????????????Щ????????????????????????
???????????
????· ??? Python 2.6 ?????汾
????· ??? PhantomJS??npm install -g phantomjs
????· ??? CasperJS??npm install -g casperjs
??????д????
?????????? ES6 ??????????д CasperJS ???????????????????÷????????????? CasperJS ???????κ? ES6/ES7 ???????????????????в??????????????????????????????￡?
casper.test.begin('Github Search'?? function suite(test) {
casper.start('https://github.com'?? function () {    // ?????
test.assertVisible('.js-site-search-form'?? 'should search input visible');
this.fill('.js-site-search-form'?? { q: 'casperjs' }?? true); // ???????????????
});
casper.then(function () {
test.assertEval(function() {    // ???????????? 10
return __utils__.findAll('.repo-list-item').length >= 10;
}?? 'should show 10 results');
});
casper.then(function () {
this.click('.repo-list-item h3 a'); // ?????1?????
});
var location = null;
casper.then(function () {   // ???????????????
test.assertVisible('.repository-content'?? 'should repo detail visible');
location = this.evaluate(function () {
return window.location;
});
});
casper.then(function () {   // ???????????? casperjs ??????
test.assertEquals(location.pathname?? '/casperjs/casperjs'?? 'should casperjs repo found');
});
casper.run(function () {
test.done();
});
});
??????? CasperJS ?? CoffeeScript ?????????????? CoffeeScript ?????????????? CoffeeScript ??д??????????????????????? CoffeScript??
???????в???
????casperjs test casperjs/test.js
??????????
???????????

???????????

????Protractor
????Protractor ?? Angular ??????????? E2E ?????????????????? Angular ???????????????????????? Angular ??????????????????????? Angular ?????????????????????????????????????????????????????????????? Angular ???????????Protractor ??????????????????? CasperJS ???? Protractor ???????????????в??????????Protractor ????????????????????? CasperJS ???????????ú?????????????????г???????????Protractor ?????????????????????????????????????? Jasmine ???? Mocha??
???????????
????· ??? JDK
????· ??? Protractor??npm install –g protractor
????· ????? WebDriver Manager??webdriver-manager update
????· ???????????
??????д????
????Protractor ?????????? Angular ?????????????????????????????? Angular ?????????????????????????????????￡?
describe('angularjs homepage todo list'?? function () {
browser.ignoreSynchronization = true;   // ????????????????? github ?????? angluar ??д??
browser.get('https://github.com');
it('should search input visible'?? function () {
var searchInput = element(by.className('js-site-search-focus'));
var searchForm = element(by.className('js-site-search-form'));
expect(searchInput.isDisplayed()).toEqual(true);
searchInput.sendKeys('protractor');
searchForm.submit();
});
it('should show 10 results'?? function () {
var searchList = element.all(by.className('repo-list-item'));
expect(searchList.count()).toEqual(10);
element(by.css('.repo-list-item h3 a')).click();
});
it('should repo detail visible'?? function () {
var repoContent = element.all(by.className('repository-content'));
expect(repoContent.isDisplayed()).toEqual([true]);
});
it('should protractor repo found'?? function (done) {
browser.executeScript(function () {
return window.location;
}).then(function (location) {
expect(location.pathname).toEqual('/angular/protractor');
done();
});
});
});
???????в???
????· ???? WebDriver Manager: webdriver-manager start
????· ???в????protractor protractor.config.js
??????????
???????????

???????????

????Nightwatch
??????????е? Nightwatch??????????? Protractor ????????????????? Nigthwatch ??д?????????????????????????????????????????????????????????? Protractor ?? TestCafe ???????????????Nightwatch ???????????????????????裬??????????????????????????????????????????????
???????????
????· ??? JDK???汾 7 ????
????· ???? Selenium: selenium-server-standalone-{VERSION}.jar?????????????
????· ???? WebDriver for Google Chrome?????????????
????· ??? Nightwatch: npm install -g nightwatch
????· ???????????????????????????? chromewebdriver ??????
??????д????
module.exports = {
'Github Search': function (browser) {
browser // ?????????д????????????????
.url('https://github.com')
.assert.visible('.js-site-search-focus'?? 'should search input visible')
.setValue('.js-site-search-focus'?? 'nightwatch')
.submitForm('.js-site-search-form')
.pause(1000);
browser.execute(function () {   // ????? 10 ?????????
return document.querySelectorAll('.repo-list-item').length;
}?? function (args) {
browser.assert.equal(args.value?? 10?? 'should show 10 results');
});
browser.click('.repo-list-item h3 a').pause(1000);
browser.assert.visible('.repository-content'?? 'should repo detail visible');
browser.execute(function () {
return window.location;
}?? function (args) {    // ?????? nightwatch ????
browser.assert.equal(args.value.pathname?? '/nightwatchjs/nightwatch'?? 'should nightwatch repo found');
});
browser.end();
}
};
???????в???
????· ???? Selenium??java -jar selenium-server-standalone-3.0.0.jar
????· nightwatch test.js
??????????
???????????

???????????