webdriverio/webdriverio-schematics

Add WebdriverIO to an Angular CLI project

Next-gen browser and mobile automation test framework for Node.js.

---

Homepage | Developer Guide | API Reference | Contribute | Changelog | Roadmap

---

WebdriverIO is a test automation framework, for e2e as well as unit and component testing in the browser, that allows you to run tests based on the WebDriver and WebDriver BiDi as well as Appium automation technology. It provides support for your favorite BDD/TDD test framework and will run your tests locally or in the cloud using Sauce Labs, BrowserStack, TestingBot or LambdaTest.

👩‍💻 👨‍💻 Contributing

Do you like WebdriverIO and want to help make it better? Awesome! Have a look into our Contributor Documentation to get started and find out what contributions can be and how to make them.

Getting started with GitHub Codespaces

To get started, create a codespace for this repository by clicking this 👇

A codespace will open in a web-based version of Visual Studio Code. The dev container is fully configured with the software needed for this project.

Note: Dev containers are an open spec that is supported by GitHub Codespaces and other tools.

Getting started with Gitpod

You can also just click on:

to get a ready-to-use development environment for you to start working on this code base.

If you're looking for issues to help out with, check out the issues labeled "good first pick". You can also reach out to our Matrix Channel if you have questions on where to start contributing.

🏢 WebdriverIO for Enterprise

Available as part of the Tidelift Subscription.

The maintainers of WebdriverIO and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open-source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.

📦 Packages

This repository contains some of the core packages of the WebdriverIO project. There are many wonderful curated resources the WebdriverIO community has put together.

Did you build a WebdriverIO service or reporter? That's awesome! Please add it to our configuration wizard and docs (e.g. like in this example commit) as well as to our awesome-webdriverio list. Thank you! 🙏 ❤️

Core

• webdriver - A Node.js bindings implementation for the W3C WebDriver and Mobile JSONWire Protocol
• webdriverio - Next-gen browser and mobile automation test framework for Node.js
• @wdio/cli - A WebdriverIO testrunner command line interface

Helper

• @wdio/config - A helper utility to parse and validate WebdriverIO options
• @wdio/logger - A helper utility for logging WebdriverIO packages
• @wdio/protocols - Utility package providing information about automation protocols
• @wdio/repl - A WDIO helper utility to provide a repl interface for WebdriverIO
• @wdio/reporter - A WebdriverIO utility to help report all events
• @wdio/runner - A WebdriverIO service that runs tests in arbitrary environments
• @wdio/utils - A WDIO helper utility to provide several utility functions used across the project
• @wdio/globals - A WDIO helper utility for importing global variables directly

Reporter

• @wdio/allure-reporter - A WebdriverIO reporter plugin to create Allure Test Reports
• @wdio/concise-reporter - A WebdriverIO reporter plugin to create concise test reports
• @wdio/dot-reporter - A WebdriverIO plugin to report in dot style
• @wdio/junit-reporter - A WebdriverIO reporter that creates test results in XML format
• @wdio/spec-reporter - A WebdriverIO plugin to report in spec style
• @wdio/sumologic-reporter - A WebdriverIO reporter that sends test results to Sumologic for data analyses

Services

• @wdio/appium-service - A WebdriverIO service to start & stop Appium Server
• @wdio/browserstack-service - A WebdriverIO service that can be used to use BrowserStack Test Observability which is a reporting, debugging, and test suite quality tracking tool for any test running anywhere. The service also helps for a better integration with the BrowserStack grid if you're running tests on the grid.
• @wdio/devtools-service - A WebdriverIO service that allows you to run Chrome DevTools commands in your tests
• @wdio/firefox-profile-service - A WebdriverIO service that lets you define your Firefox profile in your wdio.conf.js
• @wdio/sauce-service - A WebdriverIO service that provides a better integration into Sauce Labs
• @wdio/shared-store-service - A WebdriverIO service to exchange data across processes
• @wdio/testingbot-service - A WebdriverIO service that provides a better integration into TestingBot

Runner

• @wdio/local-runner - A WebdriverIO runner to run tests locally
• @wdio/browser-runner - A WebdriverIO runner to run unit or component tests in the browser

Framework Adapters

• @wdio/cucumber-framework - Adapter for Cucumber testing framework
• @wdio/jasmine-framework - Adapter for Jasmine testing framework
• @wdio/mocha-framework - Adapter for Mocha testing framework.

Others

• eslint-plugin-wdio - Eslint rules for WebdriverIO
• @wdio/smoke-test-reporter - A WebdriverIO utility to smoke test reporters for internal testing purposes
• @wdio/smoke-test-service - A WebdriverIO utility to smoke test services for internal testing purposes
• @wdio/webdriver-mock-service - A WebdriverIO service to stub all endpoints for internal testing purposes

🤝 Project Governance

This project is maintained by awesome people following a common set of rules and treating each other with respect and appreciation.

👨‍🍳 👩‍🍳 Backers

Become a backer and show your support for our open-source project.

💸 Sponsors

Does your company use WebdriverIO? Ask your manager or marketing team if your company would be interested in supporting our project. Support will allow the maintainers to dedicate more time to maintenance and new features for everyone. Also, your company's logo will show on GitHub - who doesn't want a little extra exposure? Here's the info.

💎 Premium Sponsor

We are immensely grateful to our exclusive Premium Sponsor for their invaluable support in the development of this project:

     

🥈 Silver Sponsor

🥉 Bronze Sponsor

📄 License

MIT

🔰 Badge

Show the world you're using webdriver.io →

GitHub markup

[![tested with webdriver.io](https://img.shields.io/badge/tested%20with-webdriver.io-%23ea5906)](https://webdriver.io/)

HTML

<a href="https://webdriver.io/">
    <img alt="WebdriverIO" src="https://img.shields.io/badge/tested%20with-webdriver.io-%23ea5906">
</a>

👏 Supporters

webdriverio-schematics's Issues

the website -> https://webdriverio.io/ not working :)

Spawned dev server is shutdown before tests run

The spawned dev server is shut down before the tests run.
This is probably caused by the return here: https://github.com/webdriverio/webdriverio-schematics/blob/main/src/builders/webdriverio/index.ts#L100

Instead, the result should be memorized and the return statement only executed in the finally block. I'll prepare a PR for this.

Cannot start wdio tests

I added the schematics and tried run the e2e tests. However, there was an error where it said error parsing the config file.

Installation Output

> ng add @wdio/schematics
ℹ Using package manager: npm
✔ Found compatible package version: @wdio/[email protected].
✔ Package information loaded.
 
The package @wdio/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.

=========================
WDIO Configuration Helper
=========================

? Where is your automation backend located? On my local machine
? Which framework do you want to use? cucumber
? Do you want to use a compiler? TypeScript (https://www.typescriptlang.org/)
? Where are your feature files located? ./features/**/*.feature
? Where are your step definitions located? ./features/step-definitions/steps.ts
? Do you want WebdriverIO to autogenerate some test files? Yes
? Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? Yes
? Where are your page objects located? ./features/pageobjects/**/*.ts
? Which reporter do you want to use? spec, junit
? Do you want to add a service to your test setup? chromedriver
? What is the base url? http://localhost:4200

Installing wdio packages:
- @wdio/local-runner
- @wdio/cucumber-framework
- @wdio/spec-reporter
- @wdio/junit-reporter
- wdio-chromedriver-service
- ts-node
- typescript
- chromedriver

Test output

> ng run frontend:wdio-run
⠴ Generating browser application bundles (phase: building)...
warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.44 MB
polyfills.js        | polyfills     | 128.50 kB
main.js             | main          |  26.88 kB
styles.css          | styles        |  23.84 kB
runtime.js          | runtime       |   6.62 kB

                    | Initial Total |   2.62 MB

Build at: 2021-10-03T23:58:50.874Z - Hash: 0cdc5040b623167c275a - Time: 7367ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
2021-10-03T23:58:51.048Z ERROR @wdio/config:ConfigParser: Failed loading configuration file: /home/xzhan/Development/Projects/desci_online/frontend/wdio.conf.ts: Unexpected token 'export'
Unexpected token 'export'

`wdio.conf.ts`

export const config: WebdriverIO.Config = {
  //
  // ====================
  // Runner Configuration
  // ====================
  //
  //
  // ==================
  // Specify Test Files
  // ==================
  // Define which test specs should run. The pattern is relative to the directory
  // from which `wdio` was called.
  //
  // The specs are defined as an array of spec files (optionally using wildcards
  // that will be expanded). The test for each spec file will be run in a separate
  // worker process. In order to have a group of spec files run in the same worker
  // process simply enclose them in an array within the specs array.
  //
  // If you are calling `wdio` from an NPM script (see https://docs.npmjs.com/cli/run-script),
  // then the current working directory is where your `package.json` resides, so `wdio`
  // will be called from there.
  //
  specs: ['./features/**/*.feature'],
  // Patterns to exclude.
  exclude: [
    // 'path/to/excluded/files'
  ],
  //
  // ============
  // Capabilities
  // ============
  // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
  // time. Depending on the number of capabilities, WebdriverIO launches several test
  // sessions. Within your capabilities you can overwrite the spec and exclude options in
  // order to group specific specs to a specific capability.
  //
  // First, you can define how many instances should be started at the same time. Let's
  // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
  // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
  // files and you set maxInstances to 10, all spec files will get tested at the same time
  // and 30 processes will get spawned. The property handles how many capabilities
  // from the same test should run tests.
  //
  maxInstances: 10,
  //
  // If you have trouble getting all important capabilities together, check out the
  // Sauce Labs platform configurator - a great tool to configure your capabilities:
  // https://docs.saucelabs.com/reference/platforms-configurator
  //
  capabilities: [
    {
      // maxInstances can get overwritten per capability. So if you have an in-house Selenium
      // grid with only 5 firefox instances available you can make sure that not more than
      // 5 instances get started at a time.
      maxInstances: 5,
      //
      browserName: 'chrome',
      acceptInsecureCerts: true,
      // If outputDir is provided WebdriverIO can capture driver session logs
      // it is possible to configure which logTypes to include/exclude.
      // excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
      // excludeDriverLogs: ['bugreport', 'server'],
    },
  ],
  //
  // ===================
  // Test Configurations
  // ===================
  // Define all options that are relevant for the WebdriverIO instance here
  //
  // Level of logging verbosity: trace | debug | info | warn | error | silent
  logLevel: 'info',
  //
  // Set specific log levels per logger
  // loggers:
  // - webdriver, webdriverio
  // - @wdio/browserstack-service, @wdio/devtools-service, @wdio/sauce-service
  // - @wdio/mocha-framework, @wdio/jasmine-framework
  // - @wdio/local-runner
  // - @wdio/sumologic-reporter
  // - @wdio/cli, @wdio/config, @wdio/utils
  // Level of logging verbosity: trace | debug | info | warn | error | silent
  // logLevels: {
  //     webdriver: 'info',
  //     '@wdio/appium-service': 'info'
  // },
  //
  // 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).
  bail: 0,
  //
  // Set a base URL in order to shorten url command calls. If your `url` parameter starts
  // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
  // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
  // gets prepended directly.
  baseUrl: 'http://localhost:4200',
  //
  // Default timeout for all waitFor* commands.
  waitforTimeout: 10000,
  //
  // Default timeout in milliseconds for request
  // if browser driver or grid doesn't send response
  connectionRetryTimeout: 120000,
  //
  // Default request retries count
  connectionRetryCount: 3,
  //
  // Test runner services
  // Services take over a specific job you don't want to take care of. They enhance
  // your test setup with almost no effort. Unlike plugins, they don't add new
  // commands. Instead, they hook themselves up into the test process.
  services: ['chromedriver'],

  // Framework you want to run your specs with.
  // The following are supported: Mocha, Jasmine, and Cucumber
  // see also: https://webdriver.io/docs/frameworks
  //
  // Make sure you have the wdio adapter package for the specific framework installed
  // before running any tests.
  framework: 'cucumber',
  //
  // The number of times to retry the entire specfile when it fails as a whole
  // specFileRetries: 1,
  //
  // Delay in seconds between the spec file retry attempts
  // specFileRetriesDelay: 0,
  //
  // Whether or not retried specfiles should be retried immediately or deferred to the end of the queue
  // specFileRetriesDeferred: false,
  //
  // Test reporter for stdout.
  // The only one supported by default is 'dot'
  // see also: https://webdriver.io/docs/dot-reporter
  reporters: ['spec', 'junit'],

  //
  // If you are using Cucumber you need to specify the location of your step definitions.
  cucumberOpts: {
    // <string[]> (file/dir) require files before executing features
    require: ['./features/step-definitions/steps.ts'],
    // <boolean> show full backtrace for errors
    backtrace: false,
    // <string[]> ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
    requireModule: [],
    // <boolean> invoke formatters without executing steps
    dryRun: false,
    // <boolean> abort the run on first failure
    failFast: false,
    // <string[]> (type[:path]) specify the output format, optionally supply PATH to redirect formatter output (repeatable)
    format: ['pretty'],
    // <boolean> hide step definition snippets for pending steps
    snippets: true,
    // <boolean> hide source uris
    source: true,
    // <string[]> (name) specify the profile to use
    profile: [],
    // <boolean> fail if there are any undefined or pending steps
    strict: false,
    // <string> (expression) only execute the features or scenarios with tags matching the expression
    tagExpression: '',
    // <number> timeout for step definitions
    timeout: 60000,
    // <boolean> Enable this config to treat undefined definitions as warnings.
    ignoreUndefinedDefinitions: false,
  },

  //
  // =====
  // Hooks
  // =====
  // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
  // it and to build services around it. You can either apply a single function or an array of
  // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
  // resolved to continue.
  /**
   * Gets executed once before all workers get launched.
   * @param {Object} config wdio configuration object
   * @param {Array.<Object>} capabilities list of capabilities details
   */
  // onPrepare: function (config, capabilities) {
  // },
  /**
   * Gets executed before a worker process is spawned and can be used to initialise specific service
   * for that worker as well as modify runtime environments in an async fashion.
   * @param  {String} cid      capability id (e.g 0-0)
   * @param  {[type]} caps     object containing capabilities for session that will be spawn in the worker
   * @param  {[type]} specs    specs to be run in the worker process
   * @param  {[type]} args     object that will be merged with the main configuration once worker is initialised
   * @param  {[type]} execArgv list of string arguments passed to the worker process
   */
  // onWorkerStart: function (cid, caps, specs, args, execArgv) {
  // },
  /**
   * Gets executed just before initialising the webdriver session and test framework. It allows you
   * to manipulate configurations depending on the capability or spec.
   * @param {Object} config wdio configuration object
   * @param {Array.<Object>} capabilities list of capabilities details
   * @param {Array.<String>} specs List of spec file paths that are to be run
   * @param {String} cid worker id (e.g. 0-0)
   */
  // beforeSession: function (config, capabilities, specs, cid) {
  // },
  /**
   * Gets executed before test execution begins. At this point you can access to all global
   * variables like `browser`. It is the perfect place to define custom commands.
   * @param {Array.<Object>} capabilities list of capabilities details
   * @param {Array.<String>} specs        List of spec file paths that are to be run
   * @param {Object}         browser      instance of created browser/device session
   */
  // before: function (capabilities, specs) {
  // },
  /**
   * Runs before a WebdriverIO command gets executed.
   * @param {String} commandName hook command name
   * @param {Array} args arguments that command would receive
   */
  // beforeCommand: function (commandName, args) {
  // },
  /**
   * Cucumber Hooks
   *
   * Runs before a Cucumber Feature.
   * @param {String}                   uri      path to feature file
   * @param {GherkinDocument.IFeature} feature  Cucumber feature object
   */
  // beforeFeature: function (uri, feature) {
  // },
  /**
   *
   * Runs before a Cucumber Scenario.
   * @param {ITestCaseHookParameter} world world object containing information on pickle and test step
   */
  // beforeScenario: function (world) {
  // },
  /**
   *
   * Runs before a Cucumber Step.
   * @param {Pickle.IPickleStep} step     step data
   * @param {IPickle}            scenario scenario pickle
   */
  // beforeStep: function (step, scenario) {
  // },
  /**
   *
   * Runs after a Cucumber Step.
   * @param {Pickle.IPickleStep} step     step data
   * @param {IPickle}            scenario scenario pickle
   * @param {Object}             result   results object containing scenario results
   * @param {boolean}            result.passed   true if scenario has passed
   * @param {string}             result.error    error stack if scenario failed
   * @param {number}             result.duration duration of scenario in milliseconds
   */
  // afterStep: function (step, scenario, result) {
  // },
  /**
   *
   * Runs before a Cucumber Scenario.
   * @param {ITestCaseHookParameter} world  world object containing information on pickle and test step
   * @param {Object}                 result results object containing scenario results
   * @param {boolean}                result.passed   true if scenario has passed
   * @param {string}                 result.error    error stack if scenario failed
   * @param {number}                 result.duration duration of scenario in milliseconds
   */
  // afterScenario: function (world, result) {
  // },
  /**
   *
   * Runs after a Cucumber Feature.
   * @param {String}                   uri      path to feature file
   * @param {GherkinDocument.IFeature} feature  Cucumber feature object
   */
  // afterFeature: function (uri, feature) {
  // },

  /**
   * Runs after a WebdriverIO command gets executed
   * @param {String} commandName hook command name
   * @param {Array} args arguments that command would receive
   * @param {Number} result 0 - command success, 1 - command error
   * @param {Object} error error object if any
   */
  // afterCommand: function (commandName, args, result, error) {
  // },
  /**
   * Gets executed after all tests are done. You still have access to all global variables from
   * the test.
   * @param {Number} result 0 - test pass, 1 - test fail
   * @param {Array.<Object>} capabilities list of capabilities details
   * @param {Array.<String>} specs List of spec file paths that ran
   */
  // after: function (result, capabilities, specs) {
  // },
  /**
   * Gets executed right after terminating the webdriver session.
   * @param {Object} config wdio configuration object
   * @param {Array.<Object>} capabilities list of capabilities details
   * @param {Array.<String>} specs List of spec file paths that ran
   */
  // afterSession: function (config, capabilities, specs) {
  // },
  /**
   * Gets executed after all workers got shut down and the process is about to exit. An error
   * thrown in the onComplete hook will result in the test run failing.
   * @param {Object} exitCode 0 - success, 1 - fail
   * @param {Object} config wdio configuration object
   * @param {Array.<Object>} capabilities list of capabilities details
   * @param {<Object>} results object containing test results
   */
  // onComplete: function(exitCode, config, capabilities, results) {
  // },
  /**
   * Gets executed when a refresh happens.
   * @param {String} oldSessionId session ID of the old session
   * @param {String} newSessionId session ID of the new session
   */
  //onReload: function(oldSessionId, newSessionId) {
  //
  autoCompileOpts: {
    tsNodeOpts: {
      transpileOnly: true,
      project: __dirname + '/features/tsconfig.e2e.json',
    },
  },
};

I am using Node 14.17.5 and Angular 12.2.8. Any help is appreciated!

Using Angular CLI to Add WebdriverIO Results in Error and Can't Run Tests

Under Angular 14.1, I ran ng e2e and went through the prompts to install the schematics for WebdriverIO. But at the end, I had an error:

Configuration file was created successfully!
To run your tests, execute:
$ npx wdio run test/wdio.conf.ts

ENOENT: no such file or directory, open 'C:\DevPOC\Angular14App\wdio.conf.ts'

This was on an Angular 14 app without any real implementation (basically, just what the CLI creates for a new app). I created another new app and tried again, with the same result.

When I actually try to run the app using npx wdio run test/wdio.conf.ts, I get the following:

C:\DevPOC\Angular14App\test\wdio.conf.ts:1
export const config = {
^^^^^^

SyntaxError: Unexpected token 'export'
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Module.m._compile (C:\DevPOC\Angular14App\node_modules\ts-node\src\index.ts:1618:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Object.require.extensions.<computed> [as .ts] (C:\DevPOC\Angular14App\node_modules\ts-node\src\index.ts:1621:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)

Steps to reproduce:

1. Use ng new to create a new app with Angular 14.1.
2. Run ng e2e to add the WebdriverIO schematics.
3. Check output for error message at the end.

Add unit tests

Currently there are no unit tests setup for the project. It would be great to have a decent test coverage.

Angular 12 support

It seems the schematics are not compatible with Angular 12. Will this be supported in the future, or would you be open to a pull request?

`--removeProtractor` Flag not working

What I did:

1. npm i -g @angular/cli@latest (=> 11.2.11)
2. ng new wdio-test (strict & routing yes, styling format scss)
3. ng add @wdio/schematics --yes --removeProtractor

Expected:

• protractor dependency removed from package.json
• e2e folder removed
• e2e property in angular.json configured to not use protractor anymore

Actual:

• protractor dependency still in package.json
• e2e folder still existing
• angular.json is untouched
• ENOENT: no such file or directory, open '[...]\wdio-test\wdio.conf.js'
  (probably its own issue, as a wdio.conf.ts is created)

Typing issue with @wdio/spec-reporter

Version v1.1.1

Issue

@wdio/spec-reporter doesn't have any types which makes Vscode complain about it.

Solution(s)

Either remove @wdio/spec-reporter from tsconfig.e2e.json#types or add a package.json#types in @wdio/spec-reporter itself.

Support WebdriverIO v8

After upgrading from WDIO v7 (7.30.2) to v8 (8.8.8) I'm getting "Launcher is not a constructor" when using this schematic.

I have the schematic configured to use a tsconfig specific to running WDIO:

{
    "compilerOptions": {
        "resolveJsonModule": true,
        "target": "ES5",
        "types": [
            "node",
            "@wdio/globals/types",
            "@wdio/mocha-framework"
        ]
    }
}

My Angular v15 (15.2.6) project is using:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "ES2022",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "lib": [
      "ES2022",
      "dom"
    ],
    "resolveJsonModule": true,
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

I tried to debug this using ts-node REPL from the root of the project and discovered a few things (which could indicate that I've misconfigured something, though I could still use your wisdom):

> const Launcher = require('@wdio/cli').default
undefined
> console.log(Launcher)
undefined
undefined

> const Launcher = require('@wdio/cli')
undefined
> console.log(Launcher)
{ Launcher: [class Launcher], run: [AsyncFunction: run] }
undefined

> import Launcher from '@wdio/cli'
<repl>.ts:4:8 - error TS2613: Module '"<project path>/node_modules/@wdio/cli/build/index"' has no default export. Did you mean to use 'import { Launcher } from "<project path>/node_modules/@wdio/cli/build/index"' instead?

Is it possible that @wdio/cli no longer has a default export? Which would cause an error in the following code:

webdriverio-schematics/src/builders/webdriverio/index.ts

Line 28 in bf398da

const Launcher = require(path.join(process.cwd(), 'node_modules', '@wdio', 'cli')).default

webdriverio-schematics/src/builders/webdriverio/index.ts

Line 96 in bf398da

const launcher: LauncherType = new Launcher(

Current build is failing

It seems that the current build is failing due to the fact that if you run the config wizard with the --yes flag the returned object for answers is:

{
  backend: 'On my local machine',
  framework: '@wdio/mocha-framework$--$mocha',
  isUsingCompiler: 'TypeScript (https://www.typescriptlang.org/)',
  specs: './test/specs/**/*.ts',
  generateTestFiles: true,
  usePageObjects: true,
  pages: './test/pageobjects/**/*.ts',
  reporters: [ '@wdio/spec-reporter$--$spec' ],
  plugins: 'wdio-wait-for$--$wait-for', // <----- This should be an array
  services: [ 'wdio-chromedriver-service$--$chromedriver' ],
  baseUrl: 'http://localhost',
  npmInstall: true
}

The plugins property should be an array here. This seems to be a bug in WebdriverIO. I will still file it here as a memory to get back to it once it is fixed there.

Typing issue with webdriverio/sync

Version: v1.1.1

According to this page: https://webdriver.io/docs/sync-vs-async, the sync mode will not be supported anymore.

But webdriverio/sync is still specified in tsconfig.e2e.json which causes typing issues.

Schematics should be installed as a devDependency

Version: v1.1.1

Running ng add @wdio/schematics will install the package as a direct dependency of the project, which is not correct.

// package.json
{
  "dependencies": {
     "@wdio/schematics": "^1.1.1"
  }
}

The package should be installed in devDependencies.

The `e2e` target is not created

I created a new empty Angular v13 project and added the package:-

ng add @wdio/schematics --removeProtractor

with the following options:-

✔ Found compatible package version: @wdio/[email protected].
✔ Package information loaded.

The package @wdio/[email protected] will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.

=========================
WDIO Configuration Helper
=========================

? Where is your automation backend located? On my local machine
? Which framework do you want to use? jasmine
? Do you want to use a compiler? TypeScript (https://www.typescriptlang.org/)
? Where are your test specs located? ./test/specs/**/*.ts
? Do you want WebdriverIO to autogenerate some test files? Yes
? Do you want to use page objects (https://martinfowler.com/bliki/PageObject.html)? No
? Which reporter do you want to use? spec
? Do you want to add a plugin to your test setup?
? Do you want to add a service to your test setup? chromedriver
? What is the base url? http://localhost
? Do you want me to run `npm install` Yes

Installing wdio packages:
- @wdio/local-runner
- @wdio/jasmine-framework
- @wdio/spec-reporter
- wdio-chromedriver-service
- ts-node
- typescript
- chromedriver

When I run ng e2e I get:-

Cannot find "e2e" target for the specified project.

I inspected the angular.json file and the e2e target is missing.

Shouldn't ng add @wdio/schematics --removeProtractor update the angular.json file to include the e2e target?

What should the e2e target look like so I can add it myself?

Update `angular-devkit` to v13

The upgrade from Angular DevKit from v12 to v13 included some breaking changes particular around the JSON parser. They have removed the public API that we use in json.ts:

import {
  JsonAstArray,
  JsonAstKeyValue,
  JsonAstNode,
  JsonAstObject,
  JsonValue,
  JsonParseMode,
  parseJsonAst
} from '@angular-devkit/core';

They recommend to use a separate JSON parser. Any contributions that resolves the bug are highly appreciated. Please take a look into our contribution guidelines and let us know if you have any questions. Cheers!

Typing is not recognized in Vscode

Version: v1.1.1

Issue

Running ng add @wdio/schematics will add a test/tsconfig.e2e.json file.

But Vscode only knowns typescript configuration file named tsconfig.json.

This results in multiple typing errors :

Solution

Use tsconfig.json instead of tsconfig.e2e.json to name the typescript configuration file.

If this project is deprecated, please note it in readme.