{"id":132,"date":"2014-10-08T06:27:54","date_gmt":"2014-10-07T21:27:54","guid":{"rendered":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/blog\/2014\/10\/08\/protractor-circleci"},"modified":"2022-10-26T10:02:26","modified_gmt":"2022-10-26T01:02:26","slug":"protractor-circleci","status":"publish","type":"post","link":"https:\/\/p-corporate-blog-cms.mmmcorp.co.jp\/blog\/2014\/10\/08\/protractor-circleci\/","title":{"rendered":"AngularJS \u306e E2E \u30c6\u30b9\u30c8 Protractor \u3092 CirlceCI \u3067\u5b9f\u884c\u3059\u308b"},"content":{"rendered":"
\u65e5\u66dc\u65e5\u304b\u3089\u6708\u66dc\u65e5\u306b\u304b\u3051\u3066\u4e0a\u9678\u3057\u305f\u53f0\u98a818\u53f7\u3001\u96e8\u304c\u3059\u3054\u304b\u3063\u305f\u3067\u3059\u306d\u3002 \u3055\u3066\u4eca\u56de\u306f AngularJS \u3067\u3001E2E \u30c6\u30b9\u30c8\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e Protractor<\/a> \u306e\u5c0e\u5165\u65b9\u6cd5\u3001CircleCI<\/a> \u3067\u4f7f\u3046\u969b\u306e\u8a2d\u5b9a\u3092\u7c21\u5358\u306b\u307e\u3068\u3081\u3066\u307f\u307e\u3057\u305f\u3002 \u53c2\u8003URL \u30b5\u30f3\u30d7\u30eb\u30a2\u30d7\u30ea\u3092 Yeoman \u3067\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n \u307e\u305a\u306f\u30ed\u30fc\u30ab\u30eb\u306e\u958b\u767a\u74b0\u5883\u3067\u3001Protractor \u3092\u5b9f\u884c\u3059\u308b\u65b9\u6cd5\u3067\u3059\u3002 <\/p>\n protractor \u3068 grunt-protractor-runner \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n npm \u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u305f\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u306b webdriver-manager \u3068\u3044\u3046\u5b9f\u884c\u30d5\u30a1\u30a4\u30eb\u304c\u3042\u308b\u306e\u3067\u3001\u305d\u308c\u3092\u4f7f\u3063\u3066 Selenium Server \u3084 WebDriver \u3092\u30ed\u30fc\u30ab\u30eb\u74b0\u5883\u306b\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n Protractor \u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 Gruntfile.js \u3092\u7de8\u96c6\u3057\u3066\u3001\u30bf\u30b9\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n \u30c6\u30b9\u30c8\u306e\u30bf\u30b9\u30af\u306b\u4e0a\u8a18\u3067\u8a2d\u5b9a\u3057\u305f protractor:E2E_local \u3092\u8ffd\u52a0\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n e2e \u306e\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092 test \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u914d\u4e0b\u306b\u4f5c\u6210\u3057\u3066\u3001\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002 Protractor \u306e API \u306b\u3064\u3044\u3066\u306f\u3001\u4e0b\u8a18\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u8003\u306b\u3057\u3066\u3044\u305f\u3060\u3051\u308b\u3068\u308f\u304b\u308a\u3084\u3059\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002 <\/p>\n \u307e\u305f\u3001CoffeeScript \u3067 Protractor \u306e\u30c6\u30b9\u30c8\u3092\u8a18\u8ff0\u3059\u308b\u969b\u306b\u306f\u3001
\u53f0\u98a8\u3068\u304b\u5927\u96e8\u306e\u65e5\u306b\u3001\u7121\u7406\u3057\u3066\u51fa\u793e\u3057\u306a\u304f\u3066\u3044\u3044\u306e\u306f\u30ea\u30e2\u30fc\u30c8\u30ef\u30fc\u30af\u306e1\u756a\u306e\u30e1\u30ea\u30c3\u30c8\u304b\u3082\u306a\u3041\u2026\u306a\u3093\u3066TL\u3068\u304b\u53f0\u98a8\u306b\u5099\u3048\u3066\u4eca\u304b\u3089\u51fa\u793e\u3059\u308b\u4eba\u305f\u3061 - Togetter\u307e\u3068\u3081<\/a>\u3092\u898b\u3066\u5b9f\u611f\u3057\u3066\u3044\u305f\u4f50\u3005\u6728\u3067\u3059\u3002
\u73fe\u5728\u30d5\u30a3\u30ea\u30d4\u30f3\u306e\u6771\u6d77\u4e0a\u306b\u3042\u308b\u53f0\u98a819\u5408\u306f\u3001"\u7279\u5225\u8b66\u6212\u7d1a"\u3060\u3068\u304b\u3002
\u53f0\u98a819\u53f7\u3001900\u30d8\u30af\u30c8\u30d1\u30b9\u30ab\u30eb\u3002\u201d\u7279\u5225\u8b66\u5831\u7d1a\u201d\u306e\u5f37\u3055\u306b\u3002(\u5d0e\u6ff1\u7dbe\u5b50) - \u500b\u4eba - Yahoo!\u30cb\u30e5\u30fc\u30b9<\/a>
\u4eca\u5f8c\u306e\u52d5\u304d\u306b\u6ce8\u610f\u304c\u5fc5\u8981\u3067\u3059\u306d\u3002 <\/p>\n
\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u3044\u305f\u306e\u306f\u4e0b\u8a18URL\u3002<\/p>\n
AngularJS\u306bE2E\u30c6\u30b9\u30c8\u74b0\u5883\u3068\u3057\u3066Protractor\u3092\u5c0e\u5165\u3059\u308b\u3002<\/a><\/p>\n
\n\u4e8b\u524d\u6e96\u5099\u3068\u3057\u3066<\/h2>\n
$ mkdir protractor_test\n$ cd protractor_test\n$ yo angular --coffee<\/code><\/pre>\n
\n
\nprotractor \u3068 grunt-protractor-runner \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n
$ npm install --save-dev protractor grunt-protractor-runner<\/code><\/pre>\n
webdriver-manager update<\/h2>\n
$ .\/node_modules\/protractor\/bin\/webdriver-manager update<\/code><\/pre>\n
Protractor \u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u4f5c\u6210<\/h2>\n
\u4e0b\u8a18\u306e referenceConf.js \u3092\u30d9\u30fc\u30b9\u306b\u5fc5\u8981\u306a\u8a2d\u5b9a\u3092\u884c\u3046\u3068\u826f\u3044\u304b\u3068\u601d\u3044\u307e\u3059\u3002
https:\/\/github.com\/angular\/protractor\/blob\/master\/docs\/referenceConf.js<\/a>
\u4eca\u56de\u306f\u6700\u4f4e\u9650\u306e\u8a2d\u5b9a\u306e\u307f\u3067\u3059\u3002
baseUrl \u306b\u30d0\u30c3\u30af\u30b0\u30e9\u30a6\u30f3\u30c9\u3067\u3001grunt serve<\/code> \u3067\u5b9f\u884c\u3059\u308b localhost:9000 \u3092\u8a2d\u5b9a\u3057\u3066\u304a\u308a\u307e\u3059\u3002 <\/p>\n
$ vi test\/protractor-conf.coffee<\/code><\/pre>\n
exports.config =\n\n capabilities:\n browserName: "chrome"\n\n baseUrl: "http:\/\/localhost:9000"\n\n specs: ["e2e\/**\/*.coffee"]\n\n jasmineNodeOpts:\n isVerbose: true\n showColors: true\n defaultTimeoutInterval: 30000<\/code><\/pre>\n
Gruntfile.js \u306bGrunt\u30bf\u30b9\u30af\u8ffd\u52a0<\/h2>\n
$ vi Gruntfile.js<\/code><\/pre>\n
protractor: {\n options: {\n configFile: 'node_modules\/protractor\/referenceConf.js', \/\/ Default config file\n keepAlive: false,\n noColor: false,\n args: {}\n },\n E2E_local: {\n options: {\n configFile: 'test\/protractor-conf.coffee', \/\/ \u5148\u307b\u3069\u4f5c\u6210\u3057\u305f\u30d5\u30a1\u30a4\u30eb\n args: {}\n }\n }\n }<\/code><\/pre>\n
grunt.registerTask('test', [\n 'clean:server',\n 'concurrent:test',\n 'autoprefixer',\n 'connect:test',\n 'karma',\n 'protractor:E2E_local' \/\/ \u3053\u3053\u306b\u8ffd\u8a18\n ]);<\/code><\/pre>\n
E2E\u30c6\u30b9\u30c8\u30b3\u30fc\u30c9\u306e\u4f5c\u6210<\/h2>\n
\u4eca\u56de\u306e\u30b5\u30f3\u30d7\u30eb\u306e\u30c6\u30b9\u30c8\u306e\u5185\u5bb9\u3068\u3057\u3066\u306f\u3001\u5358\u7d14\u306b h4 \u306e\u30c6\u30ad\u30b9\u30c8\u3092\u78ba\u8a8d\u3059\u308b\u3060\u3051\u3067\u3059\u3002<\/p>\n$ mkdir test\/e2e\n$ vi test\/e2e\/mainE2Etest.coffee<\/code><\/pre>\n
"use strict"\ndescribe "mainE2ETest", ->\n beforeEach ->\n browser.get "\/#\/"\n return\n\n it "first h4 text should be 'HTML5 Boilerplate'", ->\n element.all(By.css('.marketing h4')).then (item) ->\n expect(item[0].isDisplayed()).toBe true\n expect(item[0].getText()).toBe('HTML5 Boilerplate')\n return\n\n it "second h4 text should be 'Angular'", ->\n element.all(By.css('.marketing h4')).then (item) ->\n expect(item[1].isDisplayed()).toBe true\n expect(item[1].getText()).toBe('Angular')\n return\n\n it "third h4 text should be 'Karma'", ->\n element.all(By.css('.marketing h4')).then (item) ->\n expect(item[2].isDisplayed()).toBe true\n expect(item[2].getText()).toBe('Karma')\n return\n return<\/code><\/pre>\n
\n
by<\/code> \u304c CoffeeScript \u3067\u4e88\u7d04\u8a9e\u306b\u306a\u3063\u3066\u3044\u308b\u3089\u3057\u304f\u3001\u30a8\u30e9\u30fc\u304c\u51fa\u3066\u3057\u307e\u3046\u306e\u3067\u3001
By<\/code> \u3092\u4f7f\u3046\u3088\u3046\u306b\u3059\u308b\u3068\u56de\u907f\u3067\u304d\u308b\u305d\u3046\u3067\u3059\u3002\u8981\u6ce8\u610f\u3067\u3059\u3002 <\/p>\n