Selenium IDE: Running v4 without v3 (#1258)

* verify not editable tests disabled (#1151)

changed to : 'verify not editable' = has been disabled
rather than what the original said 
hasn't been disabled

* [v4] Attempting to run v3 inside of v4

* chromedriver install via electron-chromedriver

* move renderer out into a separate package

in addition, this adds electron-tabs to the frontend

* remove unused chromedriver install script

* making selenium ide v3 work with install stuff

it is slow as hell though, so there is that

* remove nodeIntegration, and instead lay boilerplate towards a channel system

I would feel really bad if someone used selenium-ide, and some zero day in electron / chrome let them leverage the full NodeJS api.
So the plan would be to swap that out for a channel system to leverage enhanced permissions.

* selenium ide v3 renders and some code cleanup

* first time rendering v3 in electron

the ipc layer is one directional and everything is kinda hacky right now
loading and saving side files is the only part that really works
next step is to make it so electron can talk into webview via ipc
and then get recording working like it used to

* working bi-directional api

and it feels pretty good to work with :D

* voraciously cleaning up this stuff

* progress on side extension polyfill
I am starting to handle the tabs.onUpdated event
It isnt a lot, but it sets the boilerplate

* v4 an almost insignificant amount of docs
event linked to corresponding chrome api

* extending type enforcement through the api
wah wah wee wah

* making types slightly more consistent and bug squashing

yay types!

* trying to move to webdriver stuff

* trying to get playback to use webdriver

* Breaking everything to be "cleaner"
Goodbye type completion, goodbye anything working.

This is kind of a bad idea, but the nice thing is that
it aligns the whole package around its true function at this point:
providing a polyfill for the webextension api that integrates with
electron. If we have that, we have v3 and can start making v4 changes.

* oh my sweet types, how I have missed you

* oh boy things work again

* [v4] save what i have

* Replacing a polyfill with an api

* selenium ide v4 but without the polyfill

* wiring in rpc style broadcastng to keep browser windows in sync, overengineering

* 0 linter errors, server and client have shared state now

* fully typing runtime, commons, and adding to model

* configurable driver and startup ux

* getting electron driver working again

* A basic spark, fun with panels

* style and building better

* PLAYBACK!!! :D :D :D

* re-running playback multiple times works

* latest code shape

* repairing build command

* clean watch and build commands

* consistentizing build and watch commands just a bit more

* passing types in side-migrate

* module file for unescape

* atomic and stable build and watch commands

* cleaning up last ts complaints

* Changed casing (#1330)

* Fix stale frontend (#1329)

* drop unneeded loggers for now
some of these should perhaps be console.debug, but w/e

* fix stale frontend
we were not memoizing on enough things which caused a prev
version of test and command to be cached, causing things
like test or command updates to not reflect

* thin down command list panel
less room there is more room for playback windows

* hide panels less aggressively
if a new playback window is opened, hiding panels
feels weird and somewhat unseemly. This hides panels
only if all windows are unfocused, which means
you are not using the app atm

* reduce build memory requirements

* webpack rapid build

* fix invalid capitalization

* playback progress and re-collapsing ux

* latest everything

* fixed recurring playback

* addl ux work

* add record placeholder function

* typing side recorder postprocessor

* recorder is mostly typed

* recording is so much closer

* commands are piping whoo!

* getting better every day :3

* updating mui, collapsing components

* tabs layer perhaps?

* suite editor system

* project editing tab

* recording concats steps now

* tuning some scrolling stuff

* save and load controls

* rebuild driver between projects

* typed argument fields

* resolve type errors

* renaming things, wip towards select control

* select element :D :D

* inspect elements option in all playback windows

Co-authored-by: OzBob <[email protected]>
Co-authored-by: Harsh <[email protected]>

Author: 3 people

.eslintignore

@@ -0,0 +1,7 @@
+# No wasted processing 
+**/node_modules
+**/dist
+**/.yarn
+**/tsconfig.tsbuildinfo
+**/gen
+**/trace

.eslintrc.js

@@ -26,20 +26,27 @@ module.exports = {
       files: ['**/*.ts', '**/*.tsx'],
       parser: '@typescript-eslint/parser',
       rules: {
+        'import/no-unresolved': 'error',
         '@typescript-eslint/array-type': ['error', { default: 'array' }],
         '@typescript-eslint/ban-types': 'error',
         '@typescript-eslint/no-unused-vars': [
           'error',
           { argsIgnorePattern: '^_' },
         ],
-        '@typescript-eslint/interface-name-prefix': ['error', 'never'],
         'no-dupe-class-members': 'off',
         'no-unused-vars': 'off',
         'no-inner-declarations': 0, // for typescript namespace
       },
     },
   ],
-  plugins: ['@typescript-eslint', 'jest', 'react', 'prettier', 'no-only-tests'],
+  plugins: [
+    '@typescript-eslint',
+    'import',
+    'jest',
+    'react',
+    'prettier',
+    'no-only-tests',
+  ],
   rules: {
     'prettier/prettier': 'error',
     'react/prop-types': [0],
@@ -71,6 +78,13 @@ module.exports = {
         },
       },
     ],
+    'node/no-missing-require': [
+      'error',
+      {
+        allowModules: ['electron'],
+        tryExtensions: ['.js', '.jsx', '.json', '.ts', '.tsx', '.node'],
+      },
+    ],
     'node/no-missing-import': [
       'error',
       {
@@ -80,8 +94,18 @@ module.exports = {
     ],
   },
   settings: {
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+    'import/resolver': {
+      typescript: {
+        alwaysTryTypes: true,
+        package: ['./tsconfig.json', './packages/*/tsconfig.json'],
+      },
+    },
     react: {
       version: 'detect',
     },
   },
+  root: true,
 }

.gitignore

@@ -1,4 +1,4 @@
-web-ext-artifacts
+eb-ext-artifacts
 node_modules
 _MACOSX/
 .DS_Store
@@ -18,7 +18,9 @@ tsconfig.tsbuildinfo
 tsconfig.build.tsbuildinfo
 files
 drivers
-bazel-*
+*.d.ts.map
+*.d.ts
+!packages/side-migrate/src/types.d.ts
 
 # auto-generated docs
 docs/api/arguments.md

babel.config.js

@@ -4,8 +4,8 @@ const path = require('path')
 module.exports = {
   babelrcRoots: fs
     .readdirSync(path.join(__dirname, 'packages'))
-    .map(dirname => path.join(__dirname, 'packages', dirname))
-    .filter(dirpath => {
+    .map((dirname) => path.join(__dirname, 'packages', dirname))
+    .filter((dirpath) => {
       const stats = fs.statSync(dirpath)
 
       return stats.isDirectory()
@@ -21,7 +21,7 @@ module.exports = {
       '@babel/preset-env',
       {
         targets: {
-          node: '8',
+          node: '14',
         },
       },
     ],

dump.rdb

@@ -5,13 +5,20 @@
   "private": true,
   "scripts": {
     "start": "cd packages/selenium-ide && yarn start",
-    "build": "lerna run build",
+    "build": "yarn build:ts && yarn build:ide",
+    "build:ide:fast": "lerna run --scope @seleniumhq/selenium-ide --loglevel verbose build:webpack",
+    "build:ide": "lerna run --scope @seleniumhq/selenium-ide --loglevel verbose build:webpack",
+    "build:ts": "tsc --build --verbose",
+    "clean": "lerna run clean --loglevel verbose",
+    "clean:nuke": "git clean -fdx",
     "test": "jest",
     "test:e2e": "jest --testMatch \"**/packages/**/__tests__/**/*.e2e.js\"",
     "lint": "yarn lint:scripts",
     "lint:scripts": "eslint --ignore-pattern node_modules --ignore-pattern third-party --ignore-pattern dist --ignore-pattern build --ignore-pattern json --ext .ts,.tsx --ext .js packages/",
     "typecheck": "tsc --noEmit --composite false",
-    "watch": "lerna run --no-bail --parallel watch",
+    "watch": "yarn watch:ts & yarn watch:webpack",
+    "watch:webpack": "lerna run --parallel --stream --scope @seleniumhq/selenium-ide --loglevel verbose watch",
+    "watch:ts": "tsc --build --verbose --watch",
     "preinstall": "node ./scripts/check-yarn.js",
     "download-drivers": "cd packages/webdriver-testkit && yarn download-drivers"
   },
@@ -61,37 +68,31 @@
     "@testing-library/jest-dom": "^4.2.1",
     "@types/fs-extra": "^8.0.0",
     "@types/jest": "^24.0.21",
-    "@types/mocha": "8.0.0",
-    "@types/node": "^12.12.3",
-    "@types/node-fetch": "^2.5.2",
-    "@types/selenium-webdriver": "^4.0.9",
-    "@types/tar": "^4.0.3",
-    "@types/unzipper": "^0.10.0",
-    "@typescript-eslint/eslint-plugin": "^2.6.0",
-    "@typescript-eslint/parser": "^2.6.0",
-    "babel-eslint": "^10.0.3",
+    "@types/node": "^15.12.1",
+    "@types/selenium-webdriver": "^4.0.16",
+    "@typescript-eslint/eslint-plugin": "^4.28.1",
+    "@typescript-eslint/parser": "^4.28.1",
+    "babel-eslint": "^10.1.0",
     "babel-jest": "^24.9.0",
-    "electron": "^9.4.0",
-    "electron-builder": "^21.2.0",
-    "eslint": "^6.5.0",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-plugin-jest": "^23.0.2",
-    "eslint-plugin-no-only-tests": "^2.3.1",
-    "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.14.3",
-    "fs-extra": "^8.1.0",
+    "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-jest": "^25.3.2",
+    "eslint-plugin-no-only-tests": "^2.6.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.28.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^24.9.0",
     "jest-cli": "26.1.0",
     "lerna": "^3.16.4",
-    "nock": "^11.6.0",
-    "prettier": "^1.17.0",
+    "prettier": "^2.3.2",
     "stylelint": "^11.0.0",
     "stylelint-config-prettier": "^6.0.0",
     "stylelint-config-standard": "^19.0.0",
     "stylelint-prettier": "^1.0.6",
     "ts-jest": "^24.1.0",
-    "typescript": "^3.6.3"
+    "typescript": "^4.5.4"
   }
 }

package.json

@@ -22,8 +22,8 @@ import { Chrome } from '../src/chrome'
 import { sh, makeError } from '../src/sh'
 
 const { getBrowserInfo, ChromeChannel } = Chrome
-const mockSh = (sh as unknown) as jest.Mock<any, any>
-const mockPlatform = (os.platform as unknown) as jest.Mock<any, any>
+const mockSh = sh as unknown as jest.Mock<any, any>
+const mockPlatform = os.platform as unknown as jest.Mock<any, any>
 
 describe('chrome browser info', () => {
   describe('macOS', () => {
@@ -51,11 +51,12 @@ describe('chrome browser info', () => {
       try {
         await getBrowserInfo(ChromeChannel.stable)
       } catch (err) {
+        // @ts-expect-error
         expect(err.message).toBe('Unable to find Chrome installation')
       }
     })
     it('should get all chrome info', async () => {
-      mockSh.mockImplementation(binary => {
+      mockSh.mockImplementation((binary) => {
         if (binary.includes('Canary')) {
           return Promise.resolve({
             stdout: 'Google Chrome 79.0.3915.0 canary\n',
@@ -96,7 +97,7 @@ describe('chrome browser info', () => {
       mockSh.mockReset()
     })
     it('should get partial chrome info if some installations do not exist', async () => {
-      mockSh.mockImplementation(binary => {
+      mockSh.mockImplementation((binary) => {
         if (binary.includes('Canary')) {
           return Promise.resolve({
             stdout: 'Google Chrome 79.0.3915.0 canary\n',
@@ -153,6 +154,7 @@ describe('chrome browser info', () => {
       try {
         await getBrowserInfo(ChromeChannel.stable)
       } catch (err) {
+        // @ts-expect-error
         expect(err.message).toBe('Unable to find Chrome installation')
       }
     })
@@ -161,11 +163,12 @@ describe('chrome browser info', () => {
       try {
         await getBrowserInfo(ChromeChannel.canary)
       } catch (err) {
+        // @ts-expect-error
         expect(err.message).toBe('Unsupported channel canary')
       }
     })
     it('should get all chrome info', async () => {
-      mockSh.mockImplementation(binary => {
+      mockSh.mockImplementation((binary) => {
         if (binary.includes('beta')) {
           return Promise.resolve({
             stdout: 'Google Chrome 75.0.3770.75 beta\n',
@@ -193,7 +196,7 @@ describe('chrome browser info', () => {
       mockSh.mockReset()
     })
     it('should get partial chrome info if some installations do not exist', async () => {
-      mockSh.mockImplementation(binary => {
+      mockSh.mockImplementation((binary) => {
         if (binary.includes('beta')) {
           return Promise.reject(makeError('error', 1, '', ''))
         } else {

packages/browser-info/__tests__/chrome.spec.ts

@@ -42,8 +42,11 @@ describe('sh', () => {
         'console.log(`out`);console.error(`err`);process.exit(1);',
       ])
     } catch (err) {
+      // @ts-expect-error
       expect(err.stdout).toBe('out\n')
+      // @ts-expect-error
       expect(err.stderr).toBe('err\n')
+      // @ts-expect-error
       expect(err.code).toBe(1)
     }
   })
@@ -52,6 +55,7 @@ describe('sh', () => {
     try {
       await sh('command-that-does-not-exist')
     } catch (err) {
+      // @ts-expect-error
       expect(err.code).toBe(1)
     }
   })

packages/browser-info/__tests__/sh.spec.ts

@@ -10,7 +10,7 @@
     "build": "tsc",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",
     "prepublishOnly": "yarn clean && yarn build",
-    "watch": "yarn build -w"
+    "watch": "tsc --watch"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/browser-info/package.json

@@ -1,19 +1,13 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "baseUrl": ".",
+    "baseUrl": "./src",
     "rootDir": "src",
     "outDir": "dist",
-    "target": "es5",
-    "module": "commonjs",
-    "strict": true,
-    "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
   },
-   "include": [
-     "src"
-   ],
+   "include": ["src/**/*.ts"],
    "exclude": [
      "**/__mocks__",
      "**/__tests__"

packages/browser-info/tsconfig.json

@@ -42,13 +42,13 @@ describe('download-driver', () => {
     const cp = spawn(chromedriver, ['--version'])
     let stdout = ''
     let processExit: () => {}
-    const p = new Promise(res => {
+    const p = new Promise((res) => {
       processExit = res as () => {}
     })
-    cp.stdout.on('data', data => {
+    cp.stdout.on('data', (data) => {
       stdout += data
     })
-    cp.on('close', code => {
+    cp.on('close', (code) => {
       expect(code).toBe(0)
       processExit()
     })
@@ -68,13 +68,13 @@ describe('download-driver', () => {
     const cp = spawn(chromedriver, ['--version'])
     let stdout = ''
     let processExit: () => {}
-    const p = new Promise(res => {
+    const p = new Promise((res) => {
       processExit = res as () => {}
     })
-    cp.stdout.on('data', data => {
+    cp.stdout.on('data', (data) => {
       stdout += data
     })
-    cp.on('close', code => {
+    cp.on('close', (code) => {
       expect(code).toBe(0)
       processExit()
     })
@@ -94,13 +94,13 @@ describe('download-driver', () => {
     const cp = spawn(geckodriver, ['--version'])
     let stdout = ''
     let processExit: () => {}
-    const p = new Promise(res => {
+    const p = new Promise((res) => {
       processExit = res as () => {}
     })
-    cp.stdout.on('data', data => {
+    cp.stdout.on('data', (data) => {
       stdout += data
     })
-    cp.on('close', code => {
+    cp.on('close', (code) => {
       expect(code).toBe(0)
       processExit()
     })
@@ -119,6 +119,7 @@ describe('download-driver', () => {
         version: '6.0.9',
       })
     } catch (err) {
+      // @ts-expect-error
       expect(err.message).toBe('Failed to download driver')
     }
   })

packages/get-driver/__tests__/download-driver.spec.ts

@@ -10,7 +10,7 @@
     "build": "tsc",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",
     "prepublishOnly": "yarn clean && yarn build",
-    "watch": "yarn build -w"
+    "watch": "tsc --watch"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/get-driver/package.json

@@ -30,7 +30,7 @@ export async function resolveDriverUrl({
 }) {
   switch (browser) {
     case 'electron': {
-      return `https://github.com/electron/electron/releases/download/v${version}/chromedriver-v${version}-${platform}-${arch}.zip`
+      throw new Error('Installation of electron browser handled by electron-chromedriver package');
     }
     case 'chrome': {
       return `https://chromedriver.storage.googleapis.com/${await getChromedriverVersion(
@@ -63,13 +63,13 @@ export function resolveDriverName({
   }`
 }
 
-export type Browser = 'electron' | 'chrome' | 'firefox'
+export type Browser = 'chrome' | 'electron' | 'firefox'
 
 export type Platform = NodeJS.Platform
 
 const DriverNames: BrowserToDriver = {
-  electron: 'chromedriver',
   chrome: 'chromedriver',
+  electron: 'chromedriver',
   firefox: 'geckodriver',
 }