fix(e2e-webdriverio): PR feedback

Author: christian-bromann

packages/@vue/cli-plugin-e2e-webdriverio/generator/index.js

@@ -13,12 +13,14 @@ module.exports = (api, { webdrivers }) => {
 
   if (webdrivers && webdrivers.includes('firefox')) {
     devDependencies.geckodriver = pluginDeps.geckodriver
+    devDependencies['wdio-geckodriver-service'] = pluginDeps['wdio-geckodriver-service']
   }
   if (webdrivers && webdrivers.includes('chrome')) {
     // chromedriver major version bumps every 6 weeks following Chrome
     // so there may be a mismatch between
     // user's installed browser version and the default provided version
     // fallback to the devDependencies version in case detection fails
+    devDependencies['wdio-chromedriver-service'] = pluginDeps['wdio-chromedriver-service']
     devDependencies.chromedriver = installedBrowsers.chrome
       ? installedBrowsers.chrome.match(/^(\d+)\./)[1]
       : pluginDeps.chromedriver

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/pageobjects/app.js renamed to packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/pageobjects/app.page.js

@@ -12,4 +12,5 @@ class App {
   }
 }
 
-module.exports = new App()
+<%- hasTS ? 'export default new App()' : 'module.exports = new App()' %>
+

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/tests/e2e/specs/app.spec.js

@@ -1,8 +1,8 @@
-const App = require('../pageobjects/app')
+<%- hasTS ? 'import App from \'../pageobjects/app.page\'' : 'const App = require(\'../pageobjects/app.page\')' %>
 
 describe('Vue.js app', () => {
   it('should open and render', () => {
     App.open()
-    expect(App.heading).toHaveText('Welcome to Your Vue.js App')
+    expect(App.heading).toHaveText('Welcome to Your Vue.js <%- hasTS ? '+ TypeScript ' : '' %>App')
   })
 })

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/wdio.local.conf.js

@@ -1,4 +1,4 @@
-const { config } = require('./wdio.shared.conf')
+<%- hasTS ? 'const { config } = require(\'./wdio.shared.conf.ts\')' : 'const { config } = require(\'./wdio.shared.conf\')' %>
 
 exports.config = {
   /**
@@ -9,13 +9,17 @@ exports.config = {
    * config for local testing
    */
   maxInstances: 1,
-  services: ['chromedriver'],
+  services: ['chromedriver', 'geckodriver'],
   capabilities: [{
     browserName: 'chrome',
+    acceptInsecureCerts: true,
     'goog:chromeOptions': {
       args: process.argv.includes('--headless')
         ? ['--headless', '--disable-gpu']
         : []
     }
+  }, {
+    browserName: 'firefox',
+    acceptInsecureCerts: true
   }]
 }

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/wdio.sauce.conf.js

@@ -1,4 +1,4 @@
-const { config } = require('./wdio.shared.conf')
+<%- hasTS ? 'import { config } from \'./wdio.shared.conf.ts\'' : 'const { config } = require(\'./wdio.shared.conf\')' %>
 
 const BUILD_ID = Math.ceil(Date.now() / 1000)
 

packages/@vue/cli-plugin-e2e-webdriverio/generator/template/wdio.shared.conf.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+const path = require('path')
 
 exports.config = {
   // ==================
@@ -10,7 +11,7 @@ exports.config = {
   // directory is where your package.json resides, so `wdio` will be called from there.
   //
   specs: [
-    __dirname + '/tests/e2e/**/*.spec.js'
+    path.join(__dirname, '/tests/e2e/**/*.spec.js')
   ],
   // Patterns to exclude.
   exclude: [
@@ -27,7 +28,7 @@ exports.config = {
   logLevel: 'trace',
   //
   // Set directory to store all logs into
-  outputDir: __dirname + '/logs',
+  outputDir: path.join(__dirname, '/logs'),
   //
   // If you only want to run your tests until a specific amount of tests have failed use
   // bail (default is 0 - don't bail, run all tests).
@@ -60,6 +61,7 @@ exports.config = {
   mochaOpts: {
     ui: 'bdd',
     timeout: 30000,
+    <%- hasTS ? 'require: \'ts-node/register\'' : '' %>
   },
   //
   // =====

packages/@vue/cli-plugin-e2e-webdriverio/index.js

@@ -1,3 +1,4 @@
+const fs = require('fs')
 const path = require('path')
 
 const { info, chalk, execa } = require('@vue/cli-shared-utils')
@@ -32,9 +33,10 @@ module.exports = (api, options) => {
         rawArgs.push(`--baseUrl=${url}`)
       }
 
+      const isTS = fs.existsSync(path.join(process.cwd(), 'tsconfig.json'))
       const configFile = !args.remote
-        ? path.join(process.cwd(), 'tests', 'wdio.local.conf.js')
-        : path.join(process.cwd(), 'tests', 'wdio.sauce.conf.js')
+        ? path.join(process.cwd(), 'wdio.local.conf.' + (isTS ? 'ts' : 'js'))
+        : path.join(process.cwd(), 'wdio.sauce.conf.' + (isTS ? 'ts' : 'js'))
       const wdioBinPath = require.resolve('@wdio/cli/bin/wdio')
 
       const runArgs = ['run', configFile, ...rawArgs]

packages/@vue/cli-plugin-e2e-webdriverio/package.json

@@ -33,11 +33,18 @@
     "@wdio/spec-reporter": "^6.1.9",
     "@wdio/sync": "^6.1.8",
     "eslint-plugin-wdio": "^6.0.12",
-    "webdriverio": "^6.1.11",
-    "wdio-chromedriver-service": "^6.0.3"
+    "webdriverio": "^6.1.11"
   },
   "peerDependencies": {
-    "chromedriver": "*"
+    "chromedriver": "*",
+    "geckodriver": "*",
+    "wdio-chromedriver-service": "^6.0.3",
+    "wdio-geckodriver-service": "^1.1.0"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "chromedriver": "*",
+    "geckodriver": "*",
+    "wdio-chromedriver-service": "^6.0.3",
+    "wdio-geckodriver-service": "^1.1.0"
+  }
 }

packages/@vue/cli-plugin-e2e-webdriverio/prompts.js

@@ -0,0 +1,22 @@
+const { installedBrowsers } = require('@vue/cli-shared-utils')
+
+module.exports = [
+  {
+    name: 'webdrivers',
+    type: `checkbox`,
+    message: `Pick browsers to run end-to-end test on!!!!!`,
+    choices: [
+      {
+        name: `Chrome`,
+        value: 'chrome',
+        checked: true
+      },
+      {
+        name: 'Firefox',
+        value: 'firefox',
+        // check the "Firefox" option if user has installed it
+        checked: !!installedBrowsers.firefox
+      }
+    ]
+  }
+]

packages/@vue/cli/lib/promptModules/e2e.js

@@ -36,7 +36,7 @@ module.exports = cli => {
 
   cli.injectPrompt({
     name: 'webdrivers',
-    when: answers => answers.e2e === 'nightwatch',
+    when: answers => ['nightwatch', 'webdriverio'].includes(answers.e2e),
     type: `checkbox`,
     message: `Pick browsers to run end-to-end test on`,
     choices: [