Baka no mercy
Baka no mercy

Reputation: 31

Failed loading config.ts due to import protractor

I am trying to start a new protractor project to test an angular site. I installed node.js, typescript, protractor globally and jasmine. I go to the project folder and do webdriver-manager update. Then I do webdriver-manager start. I also build the config.ts using tsc config.ts. Everything works fine until i try protractor config.ts. Here i will provide my config.ts and my package.json.

{
"name": "protractortests",
"version": "1.0.0",
"description": "Automated tests for a game platform",
"main": "index.js",
"dependencies": {
  "@types/jasmine": "^3.3.12",
  "@types/node": "^12.0.2",
  "jasmine": "^3.4.0",
  "protractor": "^5.4.2"
},
"devDependencies": {},
"scripts": {
  "test": "protractor config.ts"
}

and my config.ts:

import { ProtractorBrowser, Config } from "protractor";
    export let config: Config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
        'browserName': 'chrome'
        },

      framework: 'jasmine',
      specs: ['./FirstSpec.ts'],
      jasmineNodeOpts: {
        defaultTimeoutInterval: 90000
      },
      onPrepare: () => {
       let globals = require('protractor/built');
       let browser = globals.browser;
       browser.manage().window().maximize();
       browser.manage().timeouts().implicitlyWait(5000);
     }
    }
E/configParser - Error code: 105
[11:40:53] E/configParser - Error message: failed loading configuration file config.ts
[11:40:53] E/configParser - C:\Users\Victor\Documents\ProtractorTests\config.ts:1
(function (exports, require, module, __filename, __dirname) { import { ProtractorBrowser, Config } from "protractor";
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:80:7)
    at createScript (vm.js:274:10)
    at Object.runInThisContext (vm.js:326:10)
    at Module._compile (internal/modules/cjs/loader.js:664:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! Test failed.  See above for more details.

Upvotes: 2

Views: 2237

Answers (2)

Coderer
Coderer

Reputation: 27314

Commenters pointed out that you can't give Protractor a config file in native Typescript, and need to compile it to config.js then pass that. There's really no point in writing the file in Typescript at all, it just adds an extra step that provides no value to you. If you want editor autocomplete, you can decorate your JS with type annotations:

const { join } = require("path");
const { register } = require("ts-node");

const { SpecReporter, StacktraceOption } = require("jasmine-spec-reporter");


/** @type {import("protractor").Config} */
const config = {
    directConnect: true,
    baseUrl: "http://localhost:8080",
    framework: "jasmine",
    noGlobals: true,
    specs: [ "./src/**/*.e2e.ts" ],
    onPrepare() {
        register({
            project: join(__dirname, "./tsconfig.json")
        });
        jasmine.getEnv().addReporter(new SpecReporter({
            spec: {
                displayStacktrace: StacktraceOption.PRETTY
            }
        }));
    }
};

module.exports = { config };

I adapted my config from this excellent example.

Upvotes: 0

Yash Jagdale
Yash Jagdale

Reputation: 11

By referring to example at link https://github.com/angular/protractor/tree/5.4.1/exampleTypescript

You don't need to import ProtractorBrowser. You can work with browser directly with object Browser.

Upvotes: 1

Related Questions