title: BrowserStack, WDIO, Cucumber, TypeScript
body: <p>I'm trying to get up with my automation tests using Cucumber, typescript, webdriverio and browserstack.</p>
  
  <p>It seems like there is no up to date setup guide for this kind of stack and I encountered some problem with the TS. When I set up all the configs and features for the tests I keep getting TS error <code>Error:(7, 54) TS2339: Property 'element' does not exist on type 'BrowserObject'.</code></p>
  
  <p>I believe there is some problem with the TS config or so.</p>
  
  <p>Is anyone able to point me what's wrong?</p>
  
  <p>tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false,
      "outDir": "./tsrc",
      "strict": true,
      "typeRoots": [ "./node_modules/@types" ],
      "types": [
        "node",
        "chai",
        "@wdio/sync",
        "webdriverio",
        "cucumber"
      ],
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true
    },
    "exclude": [
      "node_modules",
      "./tests/tsrc"
    ],
    "compileOnSave": false
  }
  </code></pre>
  
  <p>wdio.conf.js</p>
  
  <pre><code>exports.config = {
  
    //
    // =================
    // Service Providers
    // =================
    // WebdriverIO supports Sauce Labs, Browserstack, and Testing Bot (other cloud providers
    // should work too though). These services define specific user and key (or access key)
    // values you need to put in here in order to connect to these services.
    //
    user: process.env.BROWSERSTACK_USER_NAME,
    key: process.env.BROWSERSTACK_KEY,
  
  
    //
    // ==================
    // Specify Test Files
    // ==================
    // Define which test specs should run. The pattern is relative to the directory
    // from which `wdio` was called. Notice that, if you are calling `wdio` from an
    // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
    // directory is where your package.json resides, so `wdio` will be called from there.
    //
    specs: [
      './tests/features/*.feature'
    ],
    // Patterns to exclude.
    exclude: [
      // 'path/to/excluded/files'
    ],
    //
    // ============
    // Capabilities
    // ============
    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
    // time. Depending on the number of capabilities, WebdriverIO launches several test
    // sessions. Within your capabilities you can overwrite the spec and exclude options in
    // order to group specific specs to a specific capability.
    //
    // First, you can define how many instances should be started at the same time. Let's
    // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
    // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
    // files and you set maxInstances to 10, all spec files will get tested at the same time
    // and 30 processes will get spawned. The property handles how many capabilities
    // from the same test should run tests.
    //
    maxInstances: 1,
    //
    // If you have trouble getting all important capabilities together, check out the
    // Sauce Labs platform configurator - a great tool to configure your capabilities:
    // https://docs.saucelabs.com/reference/platforms-configurator
    //
    capabilities: [{
      // maxInstances can get overwritten per capability. So if you have an in-house Selenium
      // grid with only 5 firefox instances available you can make sure that not more than
      // 5 instances get started at a time.
      maxInstances: 1,
      //
      browserName: 'chrome'
    }],
    //
    // ===================
    // Test Configurations
    // ===================
    // Define all options that are relevant for the WebdriverIO instance here
    //
    // By default WebdriverIO commands are executed in a synchronous way using
    // the wdio-sync package. If you still want to run your tests in an async way
    // e.g. using promises you can set the sync option to false.
    sync: true,
    //
    // Level of logging verbosity: silent | verbose | command | data | result | error
    logLevel: 'verbose',
    //
    // Enables colors for log output.
    coloredLogs: true,
    //
    // Warns when a deprecated command is used
    deprecationWarnings: true,
    //
    // If you only want to run your tests until a specific amount of tests have failed use
    // bail (default is 0 - don't bail, run all tests).
    bail: 0,
    //
    // Saves a screenshot to a given path if a command fails.
    screenshotPath: './errorShots/',
    //
    // Set a base URL in order to shorten url command calls. If your `url` parameter starts
    // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
    // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
    // gets prepended directly.
    baseUrl: 'http://localhost:3000',
    //
    // Default timeout for all waitFor* commands.
    waitforTimeout: 10000,
    //
    // Default timeout in milliseconds for request
    // if Selenium Grid doesn't send response
    connectionRetryTimeout: 90000,
    //
    // Default request retries count
    connectionRetryCount: 3,
    //
    // Initialize the browser instance with a WebdriverIO plugin. The object should have the
    // plugin name as key and the desired plugin options as properties. Make sure you have
    // the plugin installed before running any tests. The following plugins are currently
    // available:
    // WebdriverCSS: https://github.com/webdriverio/webdrivercss
    // WebdriverRTC: https://github.com/webdriverio/webdriverrtc
    // Browserevent: https://github.com/webdriverio/browserevent
    // plugins: {
    //     webdrivercss: {
    //         screenshotRoot: 'my-shots',
    //         failedComparisonsRoot: 'diffs',
    //         misMatchTolerance: 0.05,
    //         screenWidth: [320,480,640,1024]
    //     },
    //     webdriverrtc: {},
    //     browserevent: {}
    // },
    //
    // Test runner services
    // Services take over a specific job you don't want to take care of. They enhance
    // your test setup with almost no effort. Unlike plugins, they don't add new
    // commands. Instead, they hook themselves up into the test process.
    services: ['browserstack'],
    //
    // Framework you want to run your specs with.
    // The following are supported: Mocha, Jasmine, and Cucumber
    // see also: http://webdriver.io/guide/testrunner/frameworks.html
    //
    // Make sure you have the wdio adapter package for the specific framework installed
    // before running any tests.
    framework: 'cucumber',
    //
    // Test reporter for stdout.
    // The only one supported by default is 'dot'
    // see also: http://webdriver.io/guide/reporters/dot.html
    reporters: ['spec', 'junit'],
    //
    // If you are using Cucumber you need to specify the location of your step definitions.
    cucumberOpts: {
      require: ['./tests/steps/*.ts'],        // &lt;string[]&gt; (file/dir) require files before executing features
      backtrace: false,   // &lt;boolean&gt; show full backtrace for errors
      compiler: ['ts:ts-node/register'],       // &lt;string[]&gt; ("extension:module") require files with the given EXTENSION after requiring MODULE (repeatable)
      dryRun: false,      // &lt;boolean&gt; invoke formatters without executing steps
      failFast: false,    // &lt;boolean&gt; abort the run on first failure
      format: ['pretty'], // &lt;string[]&gt; (type[:path]) specify the output format, optionally supply PATH to redirect formatter output (repeatable)
      colors: true,       // &lt;boolean&gt; disable colors in formatter output
      snippets: true,     // &lt;boolean&gt; hide step definition snippets for pending steps
      source: true,       // &lt;boolean&gt; hide source uris
      profile: [],        // &lt;string[]&gt; (name) specify the profile to use
      strict: false,      // &lt;boolean&gt; fail if there are any undefined or pending steps
      tags: [],           // &lt;string[]&gt; (expression) only execute the features or scenarios with tags matching the expression
      timeout: 20000,     // &lt;number&gt; timeout for step definitions
      ignoreUndefinedDefinitions: false, // &lt;boolean&gt; Enable this config to treat undefined definitions as warnings.
    },
  
    //
    // =====
    // Hooks
    // =====
    // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
    // it and to build services around it. You can either apply a single function or an array of
    // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
    // resolved to continue.
    /**
     * Gets executed once before all workers get launched.
     * @param {Object} config wdio configuration object
     * @param {Array.&lt;Object&gt;} capabilities list of capabilities details
     */
    onPrepare: function (config, capabilities) {
      console.log('&lt;&lt;&lt; BROWSER TESTS STARTED &gt;&gt;&gt;');
    },
    /**
     * Gets executed just before initialising the webdriver session and test framework. It allows you
     * to manipulate configurations depending on the capability or spec.
     * @param {Object} config wdio configuration object
     * @param {Array.&lt;Object&gt;} capabilities list of capabilities details
     * @param {Array.&lt;String&gt;} specs List of spec file paths that are to be run
     */
    // beforeSession: function (config, capabilities, specs) {
    // },
    /**
     * Gets executed before test execution begins. At this point you can access to all global
     * variables like `browser`. It is the perfect place to define custom commands.
     * @param {Array.&lt;Object&gt;} capabilities list of capabilities details
     * @param {Array.&lt;String&gt;} specs List of spec file paths that are to be run
     */
    before: function (capabilities, specs) {
      require('ts-node').register({ files: true });
    },
    /**
     * Runs before a WebdriverIO command gets executed.
     * @param {String} commandName hook command name
     * @param {Array} args arguments that command would receive
     */
    // beforeCommand: function (commandName, args) {
    // },
  
    /**
     * Runs before a Cucumber feature
     * @param {Object} feature feature details
     */
    // beforeFeature: function (feature) {
    // },
    /**
     * Runs before a Cucumber scenario
     * @param {Object} scenario scenario details
     */
    // beforeScenario: function (scenario) {
    // },
    /**
     * Runs before a Cucumber step
     * @param {Object} step step details
     */
    // beforeStep: function (step) {
    // },
    /**
     * Runs after a Cucumber step
     * @param {Object} stepResult step result
     */
    // afterStep: function (stepResult) {
    // },
    /**
     * Runs after a Cucumber scenario
     * @param {Object} scenario scenario details
     */
    // afterScenario: function (scenario) {
    // },
    /**
     * Runs after a Cucumber feature
     * @param {Object} feature feature details
     */
    // afterFeature: function (feature) {
    // },
  
    /**
     * Runs after a WebdriverIO command gets executed
     * @param {String} commandName hook command name
     * @param {Array} args arguments that command would receive
     * @param {Number} result 0 - command success, 1 - command error
     * @param {Object} error error object if any
     */
    // afterCommand: function (commandName, args, result, error) {
    // },
    /**
     * Gets executed after all tests are done. You still have access to all global variables from
     * the test.
     * @param {Number} result 0 - test pass, 1 - test fail
     * @param {Array.&lt;Object&gt;} capabilities list of capabilities details
     * @param {Array.&lt;String&gt;} specs List of spec file paths that ran
     */
    // after: function (result, capabilities, specs) {
    // },
    /**
     * Gets executed right after terminating the webdriver session.
     * @param {Object} config wdio configuration object
     * @param {Array.&lt;Object&gt;} capabilities list of capabilities details
     * @param {Array.&lt;String&gt;} specs List of spec file paths that ran
     */
    // afterSession: function (config, capabilities, specs) {
    // },
    /**
     * Gets executed after all workers got shut down and the process is about to exit.
     * @param {Object} exitCode 0 - success, 1 - fail
     * @param {Object} config wdio configuration object
     * @param {Array.&lt;Object&gt;} capabilities list of capabilities details
     */
    onComplete: function(exitCode, config, capabilities) {
      console.log('&lt;&lt;&lt; BROWSER TESTING FINISHED &gt;&gt;&gt;');
    }
  };
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/2YA92.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2YA92.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/9jJa1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9jJa1.png" alt="enter image description here"></a></p>