angular · jozzhart · Apr 5, 2018 · Apr 5, 2018 · Apr 6, 2018
diff --git a/protractor-docker/README.md b/protractor-docker/README.md
@@ -111,56 +111,54 @@ We would do the above the steps , by specifying a .yml file and see the results.
 Create a docker-compose.yml 
 
 ``` yaml
-seleniumhub:
-  image: selenium/hub:2.53.0
-  ports:
-    - 4444:4444
-
-# firefoxnode:
-#   image: selenium/node-firefox
-#   expose:
-#     - 5900
-#   links:
-#     - seleniumhub:hub
-
-chromenode:
-  image: selenium/node-chrome:2.53.0
-  ports:
-    - 5900
-  links:
-    - seleniumhub:hub
+version: '3.5'
+services:
+  chrome:
+    image: selenium/node-chrome-debug:3.11.0-californium
+    volumes:
+      - /dev/shm:/dev/shm
+    environment:
+      HUB_HOST: hub
+    ports:
+      - "5900:5900"  
+    networks:
+      - protractortest
+  hub:
+    image: selenium/hub:3.11.0-californium
+    ports:
+      - "4444:4444"
+    networks:
+      - protractortest
+  angular:
+    image: node:6-alpine
+    ports:
+      - 8000:8000
+    volumes:
+      - ./app:/var/www
+    working_dir: /var/www
+    command: ["npm", "start"]
+    networks:
+      - protractortest
+networks:
+  protractortest:
+    name: protractortest
 ```
 
 Then in the terminal, enter the command
 
 ``` shell
 docker-compose up -d
 ```
-In order to scale the number of chrome nodes , one can do :
-
-``` shell 
-docker-compose scale chromenode=5
-```
-
-The number of nodes that one can connect to a selenium hub is by default 5.Hence `chromenode=5`.
-If one wants to increase the number of nodes, one has to change the settings on Hub to support the additional nodes first.
-
-The best way to do would be to wrap all of the above in a shell script file .
-Ensure the shell script file has execute permissions.
 
 ``` shell
-docker -v
-docker-compose -v
-
-docker-compose up -d --remove-orphans
-docker-compose scale chromenode=5
+docker run -it --rm --network=protractortest -v /dev/shm:/dev/shm -v $(pwd):/protractor jozzhart/node-6-protractor ./docker-selenium-grid-conf.js
 ```
-and then reference it in the package.json
+or use the shortcut
 
 ``` shell
 npm test
 ```
 Where to go next
 ----------------
 
-This should get you started with  writing tests using Docker and Protractor . To learn more, see the documentation for [Docker](https://docs.docker.com) and [Protractor](http://www.protractortest.org/#/).
+This should get you started with  writing tests using Docker and Protractor . To learn more, see the documentation for [Docker](https://docs.docker.com) and [Protractor](http://www.protractortest.org/#/).
diff --git a/protractor-docker/app/index.html b/protractor-docker/app/index.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html ng-app="todoApp">
+
+<head>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
+  <script>
+    angular.module('todoApp', [])
+      .controller('TodoListController', function () {
+        var todoList = this;
+        todoList.todos = [{
+            text: 'learn AngularJS',
+            done: true
+          },
+          {
+            text: 'build an AngularJS app',
+            done: false
+          }
+        ];
+
+        todoList.addTodo = function () {
+          todoList.todos.push({
+            text: todoList.todoText,
+            done: false
+          });
+          todoList.todoText = '';
+        };
+
+        todoList.remaining = function () {
+          var count = 0;
+          angular.forEach(todoList.todos, function (todo) {
+            count += todo.done ? 0 : 1;
+          });
+          return count;
+        };
+
+        todoList.archive = function () {
+          var oldTodos = todoList.todos;
+          todoList.todos = [];
+          angular.forEach(oldTodos, function (todo) {
+            if (!todo.done) todoList.todos.push(todo);
+          });
+        };
+      });
+  </script>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
+    crossorigin="anonymous">
+  <style>
+    .done-true {
+      text-decoration: line-through;
+      color: grey;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="row">
+      <br />
+      <br />
+    </div>
+    <div class="row">
+      <div class="well">
+        <h1>Todo</h1>
+        <div ng-controller="TodoListController as todoList">
+          <span>{{todoList.remaining()}} of {{todoList.todos.length}} remaining</span>
+          [
+          <a href="" ng-click="todoList.archive()">archive</a> ]
+          <ul class="unstyled">
+            <li ng-repeat="todo in todoList.todos">
+              <label class="checkbox">
+                <input type="checkbox" ng-model="todo.done">
+                <span class="done-{{todo.done}}">{{todo.text}}</span>
+              </label>
+            </li>
+          </ul>
+          <form ng-submit="todoList.addTodo()">
+            <input type="text" ng-model="todoList.todoText" size="30" placeholder="add new todo here">
+            <input class="btn-primary" type="submit" value="add">
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>
diff --git a/protractor-docker/app/index.js b/protractor-docker/app/index.js
@@ -0,0 +1,12 @@
+var http = require('http');
+var fs = require('fs');
+
+http.createServer(function (req, res) {
+
+  res.writeHead(200, {
+    'Content-Type': 'text/html'
+  });
+
+  fs.createReadStream('./index.html').pipe(res);
+
+}).listen(8000);
diff --git a/protractor-docker/app/package.json b/protractor-docker/app/package.json
@@ -0,0 +1,8 @@
+{
+    "name": "protractor-docker-test-app",
+    "dependencies": {
+    },
+    "scripts": {
+        "start": "node ./"
+    }
+}
diff --git a/protractor-docker/docker-compose.yml b/protractor-docker/docker-compose.yml
@@ -1,25 +1,31 @@
-seleniumhub:
-  image: selenium/hub:2.53.0
-  ports:
-    - 4444:4444
-
-# chromednode:
-#   image: selenium/node-chrome-debug:2.53.0
-#   expose:
-#     - 5900
-#   links:
-#     - seleniumhub:hub
-
-# firefoxnode:
-#   image: selenium/node-firefox
-#   expose:
-#     - 5900
-#   links:
-#     - seleniumhub:hub
-
-chromenode:
-  image: selenium/node-chrome:2.53.0
-  ports:
-    - 5900
-  links:
-    - seleniumhub:hub
+version: '3.5'
+services:
+  chrome:
+    image: selenium/node-chrome-debug:3.11.0-californium
+    volumes:
+      - /dev/shm:/dev/shm
+    environment:
+      HUB_HOST: hub
+    ports:
+      - "5900:5900"  
+    networks:
+      - protractortest
+  hub:
+    image: selenium/hub:3.11.0-californium
+    ports:
+      - "4444:4444"
+    networks:
+      - protractortest
+  angular:
+    image: node:6-alpine
+    ports:
+      - 8000:8000
+    volumes:
+      - ./app:/var/www
+    working_dir: /var/www
+    command: ["npm", "start"]
+    networks:
+      - protractortest
+networks:
+  protractortest:
+    name: protractortest
diff --git a/protractor-docker/docker-selenium-grid-conf.js b/protractor-docker/docker-selenium-grid-conf.js
@@ -1,19 +1,16 @@
 exports.config = {
-	framework: 'jasmine2'
-	, specs: ['specs/*.spec.js']
- 	, seleniumAddress: 'http://localhost:4444/wd/hub'
-	,  capabilities: {
-		browserName: 'chrome'
-		, shardTestFiles: true
-		, maxInstances: 5
-	}
-	, getPageTimeout: 180000
-	, allScriptsTimeout: 180000
-	, onPrepare: function () {
-		browser.manage().window().maximize();
-		browser.manage().timeouts().implicitlyWait(5000);
-	}
-	, jasmineNodeOpts: {
+	framework: 'jasmine2',
+	specs: ['specs/*.spec.js'],
+	seleniumAddress: 'http://hub:4444/wd/hub',
+	capabilities: {
+		browserName: 'chrome',
+		'goog:chromeOptions': {
+			args: ["--headless", "--disable-gpu", "--window-size=800,600"]
+		}
+	},
+	getPageTimeout: 180000,
+	allScriptsTimeout: 180000,
+	jasmineNodeOpts: {
 		defaultTimeoutInterval: 300000
 	}
 };
diff --git a/protractor-docker/package.json b/protractor-docker/package.json
@@ -4,7 +4,7 @@
         "protractor": "4.0.9"
     },
     "scripts": {
-        "pretest": "npm install && ./docker-setup.sh",
-        "test": "protractor docker-selenium-grid-conf.js"
+        "test": "docker run -it --rm --network=protractortest -v /dev/shm:/dev/shm -v $(pwd):/protractor jozzhart/node-6-protractor ./docker-selenium-grid-conf.js",
+        "start": "node ./app"
     }
 }
diff --git a/protractor-docker/specs/app.spec.js b/protractor-docker/specs/app.spec.js
@@ -0,0 +1,16 @@
+describe('On app page', function () {
+
+  beforeAll(function () {
+    browser.get('http://angular:8000');
+  })
+
+  it('should have the expected the title', function () {
+    expect(element(by.css('h1')).getText()).toBe('Todo');
+  });
+
+  it('should update list when I add a todo item', function () {
+    element(by.css('input[type="text"]')).sendKeys('Add protractor test');
+    element(by.css('.btn-primary')).click();
+    expect(element(by.css('ul li:last-child')).getText()).toBe('Add protractor test');
+  });
+});
diff --git a/protractor-docker/specs/protractor.e2e.spec.js b/protractor-docker/specs/protractor.e2e.spec.js
@@ -5,6 +5,6 @@ describe('On Protractor page', function () {
     });
 
     it('should have the expected the title', function () {
-        expect(browser.getTitle()).toBe('Protractor - end to end testing for AngularJS');
+        expect(browser.getTitle()).toBe('Protractor - end-to-end testing for AngularJS');
     });
 });