highlight element command

Author: toddtarsi

packages/selenium-ide/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/selenium-ide",
-  "version": "4.0.0-alpha.24",
+  "version": "4.0.0-alpha.25",
   "private": true,
   "description": "Selenium IDE electron app",
   "author": "Todd <[email protected]>",
@@ -100,7 +100,7 @@
     "@mui/lab": "^5.0.0-alpha.72",
     "@mui/material": "^5.5.0",
     "@seleniumhq/get-driver": "^4.0.0-alpha.1",
-    "@seleniumhq/side-api": "^4.0.0-alpha.10",
+    "@seleniumhq/side-api": "^4.0.0-alpha.11",
     "@seleniumhq/side-model": "^4.0.0-alpha.2",
     "@seleniumhq/side-plugin-example": "^4.0.0-alpha.1",
     "@seleniumhq/side-runtime": "^4.0.0-alpha.14",

packages/selenium-ide/src/browser/windows/PlaybackWindow/preload/find-select.ts

@@ -25,10 +25,16 @@ const init = () => {
   window.sideAPI.recorder.onRequestSelectElement.addListener(
     processSelectionCommand
   )
+  window.sideAPI.recorder.onHighlightElement.addListener(
+    processHighlightCommand
+  )
   window.addEventListener('beforeunload', () => {
     window.sideAPI.recorder.onRequestSelectElement.removeListener(
       processSelectionCommand
     )
+    window.sideAPI.recorder.onHighlightElement.removeListener(
+      processHighlightCommand
+    )
   })
 }
 
@@ -88,6 +94,12 @@ function processMessage(event: MessageEvent<any>) {
   }
 }
 
+async function processHighlightCommand(locator: string): Promise<void> {
+  const element = await locatorBuilders.findElement(locator)
+  console.log('Highlighting element', element)
+  await highlight(element)
+}
+
 function highlight(element: HTMLElement): Promise<void> {
   return new Promise((res) => {
     const highlightElement = document.createElement('div')
@@ -103,12 +115,17 @@ function highlight(element: HTMLElement): Promise<void> {
     highlightElement.style.zIndex = '100'
     highlightElement.style.display = 'block'
     highlightElement.style.pointerEvents = 'none'
+    highlightElement.style.outline = '2px solid #a7f'
+    highlightElement.style.opacity = '1'
+    highlightElement.style.transition = 'opacity 3s'
     scrollIntoViewIfNeeded(highlightElement, { block: 'center' })
-    highlightElement.className = 'active-selenium-highlight'
+    setTimeout(() => {
+      highlightElement.style.opacity = '0'
+    }, 500)
     setTimeout(() => {
       document.body.removeChild(highlightElement)
       res()
-    }, 500)
+    }, 3500)
   })
 }
 

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

@@ -1,5 +1,6 @@
 import HelpCenter from '@mui/icons-material/HelpCenter'
 import AddToHomeScreenIcon from '@mui/icons-material/AddToHomeScreen'
+import FindInPageIcon from '@mui/icons-material/FindInPage';
 import Autocomplete from '@mui/material/Autocomplete'
 import FormControl from '@mui/material/FormControl'
 import IconButton from '@mui/material/IconButton'
@@ -80,6 +81,13 @@ const CommandLocatorField: FC<CommandArgFieldProps> = ({
       />
       <IconButton
         className="ml-4"
+        onClick={() =>
+          window.sideAPI.recorder.requestHighlightElement(fieldName)
+        }
+      >
+        <FindInPageIcon />
+      </IconButton>
+      <IconButton
         onClick={() =>
           window.sideAPI.recorder.requestSelectElement(true, fieldName)
         }

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

@@ -2,6 +2,7 @@ import { CommandShape } from '@seleniumhq/side-model'
 import { getActiveCommand } from '@seleniumhq/side-api/dist/helpers/getActiveData'
 import { LocatorFields } from '@seleniumhq/side-api'
 import { randomInt, randomUUID } from 'crypto'
+import { Session } from 'main/types'
 import { relative } from 'path'
 import BaseController from '../Base'
 
@@ -51,6 +52,16 @@ export interface RecordNewCommandInput {
 }
 
 export default class RecorderController extends BaseController {
+  constructor(session: Session) {
+    super(session)
+  }
+  async requestHighlightElement(fieldName: LocatorFields) {
+    const activeCommand = getActiveCommand(await this.session.state.get())
+    this.session.api.recorder.onHighlightElement.dispatchEvent(
+      activeCommand[fieldName] as string
+    )
+  }
+
   async recordNewCommand(
     cmd: RecordNewCommandInput
   ): Promise<CommandShape[] | null> {
@@ -108,13 +119,16 @@ export default class RecorderController extends BaseController {
     let inited = false
     if (playbackWindow) {
       const playbackURL = playbackWindow.webContents.getURL()
-      inited = !(playbackURL.startsWith('file://') && playbackURL.endsWith('/playback-window.html'))
+      inited = !(
+        playbackURL.startsWith('file://') &&
+        playbackURL.endsWith('/playback-window.html')
+      )
     } else {
       await this.session.windows.initializePlaybackWindow()
       playbackWindow = await this.session.windows.getLastPlaybackWindow()
       inited = false
-    } 
-    
+    }
+
     if (!inited) {
       // Needs to open a URL, if on an open command, just use that
       // Otherwise add an open command to the record commands

packages/side-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seleniumhq/side-api",
-  "version": "4.0.0-alpha.10",
+  "version": "4.0.0-alpha.11",
   "description": "Selenium IDE shared models",
   "author": "Todd Tarsi <[email protected]>",
   "homepage": "http://github.com/SeleniumHQ/selenium-ide",

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

@@ -1,7 +1,9 @@
 import type { Shape as GetFrameLocation } from './getFrameLocation'
 import type { Shape as OnFrameDeleted } from './onFrameDeleted'
 import type { Shape as OnFrameRecalculate } from './onFrameRecalculate'
+import type { Shape as OnHighlightElement } from './onHighlightElement'
 import type { Shape as OnNewWindow } from './onNewWindow'
+import type { Shape as RequestHighlightElement } from './requestHighlightElement'
 import type { Shape as OnRequestSelectElement } from './onRequestSelectElement'
 import type { Shape as RecordNewCommand } from './recordNewCommand'
 import type { Shape as RequestSelectElement } from './requestSelectElement'
@@ -13,7 +15,9 @@ import type { Shape as Stop } from './stop'
 import * as getFrameLocation from './getFrameLocation'
 import * as onFrameDeleted from './onFrameDeleted'
 import * as onFrameRecalculate from './onFrameRecalculate'
+import * as onHighlightElement from './onHighlightElement'
 import * as onNewWindow from './onNewWindow'
+import * as requestHighlightElement from './requestHighlightElement'
 import * as onRequestSelectElement from './onRequestSelectElement'
 import * as recordNewCommand from './recordNewCommand'
 import * as requestSelectElement from './requestSelectElement'
@@ -26,7 +30,9 @@ export const commands = {
   getFrameLocation,
   onFrameDeleted,
   onFrameRecalculate,
+  onHighlightElement,
   onNewWindow,
+  requestHighlightElement,
   onRequestSelectElement,
   recordNewCommand,
   requestSelectElement,
@@ -44,9 +50,11 @@ export type Shape = {
   getFrameLocation: GetFrameLocation
   onFrameDeleted: OnFrameDeleted
   onFrameRecalculate: OnFrameRecalculate
+  onHighlightElement: OnHighlightElement
   onNewWindow: OnNewWindow
   onRequestSelectElement: OnRequestSelectElement
   recordNewCommand: RecordNewCommand
+  requestHighlightElement: RequestHighlightElement
   requestSelectElement: RequestSelectElement
   selectElement: SelectElement
   setWindowHandle: SetWindowHandle

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

@@ -0,0 +1,8 @@
+import { BaseListener } from '../../types'
+
+/**
+ * Called when the project editor asks the recorder to highlight an element
+ * on the playback page.
+ */
+export type Shape = BaseListener<OnHighlightElementRecorder>
+export type OnHighlightElementRecorder = [string]

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

@@ -0,0 +1,7 @@
+import { LocatorFields } from '../../types'
+
+/**
+ * Asks the playback windows to set the next element clicked as the currently
+ * selected locator field element.
+ */
+export type Shape = (fieldName: LocatorFields) => Promise<void>