Add types for devtools service (#5361)

package.json

@@ -42,6 +42,7 @@
     "ts:devtools": "cd tests/typings/devtools && tsc --incremental",
     "ts:sync-applitools": "cd tests/typings/sync-applitools && tsc --incremental",
     "ts:sync-browserstack": "cd tests/typings/sync-browserstack && tsc --incremental",
+    "ts:sync-devtools-service": "cd tests/typings/sync-devtools-service && tsc --incremental",
     "ts:sync-saucelabs": "cd tests/typings/sync-saucelabs && tsc --incremental",
     "ts:sync-mocha": "cd tests/typings/sync-mocha && tsc --incremental",
     "ts:sync-jasmine": "cd tests/typings/sync-jasmine && tsc --incremental",
@@ -51,6 +52,7 @@
     "ts:webdriverio-browserstack": "cd tests/typings/webdriverio-browserstack && tsc --incremental",
     "ts:webdriverio-saucelabs": "cd tests/typings/webdriverio-saucelabs && tsc --incremental",
     "ts:webdriverio-devtools": "cd tests/typings/sync-devtools && tsc --incremental",
+    "ts:webdriverio-devtools-service": "cd tests/typings/webdriverio-devtools-service && tsc --incremental",
     "ts:webdriverio-mocha": "cd tests/typings/webdriverio-mocha && tsc --incremental",
     "ts:webdriverio-jasmine": "cd tests/typings/webdriverio-jasmine && tsc --incremental",
     "ts:webdriverio-reporter": "cd tests/typings/webdriverio-reporter && tsc --incremental",

packages/wdio-devtools-service/devtools-service.d.ts

@@ -0,0 +1,129 @@
+declare module WebdriverIO {
+  interface ServiceOption extends DevtoolsConfig {}
+  interface Browser extends DevtoolsBrowser {}
+}
+
+type NetworkStates = 'offline' | 'GPRS' | 'Regular 2G' | 'Good 2G' | 'Regular 3G' | 'Good 3G' | 'Regular 4G' | 'DSL' | 'Wifi' | 'online';
+
+interface Viewport {
+  /**
+   * page width in pixels
+   */
+  width: number,
+  /**
+   * page height in pixels
+   */
+  height: number,
+  /**
+   * Specify device scale factor (can be thought of as dpr). Defaults to 1
+   */
+  deviceScaleFactor?: number,
+  /**
+   * Whether the meta viewport tag is taken into account. Defaults to false
+   */
+  isMobile?: boolean,
+  /**
+   * Specifies if viewport supports touch events. Defaults to false
+   */
+  hasTouch?: boolean,
+  /**
+   * Specifies if viewport is in landscape mode. Defaults to false
+   */
+  isLandscape?: boolean
+}
+interface CustomDevice {
+  viewport: Viewport,
+  userAgent: string
+}
+type DeviceProfiles = 'Blackberry PlayBook' | 'BlackBerry Z30' | 'Galaxy Note 3' | 'Galaxy Note II' | 'Galaxy S III' | 'Galaxy S5' | 'iPad' | 'iPad Mini' | 'iPad Pro' | 'iPhone 4' | 'iPhone 5' | 'iPhone 6' | 'iPhone 6 Plus' | 'iPhone 7' | 'iPhone 7 Plus' | 'iPhone 8' | 'iPhone 8 Plus' | 'iPhone SE' | 'iPhone X' | 'JioPhone 2' | 'Kindle Fire HDX' | 'LG Optimus L70' | 'Microsoft Lumia 550' | 'Microsoft Lumia 950' | 'Nexus 10' | 'Nexus 4' | 'Nexus 5' | 'Nexus 5X' | 'Nexus 6' | 'Nexus 6P' | 'Nexus 7' | 'Nokia Lumia 520' | 'Nokia N9' | 'Pixel 2' | 'Pixel 2 XL' | CustomDevice
+
+interface DevtoolsConfig {
+  /**
+   * Define endpoint for Chrome DevTools protocol manually (e.g. localhost:24563).
+   */
+  debuggerAddress?: string;
+}
+
+interface DevtoolsBrowser {
+  /**
+   * Enables auto performance audits for all page loads that are cause by calling the url command or clicking on a link or anything that causes a page load.
+   * You can pass in a config object to determine some throttling options. The default throttling profile is Good 3G network with a 4x CPU trottling.
+   */
+  enablePerformanceAudits(
+    networkThrottling?: NetworkStates,
+    cpuThrottling?: number,
+    cacheEnabled?: boolean
+  ): void;
+  /**
+   * Disable the performance audits
+   */
+  disablePerformanceAudits(): void;
+  /**
+   * Get most common used performance metrics
+   */
+  getMetrics(): object;
+  /**
+   * Get some useful diagnostics about the page load
+   */
+  getDiagnostics(): object;
+  /**
+   * Returns a list with a breakdown of all main thread task and their total duration
+   */
+  getMainThreadWorkBreakdown(): object[];
+  /**
+   * Returns the Lighthouse Performance Score which is a weighted mean of the following metrics: firstMeaningfulPaint, firstCPUIdle, firstInteractive, speedIndex, estimatedInputLatency
+   */
+  getPerformanceScore(): number;
+
+  /**
+   * The service allows you to emulate a specific device type. 
+   * If set, the browser viewport will be modified to fit the device capabilities as well as the user agent will set according to the device user agent.
+   * Note: This only works if you don't use mobileEmulation within capabilities['goog:chromeOptions']. If mobileEmulation is present the call to browser.emulateDevice() won't do anything.
+   */
+  emulateDevice(deviceProfile: DeviceProfiles): void;
+
+  /**
+   * The cdp command is a custom command added to the browser scope that allows you to call directly commands to the protocol.
+   */
+  cdp(
+    domain: string,
+    command: string,
+    arguments?: object
+  ): any;
+  /**
+   * Returns the host and port the Chrome DevTools interface is connected to.
+   */
+  cdpConnection(): { host: string, port: number };
+  /**
+   * Helper method to get the nodeId of an element in the page. 
+   * NodeIds are similar like WebDriver node ids an identifier for a node. 
+   * It can be used as a parameter for other Chrome DevTools methods, e.g. DOM.focus.
+   */
+  getNodeId(selector: string): number;
+  /**
+   * Helper method to get the nodeId of an element in the page. 
+   * NodeIds are similar like WebDriver node ids an identifier for a node. 
+   * It can be used as a parameter for other Chrome DevTools methods, e.g. DOM.focus.
+   */
+  getNodeIds(selector: string): number[];
+  /**
+   * Start tracing the browser. You can optionally pass in custom tracing categories and the sampling frequency.
+   */
+  startTracing(
+    categories?: string,
+    samplingFrequency?: number
+  ): void;
+  /**
+   * Stop tracing the browser.
+   */
+  endTracing(): void;
+  /**
+   * Returns the tracelogs that was captured within the tracing period. 
+   * You can use this command to store the trace logs on the file system to analyse the trace via Chrome DevTools interface.
+   */
+  getTraceLogs(): object;
+  /**
+   * Returns page weight information of the last page load.
+   */
+  getPageWeight(): object;
+}

packages/wdio-devtools-service/package.json

@@ -48,5 +48,6 @@
   },
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "types": "devtools-service.d.ts"
 }

tests/typings/copy.js

@@ -13,7 +13,7 @@ const outDirs = [
     'webdriverio', 'webdriverio-applitools', 'webdriverio-browserstack',
     'webdriverio-mocha', 'webdriverio-jasmine', 'webdriverio-cucumber',
     'sync-cucumber', 'devtools', 'sync-devtools', 'webdriverio-reporter',
-    'webdriverio-saucelabs', 'sync-saucelabs'
+    'webdriverio-saucelabs', 'sync-saucelabs', 'webdriverio-devtools-service', 'sync-devtools-service'
 ]
 
 const packages = {
@@ -30,7 +30,8 @@ const packages = {
     '@wdio/cucumber-framework': 'packages/wdio-cucumber-framework',
     '@wdio/jasmine-framework': 'packages/wdio-jasmine-framework',
     '@wdio/selenium-standalone-service': 'packages/wdio-selenium-standalone-service',
-    '@wdio/shared-store-service': 'packages/wdio-shared-store-service'
+    '@wdio/shared-store-service': 'packages/wdio-shared-store-service',
+    '@wdio/devtools-service': 'packages/wdio-devtools-service'
 }
 
 const artifactDirs = ['node_modules', 'dist']
@@ -44,7 +45,7 @@ async function copy() {
             const destination = path.join(__dirname, outDir, 'node_modules', packageName)
             const packageDir = packages[packageName]
 
-            const destDir = destination.split('/').slice(0, -1).join('/')
+            const destDir = destination.split(path.sep).slice(0, -1).join(path.sep)
             if (!fs.existsSync(destDir)) {
                 mkdir('-p', destDir)
             }

tests/typings/sync-devtools-service/devtools-service.ts

@@ -0,0 +1,32 @@
+const config: WebdriverIO.Config = {
+  services: [
+      ['devtools', {
+        debuggerAddress: 'localhost:24563'
+      }]
+  ]
+}
+
+browser.enablePerformanceAudits()
+browser.enablePerformanceAudits('Good 3G', 4, false)
+browser.disablePerformanceAudits()
+
+const metrics: object = browser.getMetrics()
+const diagnostics: object = browser.getDiagnostics()
+const mainThreadWorkBreakdown: object[] = browser.getMainThreadWorkBreakdown()
+const performanceScore: number = browser.getPerformanceScore()
+
+browser.emulateDevice('iPad')
+browser.emulateDevice( {viewport: { height: 10, width: 10 }, userAgent: 'test'} )
+
+const cdpResponse = browser.cdp('test', 'test')
+const {host,port} = browser.cdpConnection()
+
+const nodeId: number = browser.getNodeId('selector')
+const nodeIds: number[] = browser.getNodeIds('selector')
+
+browser.startTracing()
+browser.startTracing('test', 1)
+browser.endTracing()
+
+const traceLogs: object = browser.getTraceLogs()
+const pageWeight: object = browser.getPageWeight()

tests/typings/sync-devtools-service/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "noImplicitAny": true,
+    "types": [
+      "@wdio/sync",
+      "@wdio/devtools-service"
+    ],
+    "typeRoots" : ["./types"]
+  }
+}

tests/typings/webdriverio-devtools-service/devtools-service.ts

@@ -0,0 +1,34 @@
+const config: WebdriverIO.Config = {
+  services: [
+      ['devtools', {
+        debuggerAddress: 'localhost:24563'
+      }]
+  ]
+}
+
+async function bar() {
+  browser.enablePerformanceAudits()
+  browser.enablePerformanceAudits('Good 3G', 4, false)
+  browser.disablePerformanceAudits()
+
+  const metrics: object = browser.getMetrics()
+  const diagnostics: object = browser.getDiagnostics()
+  const mainThreadWorkBreakdown: object[] = browser.getMainThreadWorkBreakdown()
+  const performanceScore: number = browser.getPerformanceScore()
+
+  browser.emulateDevice('iPad')
+  browser.emulateDevice( {viewport: { height: 10, width: 10 }, userAgent: 'test'} )
+
+  const cdpResponse = await browser.cdp('test', 'test')
+  const {host,port} = browser.cdpConnection()
+
+  const nodeId: number = browser.getNodeId('selector')
+  const nodeIds: number[] = browser.getNodeIds('selector')
+
+  browser.startTracing()
+  browser.startTracing('test', 1)
+  browser.endTracing()
+
+  const traceLogs: object = browser.getTraceLogs()
+  const pageWeight: object = browser.getPageWeight()
+}

tests/typings/webdriverio-devtools-service/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "noImplicitAny": true,
+    "types": [
+      "webdriverio",
+      "@wdio/devtools-service"
+    ],
+    "typeRoots" : ["./types"]
+  }
+}