4.x alpha and testing gh build pipeline (#1465)

Alpha version of release

.github/workflows/release.yml

@@ -0,0 +1,27 @@
+name: 'Release'
+
+on:
+  push:
+    branches: frunk
+
+jobs:
+  release:
+    runs-on: macos-11
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build all JS
+        run: yarn build
+      - name: Publish non IDE packages to npm
+        run: npx lerna publish --canary --yes --no-verify-access from-package
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      - name: Install electron-builder dependencies
+        run: yarn workspace @seleniumhq/selenium-ide add dmg-license
+      - name: Build selenium-ide binaries
+        run: yarn build:electron

README.md

@@ -59,3 +59,38 @@ If you have questions, check out [our FAQ](https://github.com/SeleniumHQ/seleniu
 You can also find us on the [#selenium](irc://freenode.net/selenium) IRC
 channel, which is also available on
 [Slack](https://www.selenium.dev/support/#ChatRoom).
+
+## Architecture
+
+The codebase is javascript, and relies heavily on the NodeJS, Electron, and
+React ecosystem. This is a collection of packages arranged in a monorepo
+config. Excepting the code-export packages, which are fully untyped, these
+packages are fully typed using Typescript.
+
+### Packages
+
+These are the main packages. They're used to run the thing:
+
+- selenium-ide: Main Electron app. Built with webpack, react frontend. Communicates
+via the IPC protocols.
+
+- side-runner: NodeJS Task Runner. Built with typescript.
+
+- side-cli: Experimental cli using react and ink.
+
+- side-runtime: Playback system wrapper. Takes side files and executes
+them. Used by both selenium-ide and side-runner.
+
+- side-api: This is the api shape of selenium-ide. This is intended to be used
+to help share the api types with plugins in a lower footprint way.
+
+- side-model: This is used to provide metadata around the standard commands and
+argument types.
+
+- side-commons: This is like the typical utils/helpers folder, except meant to
+be shared across packages instead of just folders.
+
+- side-code-export: NodeJS transpiler for .side files. Used to export to other
+languages (csharp, java, javascript, python, ruby).
+
+- code-export-*: Code export format for various languages

lerna.json

@@ -3,6 +3,6 @@
   "packages": [
     "packages/*"
   ],
-  "version": "4.0.0",
+  "version": "4.0.0-alpha.0",
   "npmClient": "yarn"
 }

packages/code-export-csharp-nunit/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@seleniumhq/code-export-csharp-commons": "^3.17.4",
-    "@seleniumhq/side-code-export": "^4.0.0"
-  }
+    "@seleniumhq/side-code-export": "^4.0.0-alpha.0"
+  },
+  "gitHead": "f58e327e7616e23a3e926e4b80cf9952164e5744"
 }

packages/code-export-csharp-xunit/package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@seleniumhq/code-export-csharp-commons": "^3.17.4",
-    "@seleniumhq/side-code-export": "^4.0.0"
-  }
+    "@seleniumhq/side-code-export": "^4.0.0-alpha.0"
+  },
+  "gitHead": "f58e327e7616e23a3e926e4b80cf9952164e5744"
 }

packages/code-export-java-junit/package.json

@@ -21,6 +21,7 @@
     "@babel/preset-env": "^7.4.5"
   },
   "dependencies": {
-    "@seleniumhq/side-code-export": "^4.0.0"
-  }
+    "@seleniumhq/side-code-export": "^4.0.0-alpha.0"
+  },
+  "gitHead": "f58e327e7616e23a3e926e4b80cf9952164e5744"
 }

packages/code-export-javascript-mocha/package.json

@@ -21,6 +21,7 @@
     "@babel/preset-env": "^7.4.5"
   },
   "dependencies": {
-    "@seleniumhq/side-code-export": "^4.0.0"
-  }
+    "@seleniumhq/side-code-export": "^4.0.0-alpha.0"
+  },
+  "gitHead": "f58e327e7616e23a3e926e4b80cf9952164e5744"
 }

packages/code-export-python-pytest/package.json

@@ -21,6 +21,7 @@
     "@babel/preset-env": "^7.4.5"
   },
   "dependencies": {
-    "@seleniumhq/side-code-export": "^4.0.0"
-  }
+    "@seleniumhq/side-code-export": "^4.0.0-alpha.0"
+  },
+  "gitHead": "f58e327e7616e23a3e926e4b80cf9952164e5744"
 }

packages/code-export-ruby-rspec/package.json

@@ -21,6 +21,7 @@
     "@babel/preset-env": "^7.4.5"
   },
   "dependencies": {
-    "@seleniumhq/side-code-export": "^4.0.0"
-  }
+    "@seleniumhq/side-code-export": "^4.0.0-alpha.0"
+  },
+  "gitHead": "f58e327e7616e23a3e926e4b80cf9952164e5744"
 }

packages/get-driver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/get-driver",
-  "version": "4.0.0",
+  "version": "4.0.0-alpha.0",
   "private": true,
   "description": "Download browser drivers",
   "author": "Tomer <tomer@corevo.io>",
@@ -9,7 +9,6 @@
   "scripts": {
     "build": "tsc",
     "clean": "rm -rf dist tsconfig.tsbuildinfo node_modules",
-    "prepublishOnly": "yarn clean && yarn build",
     "watch": "tsc --watch"
   },
   "main": "dist/index.js",

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/selenium-ide",
-  "version": "4.0.0",
+  "version": "4.0.0-alpha.0",
   "private": true,
   "description": "Selenium IDE electron app",
   "author": "Todd <tarsitodd@gmail.com>",
@@ -110,11 +110,11 @@
     "@seleniumhq/code-export-javascript-mocha": "3.17.4",
     "@seleniumhq/code-export-python-pytest": "3.17.4",
     "@seleniumhq/code-export-ruby-rspec": "3.17.4",
-    "@seleniumhq/get-driver": "^4.0.0",
-    "@seleniumhq/side-api": "^4.0.0",
-    "@seleniumhq/side-model": "^4.0.0",
-    "@seleniumhq/side-plugin-example": "^4.0.0",
-    "@seleniumhq/side-runtime": "^4.0.0",
+    "@seleniumhq/get-driver": "^4.0.0-alpha.0",
+    "@seleniumhq/side-api": "^4.0.0-alpha.0",
+    "@seleniumhq/side-model": "^4.0.0-alpha.0",
+    "@seleniumhq/side-plugin-example": "^4.0.0-alpha.0",
+    "@seleniumhq/side-runtime": "^4.0.0-alpha.0",
     "electron-chromedriver": "16.0.0",
     "electron-log": "4.4.6",
     "electron-store": "^8.0.0",

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/CommandFields/CommandSelector.tsx

@@ -46,7 +46,7 @@ const CommandSelector: FC<CommandSelectorProps> = ({
       />
 
       <Tooltip
-        className="flex-fixed ml-5 my-auto"
+        className="flex-fixed ml-4 my-auto"
         title={`${isDisabled ? 'En' : 'Dis'}able this command`}
         placement="top-end"
       >

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandList.tsx

@@ -15,7 +15,7 @@ export interface CommandListProps {
   selectedCommandIndexes: number[]
 }
 
-const useKeyboundNav = makeKeyboundNav(window.sideAPI.state.updateTestSelection)
+const useKeyboundNav = makeKeyboundNav(window.sideAPI.state.updateStepSelection)
 
 const CommandList: FC<CommandListProps> = ({
   activeTest,

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Tests/TestCommandTable.tsx

@@ -16,7 +16,7 @@ export interface CommandListProps {
   selectedCommandIndexes: number[]
 }
 
-const useKeyboundNav = makeKeyboundNav(window.sideAPI.state.updateTestSelection)
+const useKeyboundNav = makeKeyboundNav(window.sideAPI.state.updateStepSelection)
 
 const CommandList: FC<CommandListProps> = ({
   activeTest,

packages/selenium-ide/src/main/session/controllers/Projects/index.ts

@@ -61,7 +61,13 @@ export default class ProjectsController {
     return this.recentProjects.get()
   }
 
-  async new(): Promise<ProjectShape> {
+  async new(): Promise<ProjectShape | null> {
+    if (this.loaded) {
+      const confirm = await this.onProjectUnloaded()
+      if (!confirm) {
+        return null
+      }
+    }
     const testID = randomUUID()
     const starterProject: ProjectShape = {
       id: randomUUID(),
@@ -166,6 +172,7 @@ export default class ProjectsController {
       return null
     }
   }
+
   async save_v3(filepath: string): Promise<boolean> {
     await fs.writeFile(filepath, JSON.stringify(this.project, undefined, 2))
     this.recentProjects.add(filepath)

packages/selenium-ide/src/main/session/controllers/Recorder/index.ts

@@ -65,8 +65,9 @@ export default class RecorderController extends BaseController {
   async handleNewWindow(_details: Electron.HandlerDetails) {
     const session = await this.session.state.get()
     if (session.state.status !== 'recording') return
+    const newWindowID = `win${randomInt(1, 9999)}`
     this.session.api.recorder.onNewWindow.dispatchEvent(
-      `win${randomInt(1, 9999)}`,
+      newWindowID,
       randomUUID()
     )
   }
@@ -89,9 +90,7 @@ export default class RecorderController extends BaseController {
     }
     return frameLocation
   }
-  async setWindowHandle(sessionID: string, handle: string) {
-    console.log('Setting window handle', sessionID, handle)
-  }
+
   async start(): Promise<string | null> {
     const playbackWindow = await this.session.windows.getLastPlaybackWindow()
     const playbackURL = playbackWindow.webContents.getURL()

packages/selenium-ide/src/main/session/controllers/Windows/index.ts

@@ -132,10 +132,14 @@ export default class WindowsController extends BaseController {
   handlePlaybackWindow(window: BrowserWindow) {
     this.playbackWindows.push(window)
     window.webContents.insertCSS(playbackCSS)
-    window.webContents.setWindowOpenHandler(() => ({
-      action: 'allow',
-      overrideBrowserWindowOptions: playbackWindowOptions,
-    }))
+    window.webContents.setWindowOpenHandler((details) => {
+      this.session.recorder.handleNewWindow(details)
+      return {
+        action: 'allow',
+        overrideBrowserWindowOptions: playbackWindowOptions,
+      }
+    })
+
     window.webContents.on('did-create-window', (win) =>
       this.handlePlaybackWindow(win)
     )
@@ -145,10 +149,11 @@ export default class WindowsController extends BaseController {
     // This is to overcome a quirk in Electron where
     // the preload scripts will sometimes just fail to register or something
     window.webContents.on('frame-created', async (_event, details) => {
-      await details.frame.once('dom-ready', async () => {
-        const hasAPI = await details.frame.executeJavaScript('window.sideAPI')
+      const frame = details.frame;
+      await frame.once('dom-ready', async () => {
+        const hasAPI = await frame.executeJavaScript('window.sideAPI')
         if (!hasAPI) {
-          details.frame.reload()
+          frame.reload()
         }
         await this.session.api.recorder.onFrameRecalculate.dispatchEvent()
       })

packages/side-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/side-api",
-  "version": "4.0.0",
+  "version": "4.0.0-alpha.0",
   "private": false,
   "description": "Selenium IDE shared models",
   "author": "Todd Tarsi <tarsitodd@gmail.com>",
@@ -9,7 +9,6 @@
   "scripts": {
     "build": "tsc",
     "clean": "rm -rf dist tsconfig.tsbuildinfo node_modules",
-    "prepublishOnly": "yarn clean && yarn build",
     "watch": "tsc --watch"
   },
   "main": "dist/index.js",
@@ -18,10 +17,10 @@
     "dist"
   ],
   "dependencies": {
-    "@seleniumhq/browser-info": "^4.0.0",
-    "@seleniumhq/get-driver": "^4.0.0",
-    "@seleniumhq/side-model": "^4.0.0",
-    "@seleniumhq/side-runtime": "^4.0.0",
+    "@seleniumhq/browser-info": "^4.0.0-alpha.0",
+    "@seleniumhq/get-driver": "^4.0.0-alpha.0",
+    "@seleniumhq/side-model": "^4.0.0-alpha.0",
+    "@seleniumhq/side-runtime": "^4.0.0-alpha.0",
     "@types/electron": "1.6.10",
     "lodash": "^4.17.21"
   },
@@ -31,5 +30,6 @@
   },
   "bugs": {
     "url": "https://github.com/SeleniumHQ/selenium-ide/issues"
-  }
+  },
+  "gitHead": "f58e327e7616e23a3e926e4b80cf9952164e5744"
 }

packages/side-api/src/commands/recorder/recordNewCommand.ts

@@ -39,14 +39,17 @@ export const mutator: Mutator<Shape> = (
   { params: [cmdInput], result }
 ) => {
   if (!result) return session
-  const commandIndex = getActiveCommandIndex(session)
-  const sessionWithNewSteps = addStepsMutator(session, {
+  const sessionWithSelectFrameCommands = result.reduce(
+    processSelectFrameCommands,
+    session
+  )
+  const commandIndex = getActiveCommandIndex(sessionWithSelectFrameCommands)
+  return addStepsMutator(sessionWithSelectFrameCommands, {
     params: [
       session.state.activeTestID,
       commandIndex,
       [cmdInput as CommandShape],
     ],
     result,
   })
-  return result.reduce(processSelectFrameCommands, sessionWithNewSteps)
 }

packages/side-api/src/commands/tests/addSteps.ts

@@ -19,9 +19,9 @@ export const mutator: Mutator<Shape> = (
 ) => {
   const selectIndex =
     session.state.status === 'recording'
-      ? index + 1
+      ? index + result.length
       : session.state.userPrefs.insertCommandPref === 'After'
-      ? index + 1
+      ? index + result.length
       : index
 
   const sessionWithNewCommands = update(
@@ -32,13 +32,7 @@ export const mutator: Mutator<Shape> = (
         `${testIndex}.commands`,
         (commands: CommandShape[]) => {
           const commandsWithNewEntry = commands.slice(0)
-          const insertIndex =
-            session.state.status === 'recording'
-              ? index + 1
-              : session.state.userPrefs.insertCommandPref === 'After'
-              ? index + 1
-              : index
-          commandsWithNewEntry.splice(insertIndex, 0, ...result)
+          commandsWithNewEntry.splice(selectIndex, 0, ...result)
           return commandsWithNewEntry
         },
         tests

packages/side-api/src/commands/tests/removeSteps.ts

@@ -27,7 +27,7 @@ export const mutator: Mutator<Shape> = (
     (selectedCommandIndexes: number[]): number[] => {
       {
         const filteredCommands = selectedCommandIndexes.filter(
-          (_id, index) => !stepIndexes.includes(index)
+          (index) => !stepIndexes.includes(index)
         )
         if (filteredCommands.length) {
           return filteredCommands

packages/side-api/tsconfig.json

@@ -6,5 +6,19 @@
     "outDir": "dist"
   },
   "include": ["src/**/*.ts"],
-  "exclude": ["**/__mocks__", "**/__tests__"]
+  "exclude": ["**/__mocks__", "**/__tests__"],
+  "references": [
+    {
+      "path": "../browser-info"
+    },
+    {
+      "path": "../get-driver"
+    },
+    {
+      "path": "../side-model"
+    },
+    {
+      "path": "../side-runtime"
+    }
+  ]
 }