I am facing challenges while setting up a sample angular project with a basic webdriverio end-to-end test, encountering some compilation errors in my e2e test.
Setting up tsconfig
The project is configured with the following key files:
e2e / test / [e2e test code]
e2e / tsconfig.e2e.json
e2e / wdio.conf.js
package.json
tsconfig.json
Here's how my base tsconfig.json appears:
{
"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
}
}
And here's how 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 Errors
When running tsc from my IDE terminal or trying to execute the e2e script from package.json, I encounter the following compilation 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 fully 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`.
Assumption and Minimized Reproducible Example
I suspect that during the compilation of my e2e code, the contents of `tsconfig.e2e.json` are somehow being ignored as it fails to recognize the `browser` object specified in the types reference `@wdio/sync`.A detailed Minimal Reproducible Example (MRE) can be accessed here on GitLab, which was inspired by this question. The CI script also displays the error output that occurs locally.
Additionally, note that my IntelliJ IDE correctly references the `browser` object and clicking on it shows that the browser variable is located in the `node_modules\@wdio\sync\webdriverio.d.ts` file.
Additional Update:
In the package.json, there is a pree2e script executed before e2e, calling e2e/e2e.cmd:
set TS_NODE_PROJECT=e2e/tsconfig.e2e.json
Second Update: the wdio.conf.js Configuration File:
The complete file along with generated comments is also available in the minimal reproducible 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
}
},
}