e2e tsconfig types not found: error TS2304: Cannot find name 'browser'

Question

I'm trying to setup an example angular project using a simple webdrioverio e2e test, but run into some compilation errors for my e2e test.

tsconfig setup

The project is setup with notably the following files:

e2e / test / [e2e test code]
e2e / tsconfig.e2e.json
e2e / wdio.conf.js
package.json
tsconfig.json

my base tsconfig.json looks like:

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

the tsconfig.e2e.json looks like:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "module": "CommonJS",
    "outDir": "../dist/out-tsc/e2e",
    "baseUrl": "./",
    "target": "es2018",
    "types": [
      "node",
      "@wdio/sync",
      "@wdio/jasmine-framework",
      "jasminewd2"
    ]
  }
}

output

Running tsc from my IDE terminal or trying the execute the e2e script from package.json results in the following errors:

[0-0] 2021-02-09T15:47:53.019Z WARN @wdio/jasmine-framework: Unable to load spec files quite likely because they rely on `browser` object that is not fu
lly initialised.
`browser` object has only `capabilities` and some flags like `isMobile`.
Helper files that use other `browser` commands have to be moved to `before` hook.
Spec file(s): C:\dev\source\rme\angular-wdio6-builder-demo\e2e\test\specs\basic.spec.ts
 Error:  TSError: ⨯ Unable to compile TypeScript:
e2e/test/specs/basic.spec.ts(7,5): error TS2304: Cannot find name 'browser'.
e2e/test/specs/basic.spec.ts(8,19): error TS2304: Cannot find name 'browser'.
e2e/test/specs/basic.spec.ts(13,5): error TS2304: Cannot find name 'browser'.
e2e/test/specs/basic.spec.ts(14,21): error TS2581: Cannot find name '$'. Do you need to install type definitions for jQuery? Try `npm i @types/jquery`.

my hunch and MRE

I have a feeling that when I'm compiling my e2e code somehow the `tsconfig.e2e.json` contents are ignored since it doesn't pick up the `browser`-object that is specified in the types reference `@wdio/sync`.

A full MRE can be found here on GitLab that was based on this question. It includes a CI script that shows the error output that I experience when running locally as well.

Also note that my intellij IDE references the browser-object just fine and ctrl-clicking it shows me the browser var is situated in the node_modules\@wdio\sync\webdriverio.d.ts file.

edit/additional: In the package.json there is a pree2e script that is executed before e2e, it calls e2e/e2e.cmd:

set TS_NODE_PROJECT=e2e/tsconfig.e2e.json

edit2: the wdio.conf.js-configuration file:

The full file including (generated) comments is also in the minimal reproducable example: e2e/wdio.conf.js

exports.config = {
    runner: 'local',
    path: '/',
    specs: [
      `${__dirname}/test/specs/**/*.ts`
    ],
    exclude: [
    ],
    maxInstances: 10,
    capabilities: [{
        maxInstances: 5,
        browserName: 'chrome',
    }],
    logLevel: 'warn',
    bail: 0,
    baseUrl: `http://localhost:${process.env.PORT || 4200}`,
    waitforTimeout: 10000,
    connectionRetryTimeout: 90000,
    connectionRetryCount: 3,
    services: ['chromedriver'],
    framework: 'jasmine',
    jasmineNodeOpts: {
        requires: ['ts-node/register'],
        defaultTimeoutInterval: 60000,
        expectationResultHandler: function(passed, assertion) {
            // do something
        }
    },
}

Answer 1

You can run tsnode in your wdio.conf file. Also in your jasmine options you should require tsconfig-paths instead:

const tsNode = require('ts-node');
tsNode.register({
  files: true,
  project: './e2e/tsconfig.e2e.json'
});

exports.config = {
....
    jasmineNodeOpts: {
        // Required for Typescript
        requires: ['tsconfig-paths/register'],
...
};