#1647 Remove PhantomJS from E2E test, and use Chrom Headless Webdriver (#1648)

* Remove PhantonJS from E2E test, and use Chrom Headless Webdriver

* Update Nightwatch

* Optimise Nighteatch config

package.json

@@ -45,7 +45,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-polyfill": "^6.22.0",
     "babel-preset-env": "^1.5.1",
-    "chromedriver": "^2.45.0",
+    "chromedriver": "^78.0.1",
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
     "css-loader": "^2.1.0",
@@ -54,13 +54,11 @@
     "express": "^4.14.1",
     "jasmine": "2.8.0",
     "jasmine-core": "2.8.0",
-    "nightwatch": "^0.9.12",
+    "nightwatch": "^1.3.1",
     "nightwatch-helpers": "^1.2.0",
-    "phantomjs-prebuilt": "^2.1.14",
     "rollup": "^1.1.0",
     "rollup-plugin-buble": "^0.19.6",
     "rollup-plugin-replace": "^2.1.0",
-    "selenium-server": "^2.53.1",
     "terser": "^3.17.0",
     "todomvc-app-css": "^2.1.0",
     "typescript": "^3.7.2",

test/e2e/nightwatch.config.js

@@ -5,20 +5,14 @@ module.exports = {
   'custom_commands_path': ['node_modules/nightwatch-helpers/commands'],
   'custom_assertions_path': ['node_modules/nightwatch-helpers/assertions'],
 
-  'selenium': {
+  'webdriver': {
     'start_process': true,
-    'server_path': require('selenium-server').path,
-    'host': '127.0.0.1',
-    'port': 4444,
-    'cli_args': {
-      'webdriver.chrome.driver': require('chromedriver').path
-    }
+    'port': 9515,
+    'server_path': require('chromedriver').path
   },
 
   'test_settings': {
     'default': {
-      'selenium_port': 4444,
-      'selenium_host': 'localhost',
       'silent': true,
       'screenshots': {
         'enabled': true,
@@ -32,16 +26,10 @@ module.exports = {
       'desiredCapabilities': {
         'browserName': 'chrome',
         'javascriptEnabled': true,
-        'acceptSslCerts': true
-      }
-    },
-
-    'phantomjs': {
-      'desiredCapabilities': {
-        'browserName': 'phantomjs',
-        'javascriptEnabled': true,
         'acceptSslCerts': true,
-        'phantomjs.binary.path': require('phantomjs-prebuilt').path
+        'chromeOptions': {
+          'args': ['--headless']
+        }
       }
     }
   }

test/e2e/runner.js

@@ -9,15 +9,12 @@ if (args.indexOf('--config') === -1) {
   args = args.concat(['--config', 'test/e2e/nightwatch.config.js'])
 }
 if (args.indexOf('--env') === -1) {
-  args = args.concat(['--env', 'phantomjs'])
+  args = args.concat(['--env', 'chrome'])
 }
 var i = args.indexOf('--test')
 if (i > -1) {
   args[i + 1] = 'test/e2e/specs/' + args[i + 1]
 }
-if (args.indexOf('phantomjs') > -1) {
-  process.env.PHANTOMJS = true
-}
 
 var runner = spawn('./node_modules/.bin/nightwatch', args, {
   stdio: 'inherit'

test/e2e/specs/cart.js

@@ -20,7 +20,7 @@ module.exports = {
       .assert.containsText('.cart', 'H&M T-Shirt White - $10.99 x 1')
       .assert.containsText('.cart', 'Total: $1,011.01')
       .click('.cart button')
-      .waitFor(120)
+      .waitFor(200)
       .assert.containsText('.cart', 'Please add some products to cart')
       .assert.containsText('.cart', 'Total: $0.00')
       .assert.containsText('.cart', 'Checkout successful')

test/e2e/specs/todomvc.js

@@ -105,7 +105,7 @@ module.exports = {
       .dblClick('.todo:nth-child(1) label')
       .assert.count('.todo.editing', 1)
       .assert.focused('.todo:nth-child(1) .edit')
-      .clearValue('.todo:nth-child(1) .edit')
+    deleteValue('.todo:nth-child(1) .edit', 'test2')
       .setValue('.todo:nth-child(1) .edit', 'edited!')
       .click('footer') // blur
       .assert.count('.todo.editing', 0)
@@ -114,6 +114,7 @@ module.exports = {
     // editing triggered by enter
     browser
       .dblClick('.todo label')
+    deleteValue('.todo:nth-child(1) .edit', 'edited!')
       .enterValue('.todo:nth-child(1) .edit', 'edited again!')
       .assert.count('.todo.editing', 0)
       .assert.containsText('.todo:nth-child(1) label', 'edited again!')
@@ -121,7 +122,7 @@ module.exports = {
     // cancel
     browser
       .dblClick('.todo label')
-      .clearValue('.todo:nth-child(1) .edit')
+    deleteValue('.todo:nth-child(1) .edit', 'edited again!')
       .setValue('.todo:nth-child(1) .edit', 'edited!')
       .trigger('.todo:nth-child(1) .edit', 'keyup', 27)
       .assert.count('.todo.editing', 0)
@@ -130,6 +131,7 @@ module.exports = {
     // empty value should remove
     browser
       .dblClick('.todo label')
+    deleteValue('.todo:nth-child(1) .edit', 'edited again!')
       .enterValue('.todo:nth-child(1) .edit', ' ')
       .assert.count('.todo', 3)
 
@@ -150,5 +152,9 @@ module.exports = {
         .moveToElement('.todo:nth-child(' + n + ')', 10, 10)
         .click('.todo:nth-child(' + n + ') .destroy')
     }
+
+    function deleteValue (el, text) {
+      return browser.setValue(el, text.split('').map(() => '\u0008'))
+    }
   }
 }