hide url workaround behind a pref

Author: toddtarsi

packages/selenium-ide/src/browser/windows/ProjectEditor/tabs/Project/ProjectTab.tsx

@@ -9,7 +9,7 @@ import MenuItem from '@mui/material/MenuItem'
 import Paper from '@mui/material/Paper'
 import Select from '@mui/material/Select'
 import Stack from '@mui/material/Stack'
-import { CoreSessionData } from '@seleniumhq/side-api'
+import { CoreSessionData, VerboseBoolean } from '@seleniumhq/side-api'
 import TextField from 'browser/components/UncontrolledTextField'
 import React, { FC } from 'react'
 import EditorToolbar from '../../components/Drawer/EditorToolbar'
@@ -131,6 +131,25 @@ const ProjectTab: FC<ProjectTabProps> = ({ session: { project, state } }) => (
             <MenuItem value="No">No</MenuItem>
           </Select>
         </FormControl>
+        <FormControl>
+          <InputLabel id="disableCodeExportCompat">
+            Disable code export compatibility mode
+          </InputLabel>
+          <Select
+            id="disableCodeExportCompatPref"
+            label="Disable code export compatibility mode"
+            name="ignoreCertificateErrorsPref"
+            value={state.userPrefs.disableCodeExportCompat}
+            onChange={(e) => {
+              window.sideAPI.state.toggleUserPrefDisableCodeExportCompat(
+                e.target.value as VerboseBoolean
+              )
+            }}
+          >
+            <MenuItem value="Yes">Yes</MenuItem>
+            <MenuItem value="No">No</MenuItem>
+          </Select>
+        </FormControl>
       </Stack>
       <List
         dense

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

@@ -37,9 +37,9 @@ export interface BrowsersInfo {
  * WebdriverExecutor class, which is in itself a wrapper on an selenium-
  * webdriver. This is why, when mounted onto the session, we may have to
  * do this pattern of de-referencing (I'm sorry):
- * 
+ *
  * this.session.driver.driver.driver
- * 
+ *
  * :(
  */
 export default class DriverController extends BaseController {
@@ -68,19 +68,24 @@ export default class DriverController extends BaseController {
         ...capabilities,
       },
       customCommands: this.session.commands.customCommands,
+      disableCodeExportCompat:
+        this.session.state.state.userPrefs.disableCodeExportCompat === 'Yes'
+          ? true
+          : false,
       hooks: {
         onBeforePlay: (v) => this.session.playback.onBeforePlay(v),
       },
       server,
       windowAPI: {
         setWindowSize: async (_executor, width, height) => {
           const window = this.session.windows.getLastPlaybackWindow()
-          const pbWinCount = this.session.windows.playbackWindows.length          
+          const pbWinCount = this.session.windows.playbackWindows.length
           const b = await window.getBounds()
           const calcNewX = b.x + Math.floor(b.width / 2) - Math.floor(width / 2)
-          const calcNewY = b.y + Math.floor(b.height / 2) - Math.floor(height / 2)
-          const newX = calcNewX < 0 ? pbWinCount*20 : calcNewX
-          const newY = calcNewY < 0 ? pbWinCount*20 : calcNewY
+          const calcNewY =
+            b.y + Math.floor(b.height / 2) - Math.floor(height / 2)
+          const newX = calcNewX < 0 ? pbWinCount * 20 : calcNewX
+          const newY = calcNewY < 0 ? pbWinCount * 20 : calcNewY
           await window.setBounds({
             x: newX,
             y: newY,

packages/side-api/src/commands/state/index.ts

@@ -10,6 +10,7 @@ import type { Shape as SetCopiedCommands } from './setCopiedCommands'
 import type { Shape as ToggleBreakpoint } from './toggleBreakpoint'
 import type { Shape as ToggleSuiteMode } from './toggleSuiteMode'
 import type { Shape as ToggleUserPrefCamelCase } from './toggleUserPrefCamelCase'
+import type { Shape as ToggleUserPrefDisableCodeExportCompat } from './toggleUserPrefDisableCodeExportCompat'
 import type { Shape as ToggleUserPrefIgnoreCertificateErrors } from './toggleUserPrefIgnoreCertificateErrors'
 import type { Shape as ToggleUserPrefInsert } from './toggleUserPrefInsert'
 import type { Shape as ToggleUserPrefTheme } from './toggleUserPrefTheme'
@@ -28,6 +29,7 @@ import * as setCopiedCommands from './setCopiedCommands'
 import * as toggleBreakpoint from './toggleBreakpoint'
 import * as toggleSuiteMode from './toggleSuiteMode'
 import * as toggleUserPrefCamelCase from './toggleUserPrefCamelCase'
+import * as toggleUserPrefDisableCodeExportCompat from './toggleUserPrefDisableCodeExportCompat'
 import * as toggleUserPrefIgnoreCertificateErrors from './toggleUserPrefIgnoreCertificateErrors'
 import * as toggleUserPrefInsert from './toggleUserPrefInsert'
 import * as toggleUserPrefTheme from './toggleUserPrefTheme'
@@ -47,6 +49,7 @@ export const commands = {
   toggleBreakpoint,
   toggleSuiteMode,
   toggleUserPrefCamelCase,
+  toggleUserPrefDisableCodeExportCompat,
   toggleUserPrefIgnoreCertificateErrors,
   toggleUserPrefInsert,
   toggleUserPrefTheme,
@@ -70,6 +73,7 @@ export type Shape = {
   toggleBreakpoint: ToggleBreakpoint
   toggleSuiteMode: ToggleSuiteMode
   toggleUserPrefCamelCase: ToggleUserPrefCamelCase
+  toggleUserPrefDisableCodeExportCompat: ToggleUserPrefDisableCodeExportCompat
   toggleUserPrefIgnoreCertificateErrors: ToggleUserPrefIgnoreCertificateErrors
   toggleUserPrefInsert: ToggleUserPrefInsert
   toggleUserPrefTheme: ToggleUserPrefTheme

packages/side-api/src/commands/state/toggleUserPrefDisableCodeExportCompat.ts

@@ -0,0 +1,12 @@
+import set from 'lodash/fp/set'
+import { VerboseBoolean } from '../../models/state'
+import { Mutator } from '../../types'
+
+/**
+ * Customizes command insert behavior to either follow or lead the current
+ * command
+ */
+export type Shape = (pref: VerboseBoolean) => Promise<void>
+
+export const mutator: Mutator<Shape> = (session, { params: [pref] }) =>
+  set('state.userPrefs.disableCodeExportCompat', pref, session)

packages/side-api/src/models/state/index.ts

@@ -31,19 +31,22 @@ export const defaultRecorderState: RecorderStateShape = {
   activeFrame: 'root',
 }
 
+export type VerboseBoolean = 'Yes' | 'No'
 export type InsertCommandPref = 'Before' | 'After'
 export type ThemePref = 'Dark' | 'Light' | 'System'
-export type CamelCaseNamesPref = 'Yes' | 'No'
-export type IgnoreCertificateErrorsPref = 'Yes' | 'No'
+export type CamelCaseNamesPref = VerboseBoolean
+export type IgnoreCertificateErrorsPref = VerboseBoolean
 
 export interface UserPrefs {
+  disableCodeExportCompat: VerboseBoolean
   insertCommandPref: InsertCommandPref
   themePref: ThemePref
   camelCaseNamesPref: CamelCaseNamesPref
   ignoreCertificateErrorsPref: IgnoreCertificateErrorsPref
 }
 
 export const defaultUserPrefs: UserPrefs = {
+  disableCodeExportCompat: 'No',
   insertCommandPref: 'After',
   themePref: 'System',
   camelCaseNamesPref: 'No',

packages/side-runtime/src/webdriver.ts

@@ -72,6 +72,7 @@ export interface WindowAPI {
 export interface WebDriverExecutorConstructorArgs {
   capabilities?: ExpandedCapabilities
   customCommands?: PluginShape['commands']
+  disableCodeExportCompat?: boolean
   driver?: WebDriver
   hooks?: WebDriverExecutorHooks
   implicitWait?: number
@@ -131,6 +132,7 @@ const defaultWindowAPI: WindowAPI = {
 export default class WebDriverExecutor {
   constructor({
     customCommands = {},
+    disableCodeExportCompat = false,
     driver,
     capabilities,
     server,
@@ -144,6 +146,7 @@ export default class WebDriverExecutor {
       this.capabilities = capabilities || DEFAULT_CAPABILITIES
       this.server = server
     }
+    this.disableCodeExportCompat = disableCodeExportCompat
     this.initialized = false
     this.implicitWait = implicitWait || 5 * 1000
     this.hooks = hooks
@@ -157,6 +160,7 @@ export default class WebDriverExecutor {
   cancellable?: { cancel: () => void }
   capabilities?: ExpandedCapabilities
   customCommands: Required<PluginShape>['commands']
+  disableCodeExportCompat: boolean
   // @ts-expect-error
   driver: WebDriver
   server?: string
@@ -318,22 +322,26 @@ export default class WebDriverExecutor {
       for (let frameTarget of frameTargets) {
         if (frameTarget === '..') await targetLocator.parentFrame()
         else {
-          const frameIndex = locator.substring('index='.length)
-          // Delay for a second. Check too fast, and browser will think this iframe location is 'about:blank'
-          await new Promise((f) => setTimeout(f, 1000))
-          const frameUrl = await this.driver.executeScript(
-            "return window.frames['" + frameIndex + "'].location.href"
-          )
-          const windowFrames = await this.driver.findElements(By.css('iframe'))
-          let matchIndex = 0
-          for (let frame of windowFrames) {
-            let localFrameUrl = await frame.getAttribute('src')
-            if (localFrameUrl === frameUrl) {
-              break
+          if (this.disableCodeExportCompat) {
+            const frameIndex = locator.substring('index='.length)
+            // Delay for a second. Check too fast, and browser will think this iframe location is 'about:blank'
+            await new Promise((f) => setTimeout(f, 1000))
+            const frameUrl = await this.driver.executeScript(
+              "return window.frames['" + frameIndex + "'].location.href"
+            )
+            const windowFrames = await this.driver.findElements(By.css('iframe'))
+            let matchIndex = 0
+            for (let frame of windowFrames) {
+              let localFrameUrl = await frame.getAttribute('src')
+              if (localFrameUrl === frameUrl) {
+                break
+              }
+              matchIndex++
             }
-            matchIndex++
+            this.driver.switchTo().frame(matchIndex)
+          } else {
+            await targetLocator.frame(Number(frameTarget))
           }
-          this.driver.switchTo().frame(matchIndex)
         }
       }
     } else {