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

[mylifeandcode]

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.

[richardeschloss]

Fwiw, I was able to solve "Unexpected token 'export'" issue by installing @wdio/cli . However, I was hoping the @wdio/schematics would have done that.

The above issue exists on Angular 15 too.

[richardeschloss]

Even when I manually update angular.json and attempt to run ng e2e, I encounter an error that the wdio/cli cannot be found (even though it's there).

If it helps, I'm using Typescript and I have my project type set to "module" (ESM). I don't want to deviate from this because I like the typings I get in the wdio config file.

[chrisweight-elsewhen]

Same here, out of the box, accepting all defaults on ng e2e fails to run with the above problem, also on NG 15

[Routhinator]

Also exists on Angular 16.

I had to do a few things.

• run npm install @wdio/cli --save-dev as suggested by @richardeschloss
• After the first run, the wdio.conf.ts is dropped into the test/ directory regardless of where you tell it your files are. Move this to the root of the project.
• run again selecting the same options, and things will work all the way through and the build config is added to angular.json with the name wdio-run - rename this to e2e to fall in line with Angular and to prevent subsequent runs of ng e2e from clobbering your config.
• Open up wdio.conf.ts - running twice creates two copies of the tsconfig for the e2e tests. The first run will create test/tsconfig.json which will be incomplete, and the second creates test/tsconfig.e2e.json which is complete. It also adds the autoCompileOpts to the wdio.conf.ts twice. I removed the first one and kept the second which pointed to the more complete tsconfig.e2e.json

Now it runs. I get a Launcher is not a constructor error, but that's likely just more post config needed.

[OceansFourteenth]

According to https://github.com/webdriverio/create-wdio/issues/306 you can set type: module in your package.json.