search

webdriverio / webdriverio

Next-gen browser and mobile automation test framework for Node.js
http://webdriver.io
MIT License
9.04k stars 2.5k forks source link

[🐛 Bug]: Webdriver.io cannot be added to Angular project using Typescript + Jasmine Guidelines #8328

Closed yogeshgadge closed 2 years ago

yogeshgadge commented 2 years ago

Have you read the Contributing Guidelines on issues?

WebdriverIO Version

7.19.7

Node.js Version

16

Mode

WDIO Testrunner

Which capabilities are you using?

Followed Typescript steps https://webdriver.io/docs/typescript#configuration and created `wdio.conf.ts`

export const config = {
    // ...
    autoCompileOpts: {
        autoCompile: true,
        // see https://github.com/TypeStrong/ts-node#cli-and-programmatic-options
        // for all available options
        tsNodeOpts: {
            transpileOnly: true,
            project: 'tsconfig.json'
        },
        // tsconfig-paths is only used if "tsConfigPathsOpts" are provided, if you
        // do please make sure "tsconfig-paths" is installed as dependency
        tsConfigPathsOpts: {
            baseUrl: './'
        }
    }
}

Run wdio run projects/e2e-wdio/wdio.conf.ts


### What happened?

SyntaxError: Unexpected token 'export'

### What is your expected behavior?

_No response_

### How to reproduce the bug.

npm install @angular/cli -g ng new my-proj mkdir projects/e2e-wdio/ //create wdio.conf.ts 


### Relevant log output

```typescript
/REDACTED/projects/e2e-wdio/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:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Module.m._compile (/REDACTED/node_modules/ts-node/src/index.ts:1056:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.require.extensions.<computed> [as .ts] (/REDACTED/node_modules/ts-node/src/index.ts:1059: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)


### Code of Conduct

- [X] I agree to follow this project's Code of Conduct

### Is there an existing issue for this?

- [X] I have searched the existing issues
christian-bromann commented 2 years ago

Can you provide a reproducible example? Have you tried to run npm init wdio and setup a new WebdriverIO project with TypeScript this way?

yogeshgadge commented 2 years ago

I have tried npm init wdio . in my existing project and gives same error.

Let me try that approach in a brand new angular project.

christian-bromann commented 2 years ago

If i run npm init wdio . in a fresh directory I am able to run TypeScript tests. That is why a reproducible example would be helpful because we don't know your setup.

yogeshgadge commented 2 years ago

Tried this fresh:-

Fresh new project

npm install @angular/cli -g
ng new my-wdio

Choose basic angular project

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss         
       ]
CREATE my-wdio/README.md (1052 bytes)
CREATE my-wdio/.editorconfig (274 bytes)
CREATE my-wdio/.gitignore (548 bytes)
CREATE my-wdio/angular.json (3213 bytes)
CREATE my-wdio/package.json (1070 bytes)
CREATE my-wdio/tsconfig.json (863 bytes)
CREATE my-wdio/.browserslistrc (600 bytes)
CREATE my-wdio/karma.conf.js (1424 bytes)
CREATE my-wdio/tsconfig.app.json (287 bytes)
CREATE my-wdio/tsconfig.spec.json (333 bytes)
CREATE my-wdio/.vscode/extensions.json (130 bytes)
CREATE my-wdio/.vscode/launch.json (474 bytes)
CREATE my-wdio/.vscode/tasks.json (938 bytes)
CREATE my-wdio/src/favicon.ico (948 bytes)
CREATE my-wdio/src/index.html (292 bytes)
CREATE my-wdio/src/main.ts (372 bytes)
CREATE my-wdio/src/polyfills.ts (2338 bytes)
CREATE my-wdio/src/styles.scss (80 bytes)
CREATE my-wdio/src/test.ts (745 bytes)
CREATE my-wdio/src/assets/.gitkeep (0 bytes)
CREATE my-wdio/src/environments/environment.prod.ts (51 bytes)
CREATE my-wdio/src/environments/environment.ts (658 bytes)
CREATE my-wdio/src/app/app-routing.module.ts (245 bytes)
CREATE my-wdio/src/app/app.module.ts (393 bytes)
CREATE my-wdio/src/app/app.component.scss (0 bytes)
CREATE my-wdio/src/app/app.component.html (23364 bytes)
CREATE my-wdio/src/app/app.component.spec.ts (1076 bytes)
CREATE my-wdio/src/app/app.component.ts (212 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

cd my-wdio
npm init wdio .

output


                 -:...........................-:.
                 +                              +
              `` +      `...`        `...`      + `
            ./+/ +    .:://:::`    `::///::`  ` + ++/.
           .+oo+ +    /:+ooo+-/    /-+ooo+-/ ./ + +oo+.
           -ooo+ +    /-+ooo+-/    /-+ooo+-/ .: + +ooo.
            -+o+ +    `::///:-`    `::///::`    + +o+-
             ``. /.     `````        `````     .: .``
                  .----------------------------.
           `-::::::::::::::::::::::::::::::::::::::::-`
          .+oooo/:------------------------------:/oooo+.
      `.--/oooo-                                  :oooo/--.`
    .::-``:oooo`                                  .oooo-``-::.
  ./-`    -oooo`--.: :.--                         .oooo-    `-/.
 -/`    `-/oooo////////////////////////////////////oooo/.`    `/-
`+`   `/+oooooooooooooooooooooooooooooooooooooooooooooooo+:`   .+`
-/    +o/.:oooooooooooooooooooooooooooooooooooooooooooo:-/o/    +.
-/   .o+  -oooosoooososssssooooo------------------:oooo- `oo`   +.
-/   .o+  -oooodooohyyssosshoooo`                 .oooo-  oo.   +.
-/   .o+  -oooodooysdooooooyyooo` `.--.``     .:::-oooo-  oo.   +.
-/   .o+  -oooodoyyodsoooooyyooo.//-..-:/:.`.//.`./oooo-  oo.   +.
-/   .o+  -oooohsyoooyysssysoooo+-`     `-:::.    .oooo-  oo.   +.
-/   .o+  -ooooosooooooosooooooo+//////////////////oooo-  oo.   +.
-/   .o+  -oooooooooooooooooooooooooooooooooooooooooooo-  oo.   +.
-/   .o+  -oooooooooooooooooooooooooooooooooooooooooooo-  oo.   +.
-+////o+` -oooo---:///:----://::------------------:oooo- `oo////+-
+ooooooo/`-oooo``:-```.:`.:.`.+/-    .::::::::::` .oooo-`+ooooooo+
oooooooo+`-oooo`-- `/` .:+  -/-`/`   .::::::::::  .oooo-.+oooooooo
+-/+://-/ -oooo-`:`.o-`:.:-````.:    .///:``````  -oooo-`/-//:+:-+
: :..--:-:.+ooo+/://o+/-.-:////:-....-::::-....--/+ooo+.:.:--.-- /
- /./`-:-` .:///+/ooooo/+///////////////+++ooooo/+///:. .-:.`+./ :
:-:/.           :`ooooo`/`              .:.ooooo :           ./---
                :`ooooo`/`              .:.ooooo :
                :`ooooo./`              .:-ooooo :
                :`ooooo./`              .:-ooooo :
            `...:-+++++:/.              ./:+++++-:...`
           :-.````````/../              /.-:````````.:-
          -/::::::::://:/+             `+/:+::::::::::+.
          :oooooooooooo++/              +++oooooooooooo-

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

Creating WebdriverIO project in /Users/REDACTED/my-wdio

Installing packages:  @wdio/cli 

added 213 packages, removed 1 package, and audited 1138 packages in 23s

118 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Finished installing packages.

Running WDIO CLI Wizard...

=========================
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)? Yes
? Where are your page objects located? ./test/pageobjects/**/*.ts
? 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:4200
? 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

added 117 packages, and audited 1255 packages in 19s

121 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Packages installed successfully, creating configuration file...

Config file installed successfully, creating test files...
To have TypeScript support please add the following packages to your "types" list:
{
  "compilerOptions": {
    "types": ["node", "webdriverio/async", "@wdio/jasmine-framework", "expect-webdriverio"]
  }
}

For for information on TypeScript integration check out: https://webdriver.io/docs/typescript

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

Adding scripts to package.json

🤖 Successfully setup project at /Users/REDACTED/my-wdio

Run

npx wdio run test/wdio.conf.ts

output

2022-05-11T14:20:44.396Z ERROR @wdio/config:ConfigParser: Failed loading configuration file: /Users/REDACTED/my-wdio/test/wdio.conf.ts: Unexpected token 'export'
wdio run <configPath>

Run your WDIO configuration file to initialize your tests. (default)

Options:
      --version             Show version number                        [boolean]
      --watch               Run WebdriverIO in watch mode              [boolean]
  -h, -h, --hostname        automation driver host address              [string]
  -p, -p, --port            automation driver port                      [number]
      --path                path to WebDriver endpoints (default "/")   [string]
  -u, -u, --user            username if using a cloud service as automation
                            backend                                     [string]
  -k, -k, --key             corresponding access key to the user        [string]
  -l, -l, --logLevel        level of logging verbosity
         [choices: "trace", "debug", "info", "warn", "error", "silent", "trace",
                                     "debug", "info", "warn", "error", "silent"]
      --bail                stop test runner after specific amount of tests have
                            failed                                      [number]
      --baseUrl             shorten url command calls by setting a base url
                                                                        [string]
  -w, -w, --waitforTimeout  timeout for all waitForXXX commands         [number]
  -f, -f, --framework       defines the framework (Mocha, Jasmine or Cucumber)
                            to run the specs                            [string]
  -r, -r, --reporters       reporters to print out the results on stdout [array]
      --suite               overwrites the specs attribute and runs the defined
                            suite                                        [array]
      --spec                run only a certain spec file - overrides specs piped
                            from stdin                                   [array]
      --exclude             exclude certain spec file from the test run -
                            overrides exclude piped from stdin           [array]
      --mochaOpts           Mocha options
      --jasmineOpts         Jasmine options
      --cucumberOpts        Cucumber options
      --autoCompileOpts     Auto compilation options
      --help                Show help                                  [boolean]

Examples:
  wdio run wdio.conf.js --suite foobar      Run suite on testsuite "foobar"
  wdio run wdio.conf.js --spec              Run suite on specific specs
  ./tests/e2e/a.js --spec ./tests/e2e/b.js
  wdio run wdio.conf.js                     Run suite with custom Mocha timeout
  --mochaOpts.timeout 60000
  wdio run wdio.conf.js                     Disable auto-loading of ts-node or
  --autoCompileOpts.autoCompile=false       @babel/register
  wdio run wdio.conf.js                     Run suite with ts-node using custom
  --autoCompileOpts.tsNodeOpts.project=con  tsconfig.json
  figs/bdd-tsconfig.json

Documentation: https://webdriver.io
@wdio/cli (v7.19.7)

/Users/REDACTED/my-wdio/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:1032:15)
    at Module._compile (node:internal/modules/cjs/loader:1067:27)
    at Module.m._compile (/Users/REDACTED/my-wdio/node_modules/ts-node/src/index.ts:1455:23)
    at Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
    at Object.require.extensions.<computed> [as .ts] (/Users/REDACTED/my-wdio/node_modules/ts-node/src/index.ts:1458: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)
christian-bromann commented 2 years ago

Have you tried in a new directory without Angular. I assume the tsconfig is misconfigured. It works for me when doing these commands:

cd /tmp
npm init wdio ./sometest
...
cd ./sometest
npm run wdio
yogeshgadge commented 2 years ago

Have you tried in a new directory without Angular. I assume the tsconfig is misconfigured. It works for me when doing these commands:

cd /tmp
npm init wdio ./sometest
...
cd ./sometest
npm run wdio

Yes. This worked.

Also what works in my fresh new angular project is the following:-

wdio run test/wdio.conf.ts --autoCompileOpts.tsNodeOpts.project=test/tsconfig.json

Can you tell why existing typescript projects need the autoCompileOpts.tsNodeOpts.project ?

christian-bromann commented 2 years ago

Also what works in my fresh new angular project is the following:-

This means that your tsconfig.json file is not where you have it defined in your wdio.conf.ts. I recommend to update this (according to your issue post, it is set to project: 'tsconfig.json'). We already working on throwing an error is case the path to the tsconfig is invalid, see #8260 for more information.

Will close this as it is a configuration issue and we already work on making this experience better. If you have suggestions how to even further improve, please get involved. Thanks!