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.

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/56252999/failed-loading-config-ts-due-to-import-protractor

标签

node.js

typescript

selenium

protractor

automated-tests