Typescript无法识别WebDriverIO符号及Chrome启动无界面问题咨询

Hey there! Let's fix those two issues you're hitting with your TypeScript + WebdriverIO setup right away.

Issue 1: TypeScript doesn't recognize browser or $ in VSCode #

This is usually a missing type definitions or TypeScript configuration problem. Here's how to resolve it step by step:

1. Install required type dependencies
   First, make sure you have the WebdriverIO type packages installed to let TypeScript understand the global objects:

   npm install --save-dev @types/webdriverio @wdio/types @wdio/mocha-framework
   

2. Update your tsconfig.json
   Ensure your TypeScript config includes WebdriverIO types and correctly targets your test files. Here's a minimal working config:

   {
     "compilerOptions": {
       "target": "ES6",
       "moduleResolution": "node",
       "esModuleInterop": true,
       "types": ["webdriverio", "@wdio/mocha-framework"],
       "strict": false // Adjust based on your project's strictness needs
     },
     "include": ["./test/**/*.ts"]
   }
   

3. Enable sync mode (if using synchronous API)
   If you're relying on the global browser object (synchronous API), add the sync flag to your wdio.conf.js:

   exports.config = {
     // ... other existing configs
     sync: true,
     // ... rest of your config
   }
   

4. Refresh VSCode's TypeScript server
   Sometimes VSCode needs a kick to pick up new type definitions. Press Ctrl+Shift+P (or Cmd+Shift+P on Mac), search for TypeScript: Restart TS Server and run it. The red squiggles should disappear after this.

Issue 2: Chrome closes immediately after tests pass #

By default, WebdriverIO terminates the browser session as soon as all tests complete. To keep the browser open, add the detach option to your Chrome capabilities:

Update the capabilities section in your wdio.conf.js like this:

capabilities: [{
  maxInstances: 5,
  browserName: 'chrome',
  acceptInsecureCerts: true,
  'goog:chromeOptions': {
    detach: true // This tells Chrome to stay open after the test session ends
  }
}],

Bonus Debugging Tip #

If you only want to keep the browser open during debugging (not for regular test runs), you can run your tests with the --watch flag:

npx wdio run wdio.conf.js --watch

This will keep the session alive until you manually stop the test runner.

内容的提问来源于stack exchange，提问作者mchd