TypeScript set up overhaul (#6302)

.gitignore

@@ -37,8 +37,9 @@ node_modules/
 jspm_packages/
 
 # Typescript v1 declaration files
-typings/
+/packages/wdio-protocols/src/commands
 !tests/typings
+!typings/types.ts
 tests/typings/**/dist
 
 # Optional npm cache directory

packages/webdriverio/src/types/custom.d.ts → @types/custom.d.ts

@@ -1,4 +1,4 @@
-namespace NodeJS {
+declare namespace NodeJS {
     interface Process {
         _debugProcess: (pid: number) => void
         _debugEnd: (pid: number) => void

examples/wdio/cucumber/features/my-feature.feature

@@ -5,11 +5,11 @@ Feature: Example feature
 
   Scenario: Get size of an element
     Given I go on the website "https://github.com/"
-    Then  should the element ".header-logged-out a" be 32px wide and 35px high
+    Then  should the element ".header-logged-out a" be 32px wide and 34px high
 
   Scenario: Get title of website
     Given I go on the website "https://github.com/"
-    Then  should the title of the page be "The world’s leading software development platform · GitHub"
+    Then  should the title of the page be "GitHub: Where the world builds software · GitHub"
 
   Scenario: Data Tables
     Given I go on the website "http://todomvc.com/examples/react/#/"

examples/wdio/cucumber/step-definitions.js

@@ -9,7 +9,7 @@
  * $ cucumber.js
  */
 
-const { Given, When, Then } = require('cucumber')
+const { Given, When, Then } = require('@cucumber/cucumber')
 
 Given(/^I go on the website "([^"]*)"$/, (url) => {
     browser.url(url)

jest.config.js

@@ -25,7 +25,7 @@ module.exports = {
     collectCoverage: true,
     coverageThreshold: {
         global: {
-            branches: 93,
+            branches: 92,
             functions: 97,
             lines: 98,
             statements: 98

package.json

@@ -33,30 +33,20 @@
     "test": "run-s test:depcheck test:eslint test:typings test:coverage test:smoke",
     "test:depcheck": "node ./scripts/depcheck.js",
     "test:eslint": "eslint --cache packages examples scripts tests",
-    "test:typings": "npm run generate:typings && node tests/typings/setup && npm run ts && npm run clean:tests && node tests/typings/setup --ts=3.8 && npm run ts && npm run clean:tests",
+    "test:typings": "node tests/typings/setup && npm run ts && npm run clean:tests && node tests/typings/setup --ts=3.9 && npm run ts && npm run clean:tests",
     "test:coverage": "node --max-old-space-size=8192 ./node_modules/jest/bin/jest.js --coverage --logHeapUsage",
     "test:smoke": "ts-node ./tests/smoke.runner.js",
     "test:e2e": "jest --config e2e/jest.config.js",
     "test:e2e:edge": "npm run test:e2e -- --testMatch '**/edge.e2e.js'",
     "test:e2e:firefox": "npm run test:e2e -- --testMatch '<rootDir>/standalone/firefox.e2e.js'",
     "ts": "run-p ts:*",
-    "ts:sync": "cd tests/typings/sync && npx tsc",
+    "ts:webdriver": "cd tests/typings/webdriver && npx tsc",
     "ts:devtools": "cd tests/typings/devtools && npx tsc",
-    "ts:sync-applitools": "cd tests/typings/sync-applitools && npx tsc",
-    "ts:sync-browserstack": "cd tests/typings/sync-browserstack && npx tsc",
-    "ts:sync-devtools-service": "cd tests/typings/sync-devtools-service && npx tsc",
-    "ts:sync-saucelabs": "cd tests/typings/sync-saucelabs && npx tsc",
-    "ts:sync-mocha": "cd tests/typings/sync-mocha && npx tsc",
-    "ts:sync-jasmine": "cd tests/typings/sync-jasmine && npx tsc",
-    "ts:sync-cucumber": "cd tests/typings/sync-cucumber && npx tsc",
     "ts:webdriverio": "cd tests/typings/webdriverio && npx tsc",
-    "ts:webdriverio-applitools": "cd tests/typings/webdriverio-applitools && npx tsc",
-    "ts:webdriverio-browserstack": "cd tests/typings/webdriverio-browserstack && npx tsc",
-    "ts:webdriverio-saucelabs": "cd tests/typings/webdriverio-saucelabs && npx tsc",
-    "ts:webdriverio-devtools": "cd tests/typings/sync-devtools && npx tsc",
-    "ts:webdriverio-devtools-service": "cd tests/typings/webdriverio-devtools-service && npx tsc",
-    "ts:webdriverio-mocha": "cd tests/typings/webdriverio-mocha && npx tsc",
-    "ts:webdriverio-jasmine": "cd tests/typings/webdriverio-jasmine && npx tsc",
+    "ts:mocha": "cd tests/typings/mocha && npx tsc",
+    "ts:jasmine": "cd tests/typings/jasmine && npx tsc",
+    "ts:cucumber": "cd tests/typings/cucumber && npx tsc",
+    "ts:sync": "cd tests/typings/sync && npx tsc",
     "watch": "node ./scripts/build --watch",
     "version": "npm run changelog && git add CHANGELOG.md"
   },
@@ -82,6 +72,7 @@
     "@typescript-eslint/eslint-plugin": "^4.4.0",
     "@typescript-eslint/parser": "^4.4.0",
     "aws-sdk": "^2.539.0",
+    "camelcase": "^6.2.0",
     "cheerio": "^1.0.0-rc.3",
     "codecov": "^3.6.1",
     "copyfiles": "^2.1.1",

packages/devtools/package.json

@@ -9,7 +9,7 @@
   "engines": {
     "node": ">=12.0.0"
   },
-  "types": "./devtools.d.ts",
+  "types": "./build/index.d.ts",
   "typeScriptVersion": "3.8.3",
   "repository": {
     "type": "git",
@@ -25,6 +25,7 @@
     "@wdio/config": "6.12.1",
     "@wdio/logger": "6.10.10",
     "@wdio/protocols": "6.12.0",
+    "@wdio/types": "^6.10.6",
     "@wdio/utils": "6.11.0",
     "chrome-launcher": "^0.13.1",
     "edge-paths": "^2.1.0",

packages/devtools/src/commands.ts

@@ -0,0 +1,66 @@
+import acceptAlert from './commands/acceptAlert'
+import addCookie from './commands/addCookie'
+import back from './commands/back'
+import closeWindow from './commands/closeWindow'
+import createWindow from './commands/createWindow'
+import deleteAllCookies from './commands/deleteAllCookies'
+import deleteCookie from './commands/deleteCookie'
+import deleteSession from './commands/deleteSession'
+import dismissAlert from './commands/dismissAlert'
+import elementClear from './commands/elementClear'
+import elementClick from './commands/elementClick'
+import elementSendKeys from './commands/elementSendKeys'
+import executeAsyncScript from './commands/executeAsyncScript'
+import executeScript from './commands/executeScript'
+import findElement from './commands/findElement'
+import findElementFromElement from './commands/findElementFromElement'
+import findElements from './commands/findElements'
+import findElementsFromElement from './commands/findElementsFromElement'
+import forward from './commands/forward'
+import getActiveElement from './commands/getActiveElement'
+import getAlertText from './commands/getAlertText'
+import getAllCookies from './commands/getAllCookies'
+import getElementAttribute from './commands/getElementAttribute'
+import getElementCSSValue from './commands/getElementCSSValue'
+import getElementComputedLabel from './commands/getElementComputedLabel'
+import getElementComputedRole from './commands/getElementComputedRole'
+import getElementProperty from './commands/getElementProperty'
+import getElementRect from './commands/getElementRect'
+import getElementTagName from './commands/getElementTagName'
+import getElementText from './commands/getElementText'
+import getNamedCookie from './commands/getNamedCookie'
+import getPageSource from './commands/getPageSource'
+import getTimeouts from './commands/getTimeouts'
+import getTitle from './commands/getTitle'
+import getUrl from './commands/getUrl'
+import getWindowHandle from './commands/getWindowHandle'
+import getWindowHandles from './commands/getWindowHandles'
+import getWindowRect from './commands/getWindowRect'
+import isElementEnabled from './commands/isElementEnabled'
+import isElementSelected from './commands/isElementSelected'
+import navigateTo from './commands/navigateTo'
+import newSession from './commands/newSession'
+import performActions from './commands/performActions'
+import refresh from './commands/refresh'
+import releaseActions from './commands/releaseActions'
+import sendAlertText from './commands/sendAlertText'
+import setTimeouts from './commands/setTimeouts'
+import setWindowRect from './commands/setWindowRect'
+import status from './commands/status'
+import switchToFrame from './commands/switchToFrame'
+import switchToParentFrame from './commands/switchToParentFrame'
+import switchToWindow from './commands/switchToWindow'
+import takeElementScreenshot from './commands/takeElementScreenshot'
+import takeScreenshot from './commands/takeScreenshot'
+
+export {
+    acceptAlert, addCookie, back, closeWindow, createWindow, deleteAllCookies, deleteCookie, deleteSession,
+    dismissAlert, elementClear, elementClick, elementSendKeys, executeAsyncScript, executeScript, findElement,
+    findElementFromElement, findElements, findElementsFromElement, forward, getActiveElement, getAlertText,
+    getAllCookies, getElementAttribute, getElementCSSValue, getElementComputedLabel, getElementComputedRole,
+    getElementProperty, getElementRect, getElementTagName, getElementText, getNamedCookie, getPageSource,
+    getTimeouts, getTitle, getUrl, getWindowHandle, getWindowHandles, getWindowRect, isElementEnabled,
+    isElementSelected, navigateTo, newSession, performActions, refresh, releaseActions, sendAlertText,
+    setTimeouts, setWindowRect, status, switchToFrame, switchToParentFrame, switchToWindow, takeElementScreenshot,
+    takeScreenshot
+}

packages/devtools/src/commands/acceptAlert.ts

@@ -1,11 +1,11 @@
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Accept Alert command accepts a simple dialog if present, otherwise error.
  *
  * @alias browser.acceptAlert
  * @see https://w3c.github.io/webdriver/#dfn-accept-alert
  */
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function acceptAlert(this: DevToolsDriver) {
     if (!this.activeDialog) {
         throw new Error('no such alert')

packages/devtools/src/commands/addCookie.ts

@@ -1,3 +1,7 @@
+import { Cookie } from '@wdio/protocols'
+
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Add Cookie command adds a single cookie to the cookie store
  * associated with the active document's address.
@@ -6,11 +10,9 @@
  * @see https://w3c.github.io/webdriver/#dfn-adding-a-cookie
  * @param {object} cookie  A JSON object representing a cookie. It must have at least the name and value fields and could have more, including expiry-time and so on
  */
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function addCookie(
     this: DevToolsDriver,
-    { cookie }: { cookie: WebDriver.Cookie }
+    { cookie }: { cookie: Cookie }
 ) {
     const page = this.getPageHandle()
 

packages/devtools/src/commands/back.ts

@@ -1,3 +1,5 @@
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Back command causes the browser to traverse one step backward
  * in the joint session history of the current top-level browsing context.
@@ -6,8 +8,6 @@
  * @alias browser.back
  * @see https://w3c.github.io/webdriver/#dfn-back
  */
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function back (this: DevToolsDriver) {
     delete this.currentFrame
     const page = this.getPageHandle()

packages/devtools/src/commands/closeWindow.ts

@@ -1,3 +1,6 @@
+import { v4 as uuidv4 } from 'uuid'
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Close Window command closes the current top-level browsing context.
  * Once done, if there are no more top-level browsing contexts open,
@@ -6,10 +9,6 @@
  * @alias browser.closeWindow
  * @see https://w3c.github.io/webdriver/#dfn-close-window
  */
-
-import { v4 as uuidv4 } from 'uuid'
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function closeWindow (this: DevToolsDriver) {
     delete this.currentFrame
 

packages/devtools/src/commands/createWindow.ts

@@ -1,12 +1,3 @@
-/**
- * Create a new top-level browsing context.
- *
- * @alias browser.createWindow
- * @see https://w3c.github.io/webdriver/#new-window
- * @param {string} type  Set to 'tab' if the newly created window shares an OS-level window with the current browsing context, or 'window' otherwise.
- * @return {object}      New window object containing 'handle' with the value of the handle and 'type' with the value of the created window type
- */
-
 import { v4 as uuidv4 } from 'uuid'
 import type DevToolsDriver from '../devtoolsdriver'
 
@@ -16,6 +7,14 @@ const WINDOW_FEATURES = 'menubar=1,toolbar=1,location=1,resizable=1,scrollbars=1
 const NEW_PAGE_URL = 'about:blank'
 const DEFAULT_WINDOW_TYPE = 'tab'
 
+/**
+ * Create a new top-level browsing context.
+ *
+ * @alias browser.createWindow
+ * @see https://w3c.github.io/webdriver/#new-window
+ * @param {string} type  Set to 'tab' if the newly created window shares an OS-level window with the current browsing context, or 'window' otherwise.
+ * @return {object}      New window object containing 'handle' with the value of the handle and 'type' with the value of the created window type
+ */
 export default async function createWindow (
     this: DevToolsDriver,
     { type }: { type: 'window' | 'tab' }

packages/devtools/src/commands/deleteAllCookies.ts

@@ -1,12 +1,12 @@
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Delete All Cookies command allows deletion of all cookies
  * associated with the active document's address.
  *
  * @alias browser.deleteAllCookies
  * @see https://w3c.github.io/webdriver/#dfn-delete-all-cookies
  */
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function deleteAllCookies (this: DevToolsDriver) {
     const page = this.getPageHandle()
     const cookies = await page.cookies()

packages/devtools/src/commands/deleteCookie.ts

@@ -1,3 +1,5 @@
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Delete Cookie command allows you to delete either a single cookie by parameter name,
  * or all the cookies associated with the active document's address if name is undefined.
@@ -6,8 +8,6 @@
  * @see https://w3c.github.io/webdriver/#dfn-delete-cookie
  * @param {string} name  name of the cookie to delete
  */
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function deleteCookie (
     this: DevToolsDriver,
     { name }: { name: string }

packages/devtools/src/commands/deleteSession.ts

@@ -1,12 +1,12 @@
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Delete Session command closes any top-level browsing contexts associated
  * with the current session, terminates the connection, and finally closes the current session.
  *
  * @alias browser.deleteSession
  * @see https://w3c.github.io/webdriver/#dfn-delete-session
  */
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function deleteSession (this: DevToolsDriver) {
     await this.browser.close()
     this.windows.clear()

packages/devtools/src/commands/dismissAlert.ts

@@ -1,3 +1,5 @@
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Dismiss Alert command dismisses a simple dialog if present, otherwise error.
  * A request to dismiss an alert user prompt, which may not necessarily have a dismiss button,
@@ -6,8 +8,6 @@
  * @alias browser.dismissAlert
  * @see https://w3c.github.io/webdriver/#dfn-dismiss-alert
  */
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function dismissAlert (this: DevToolsDriver) {
     if (!this.activeDialog) {
         throw new Error('no such alert')

packages/devtools/src/commands/elementClear.ts

@@ -1,3 +1,7 @@
+import command from '../scripts/elementClear'
+import { getStaleElementError } from '../utils'
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Element Clear command scrolls into view an editable or resettable element and then attempts
  * to clear its selected files or text content.
@@ -6,11 +10,6 @@
  * @see https://w3c.github.io/webdriver/#dfn-element-clear
  * @param {string} elementId  the id of an element returned in a previous call to Find Element(s)
  */
-
-import command from '../scripts/elementClear'
-import { getStaleElementError } from '../utils'
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function elementClear (
     this: DevToolsDriver,
     { elementId }: { elementId: string }

packages/devtools/src/commands/elementClick.ts

@@ -1,3 +1,8 @@
+import getElementTagName from './getElementTagName'
+import selectOptionScript from '../scripts/selectOption'
+import { getStaleElementError } from '../utils'
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Element Click command scrolls into view the element if it is not already pointer-interactable,
  * and clicks its in-view center point. If the element's center point is obscured by another element,
@@ -9,12 +14,6 @@
  * @see https://w3c.github.io/webdriver/#dfn-element-click
  * @param {string} elementId  the id of an element returned in a previous call to Find Element(s)
  */
-
-import getElementTagName from './getElementTagName'
-import selectOptionScript from '../scripts/selectOption'
-import { getStaleElementError } from '../utils'
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function elementClick (
     this: DevToolsDriver,
     { elementId }: { elementId: string }

packages/devtools/src/commands/elementSendKeys.ts

@@ -1,3 +1,8 @@
+import path from 'path'
+
+import { getStaleElementError } from '../utils'
+import type DevToolsDriver from '../devtoolsdriver'
+
 /**
  * The Element Send Keys command scrolls into view the form control element and then sends
  * the provided keys to the element. In case the element is not keyboard-interactable,
@@ -9,12 +14,6 @@
  * @param {string} elementId  the id of an element returned in a previous call to Find Element(s)
  * @param {string} text       string to send as keystrokes to the element
  */
-
-import path from 'path'
-
-import { getStaleElementError } from '../utils'
-import type DevToolsDriver from '../devtoolsdriver'
-
 export default async function elementSendKeys (
     this: DevToolsDriver,
     { elementId, text }: { elementId: string, text: string }