SeleniumHQ · toddtarsi · Apr 18, 2024 · Apr 16, 2024 · Apr 16, 2024 · Apr 16, 2024
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -19,7 +19,7 @@ jobs:
       repository-projects: read
       security-events: read
       statuses: read
-    runs-on: macos-11
+    runs-on: ubuntu-latest
     if: github.repository == 'seleniumhq/selenium-ide'
     steps:
       - uses: actions/checkout@v4
@@ -34,5 +34,11 @@ jobs:
         run: pnpm -r i
       - name: Build side-runner and selenium-ide
         run: npm run build
-      - name: Run all tests
-        run: npm run test
+      - name: Install xvfb
+        run: sudo apt-get update -y && sudo apt-get install -y libgtk2.0-0 libgtk-3-0 libgbm-dev libnotify-dev libnss3 libxss1 libasound2 libxtst6 xauth xvfb
+      - name: Run all tests and also use xvfb
+        run: |
+          Xvfb -ac :99 -screen 0 1280x1024x16 > /dev/null 2>&1 &
+          export DISPLAY=:99
+          npm run test:ci
+
diff --git a/package.json b/package.json
@@ -17,13 +17,15 @@
     "pretest": "cd packages/webdriver-testkit && npm run download-drivers",
     "start": "cd packages/selenium-ide && npm start",
     "test:jest:core": "jest",
-    "test": "npm run test:jest && npm run test:side-runner:ci && npm run test:ide",
+    "test": "npm run test:jest && npm run test:side-runner && npm run test:ide",
+    "test:ci": "npm-run-bg -s 'http-server -p 8080 ./packages/side-testkit/fixtures/static::Available on::8080' 'npm run pretest && npm run test:jest:core && npm run test:side-runner:ci'",
     "test:jest": "npm-run-bg -s 'http-server -p 8080 ./packages/side-testkit/fixtures/static::Available on::8080' 'npm run test:jest:core'",
     "lint": "pnpm run 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/",
     "test:ide": "npm-run-bg -s 'http-server -p 8080 ./packages/side-testkit/fixtures/static::Available on::8080' 'node ./packages/selenium-ide/scripts/ide-runner.js'",
+    "test:ide:ci": "node ./packages/selenium-ide/scripts/ide-runner.js",
     "test:side-runner": "npm-run-bg -s 'http-server -p 8080 ./packages/side-testkit/fixtures/static::Available on::8080' 'node ./packages/side-runner/dist/bin.js -t 15000 ./tests/examples/*.side'",
-    "test:side-runner:ci": "npm-run-bg -s 'http-server -p 8080 ./packages/side-testkit/fixtures/static::Available on::8080' 'node ./packages/side-runner/dist/bin.js -c \"goog:chromeOptions.args=[headless,no-sandbox] browserName=chrome\" -t 15000 ./tests/examples/*.side'",
+    "test:side-runner:ci": "node ./packages/side-runner/dist/bin.js -c \"goog:chromeOptions.args=[headless,no-sandbox] browserName=chrome\" -t 15000 ./tests/examples/*.side",
     "typecheck": "tsc --noEmit --composite false",
     "serve": "pnpm run --stream --filter selenium-ide serve",
     "watch": "run-p watch:ts watch:webpack",

diff --git a/packages/selenium-ide/.eslintrc.js b/packages/selenium-ide/.eslintrc.js
@@ -1,4 +1,4 @@
-const pkg = require('./package.json')
+const pkg = import('./package.json')
 
 module.exports = {
   extends: './../../.eslintrc.js',

diff --git a/packages/selenium-ide/package.json b/packages/selenium-ide/package.json
@@ -1,6 +1,6 @@
 {
   "name": "selenium-ide",
-  "version": "4.0.1-beta.6",
+  "version": "4.0.1-beta.7",
   "private": false,
   "description": "Selenium IDE electron app",
   "author": "Todd <tarsitodd@gmail.com>",

diff --git a/packages/selenium-ide/scripts/ide-runner.js b/packages/selenium-ide/scripts/ide-runner.js
@@ -41,14 +41,16 @@ main()
 
 async function main() {
   console.log('Starting webdriver backend')
-  const { proc, success } = await startWebdriverBackend({ driver: 'chrome' })
+  console.log(`Using display [${process.env.DISPLAY || 'none'}] specified`)
+  const { proc, success } = await startWebdriverBackend()
   if (!success) {
     console.error('Failed to start webdriver backend')
     console.error(proc.error)
     throw proc.error
   }
   let driver
   try {
+    console.log('Instantiating IDE as driver process')
     driver = await new webdriver.Builder()
       .usingServer(`http://localhost:${port}`)
       .withCapabilities({
@@ -61,6 +63,8 @@ async function main() {
       })
       .forBrowser('chrome')
       .build()
+    console.log('IDE instantiated successfully!')
+    console.log('Starting new project...')
     const newProject = await driver.wait(
       webdriver.until.elementLocated(webdriver.By.css('[data-new-project]')),
       5000
@@ -72,9 +76,14 @@ async function main() {
       await driver.sleep(100)
       try {
         handles = await driver.getAllWindowHandles()
-      } catch (e) {}
+      } catch (e) {
+        // ignore
+      }
     }
     await driver.switchTo().window(handles[0])
+    console.log(
+      'Project started successfully, IDE is ready to record commands!'
+    )
 
     const projectTab = await driver.wait(
       webdriver.until.elementLocated(webdriver.By.id('tab-2')),
@@ -90,7 +99,7 @@ async function main() {
       await url.sendKeys(webdriver.Key.BACK_SPACE)
     }
     await url.sendKeys('http://localhost:8080')
-  
+
     const testTab = await driver.wait(
       webdriver.until.elementLocated(webdriver.By.id('tab-0')),
       5000
@@ -150,17 +159,17 @@ function startWebdriverBackend() {
       })
       proc.stdout.on('data', (out) => {
         const outStr = `${out}`
-        // WebdriverDebugLog(outStr)
+        WebdriverDebugLog(outStr)
         const fullyStarted = outStr.includes(successMessage)
         if (fullyStarted) {
           initialized = true
-          WebdriverDebugLog('Driver has initialized!')
+          WebdriverDebugLog('Webdriver backend is ready!')
           resolve({ success: true, proc: proc })
         }
       })
       proc.stderr.on('data', (err) => {
         const errStr = `${err}`
-        // WebdriverDebugLog(errStr)
+        WebdriverDebugLog(errStr)
         if (!initialized) {
           resolve({ success: false, error: errStr })
         }

diff --git a/packages/selenium-ide/src/browser/components/AppBar/AppBarTabs.tsx b/packages/selenium-ide/src/browser/components/AppBar/AppBarTabs.tsx
@@ -1,9 +1,10 @@
 import Tabs from '@mui/material/Tabs'
 import Tab from '@mui/material/Tab'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { PROJECT_TAB, SUITES_TAB, TESTS_TAB } from '../../enums/tab'
 import { SIDEMainProps } from '../types'
 
+/**********顶部菜单栏tab*************/
 function a11yProps(index: number) {
   return {
     'aria-controls': `tabpanel-${index}`,
@@ -14,19 +15,31 @@ function a11yProps(index: number) {
 const AppBarTabs: React.FC<Pick<SIDEMainProps, 'setTab' | 'tab'>> = ({
   setTab,
   tab,
-}) => (
-  <Tabs
-    aria-label="Selenium IDE workflows"
-    className="not-draggable"
-    indicatorColor="secondary"
-    onChange={(_e, v) => setTab(v)}
-    textColor="inherit"
-    value={tab}
-  >
-    <Tab label="Tests" {...a11yProps(TESTS_TAB)} />
-    <Tab label="Suites" {...a11yProps(SUITES_TAB)} />
-    <Tab label="Config" {...a11yProps(PROJECT_TAB)} />
-  </Tabs>
-)
+}) => {
+  const [languageMap, setLanguageMap] = useState<any>({
+    mainMenu: { tests: 'Tests', suites: 'Suites', config: 'Config' },
+  })
+
+  useEffect(() => {
+    window.sideAPI.system.getLanguageMap().then((result) => {
+      setLanguageMap(result)
+    })
+  }, [])
+
+  return (
+    <Tabs
+      aria-label="Selenium IDE workflows"
+      className="not-draggable"
+      indicatorColor="secondary"
+      onChange={(_e, v) => setTab(v)}
+      textColor="inherit"
+      value={tab}
+    >
+      <Tab label={languageMap.mainMenu.tests} {...a11yProps(TESTS_TAB)} />
+      <Tab label={languageMap.mainMenu.suites} {...a11yProps(SUITES_TAB)} />
+      <Tab label={languageMap.mainMenu.config} {...a11yProps(PROJECT_TAB)} />
+    </Tabs>
+  )
+}
 
 export default AppBarTabs
diff --git a/packages/selenium-ide/src/browser/components/Controls/PauseButton.tsx b/packages/selenium-ide/src/browser/components/Controls/PauseButton.tsx
@@ -1,19 +1,32 @@
 import PauseIcon from '@mui/icons-material/Pause'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import baseControlProps from './BaseProps'
 
-const PauseButton: FC = () => (
-  <Tooltip title="Pause" aria-label="pause">
-    <IconButton
-      {...baseControlProps}
-      data-pause
-      onClick={() => window.sideAPI.playback.pause()}
-    >
-      <PauseIcon />
-    </IconButton>
-  </Tooltip>
-)
+const PauseButton: FC = () => {
+  const [languageMap, setLanguageMap] = useState<any>({
+    testCore: {
+      pause: 'Pause',
+    },
+  })
+
+  useEffect(() => {
+    window.sideAPI.system.getLanguageMap().then((result) => {
+      setLanguageMap(result)
+    })
+  }, [])
+  return (
+    <Tooltip title={languageMap.testCore.pause} aria-label="pause">
+      <IconButton
+        {...baseControlProps}
+        data-pause
+        onClick={() => window.sideAPI.playback.pause()}
+      >
+        <PauseIcon />
+      </IconButton>
+    </Tooltip>
+  )
+}
 
 export default PauseButton
diff --git a/packages/selenium-ide/src/browser/components/Controls/PlayButton.tsx b/packages/selenium-ide/src/browser/components/Controls/PlayButton.tsx
@@ -1,7 +1,7 @@
 import PlayArrowIcon from '@mui/icons-material/PlayArrow'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC, useContext } from 'react'
+import React, { FC, useContext, useEffect, useState } from 'react'
 import { badIndex } from '@seleniumhq/side-api/dist/constants/badIndex'
 import baseControlProps from './BaseProps'
 import { context as playbackCurrentIndexContext } from 'browser/contexts/playback-current-index'
@@ -10,8 +10,19 @@ import { context as activeTestContext } from 'browser/contexts/active-test'
 const PlayButton: FC = () => {
   const { activeTestID } = useContext(activeTestContext)
   const currentIndex = useContext(playbackCurrentIndexContext)
+  const [languageMap, setLanguageMap] = useState<any>({
+    testCore: {
+      play: 'Play',
+    },
+  })
+
+  useEffect(() => {
+    window.sideAPI.system.getLanguageMap().then((result) => {
+      setLanguageMap(result)
+    })
+  }, [])
   return (
-    <Tooltip title="Play" aria-label="play">
+    <Tooltip title={languageMap.testCore.play} aria-label="play">
       <IconButton
         {...baseControlProps}
         data-play

diff --git a/packages/selenium-ide/src/browser/components/Controls/PlayListButton.tsx b/packages/selenium-ide/src/browser/components/Controls/PlayListButton.tsx
@@ -1,19 +1,32 @@
 import PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import baseControlProps from './BaseProps'
 
-const PlayListButton: FC = () => (
-  <Tooltip title="Play Suite" aria-label="play-suite">
-    <IconButton
-      {...baseControlProps}
-      data-play-suite
-      onClick={() => window.sideAPI.playback.playSuite()}
-    >
-      <PlaylistPlayIcon />
-    </IconButton>
-  </Tooltip>
-)
+const PlayListButton: FC = () => {
+  const [languageMap, setLanguageMap] = useState<any>({
+    suitesTab: {
+      playSuite: 'Play Suite',
+    },
+  })
+
+  useEffect(() => {
+    window.sideAPI.system.getLanguageMap().then((result) => {
+      setLanguageMap(result)
+    })
+  }, [])
+  return (
+    <Tooltip title={languageMap.suitesTab.playSuite} aria-label="play-suite">
+      <IconButton
+        {...baseControlProps}
+        data-play-suite
+        onClick={() => window.sideAPI.playback.playSuite()}
+      >
+        <PlaylistPlayIcon />
+      </IconButton>
+    </Tooltip>
+  )
+}
 
 export default PlayListButton
diff --git a/packages/selenium-ide/src/browser/components/Controls/RecordButton.tsx b/packages/selenium-ide/src/browser/components/Controls/RecordButton.tsx
@@ -1,19 +1,32 @@
 import RecordIcon from '@mui/icons-material/FiberManualRecord'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import baseControlProps from './BaseProps'
 
-const RecordButton: FC = () => (
-  <Tooltip title="Record" aria-label="record">
-    <IconButton
-      {...baseControlProps}
-      data-record
-      onClick={() => window.sideAPI.recorder.start()}
-    >
-      <RecordIcon color="error" />
-    </IconButton>
-  </Tooltip>
-)
+const RecordButton: FC = () => {
+  const [languageMap, setLanguageMap] = useState<any>({
+    testCore: {
+      record: 'Record',
+    },
+  })
+
+  useEffect(() => {
+    window.sideAPI.system.getLanguageMap().then((result) => {
+      setLanguageMap(result)
+    })
+  }, [])
+  return (
+    <Tooltip title={languageMap.testCore.record} aria-label="record">
+      <IconButton
+        {...baseControlProps}
+        data-record
+        onClick={() => window.sideAPI.recorder.start()}
+      >
+        <RecordIcon color="error" />
+      </IconButton>
+    </Tooltip>
+  )
+}
 
 export default RecordButton
diff --git a/packages/selenium-ide/src/browser/components/Controls/StopButton.tsx b/packages/selenium-ide/src/browser/components/Controls/StopButton.tsx
@@ -1,18 +1,32 @@
 import StopIcon from '@mui/icons-material/Stop'
 import IconButton from '@mui/material/IconButton'
 import Tooltip from '@mui/material/Tooltip'
-import React, { FC } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 import baseControlProps from './BaseProps'
 
-const StopButton: FC = () => (
-  <Tooltip title="Stop" aria-label="stop">
-    <IconButton
-      {...baseControlProps}
-      onClick={() => window.sideAPI.playback.stop()}
-    >
-      <StopIcon />
-    </IconButton>
-  </Tooltip>
-)
+const StopButton: FC = () => {
+  const [languageMap, setLanguageMap] = useState<any>({
+    testCore: {
+      stop: 'Stop',
+    },
+  })
+
+  useEffect(() => {
+    window.sideAPI.system.getLanguageMap().then((result) => {
+      setLanguageMap(result)
+    })
+  }, [])
+
+  return (
+    <Tooltip title={languageMap.testCore.stop} aria-label="stop">
+      <IconButton
+        {...baseControlProps}
+        onClick={() => window.sideAPI.playback.stop()}
+      >
+        <StopIcon />
+      </IconButton>
+    </Tooltip>
+  )
+}
 
 export default StopButton