selenium-ide擁有代碼轉(zhuǎn)換功能，可以將錄制的腳本轉(zhuǎn)換為各個(gè)語言的selenium版本。

image.png

對應(yīng)的界面實(shí)現(xiàn)在packages\selenium-ide\src\neo\components\Dialogs\Export\index.jsx
界面使用react編寫，支持導(dǎo)出的腳本類型數(shù)組，是由browser.storage 并非寫死的。
當(dāng)選擇完畢后會(huì)通過selectExportLanguage 設(shè)置當(dāng)前選擇的語言。

selectExportLanguage(language) {
    this.selectedExportLanguage = language
    storage.set({
      selectedExportLanguage: language,
    })
  }

數(shù)據(jù)通過uiStorage進(jìn)行共享，因此他可以設(shè)置之前選則的導(dǎo)出類型為默認(rèn)類型。
選擇完成后導(dǎo)出時(shí)會(huì)調(diào)用this.props.completeSelection方法傳遞數(shù)據(jù)。

image.png

然后根據(jù)調(diào)用位置，可以看到具體實(shí)現(xiàn)函數(shù)exportCodeToFile
其中可以看到函數(shù)實(shí)現(xiàn)是將字符串 寫入 emittedCode中來實(shí)現(xiàn)導(dǎo)出文件

image.png

emittedCode 在這里有兩種轉(zhuǎn)換方式

image.png

首先看一下PluginManager的實(shí)現(xiàn)方式
其中核心邏輯為sendMessage

具體實(shí)現(xiàn)形式為

  browser.runtime.sendMessage(id,JSON.parse(JSON.stringify(payload)))

第二個(gè)參數(shù)即為原始腳本?？梢钥吹竭M(jìn)行了json操作，說明它應(yīng)該是按照Json Wire Protocol 進(jìn)行的組裝。

這里的id為插件的id。

最后我們記錄發(fā)送人也就是這個(gè)插件id和插件返回來轉(zhuǎn)換完成的代碼。

可以看到插件注冊邏輯

插件注冊.png

可以簡單的看到注冊調(diào)用的方式為

image.png

根據(jù)找的的文檔描述，我們可以得住調(diào)用注冊的形式

image.png

這里不太方便查看。

接下來再看第二種方式exporter

import exporter from '@seleniumhq/code-export'

可以看到引用自code-export

下面是code-export的具體實(shí)現(xiàn)

code-export.png

在這里可以看到實(shí)際上導(dǎo)出成不同的語言依靠不同的插件來完成，這是很大的工作量。
因此后續(xù)的工作轉(zhuǎn)移到具體的插件上，以python語言為例

python-pytest.png

項(xiàng)目整體目錄結(jié)構(gòu)是這樣的。

Command.js : 對應(yīng)基礎(chǔ)命令解析，這里存儲(chǔ)了大量的命令進(jìn)行轉(zhuǎn)換，例如assert,click，mouseDown等。
hook.js : 這里對應(yīng)的則是一下hook事件，貫穿命令執(zhí)行的生命周期。
index.js : 入口文件.這里核心邏輯下面再說。
location.js : 存儲(chǔ)的是定位特征，比如根據(jù)那些定位元素之類的id，name，xpah 。
selection.js : 和上面類似，不過這里是存儲(chǔ)css selector定位的。

核心內(nèi)容都在index.js文件當(dāng)中，如下圖。

index.js.png

在這里還能看到兩個(gè)比較熟悉的函數(shù)

export async function emitTest({})
export async function emitSuite({})

這就是我們上面看到的轉(zhuǎn)換時(shí)調(diào)用的。
以 emitSuite 為例子 詳細(xì)代碼如下。

export async function emitSuite({
  baseUrl,
  suite,
  tests,
  project,
  enableOriginTracing,
  beforeEachOptions,
  enableDescriptionAsComment,
}) {
  global.baseUrl = baseUrl
  const result = await exporter.emit.testsFromSuite(tests, suite, opts, {
    enableOriginTracing,
    enableDescriptionAsComment,
    generateTestDeclaration,
    project,
  })
  const suiteDeclaration = generateSuiteDeclaration(suite.name)
  const _suite = await exporter.emit.suite(result, tests, {
    ...opts,
    suiteDeclaration,
    suite,
    project,
    beforeEachOptions,
  })
  return {
    filename: generateFilename(suite.name),
    body: exporter.emit.orderedSuite(_suite),
  }
}

看到這里應(yīng)該就是解析發(fā)送過來的json數(shù)據(jù)，返回的body內(nèi)容則是對應(yīng)轉(zhuǎn)換完成的腳本。
轉(zhuǎn)換的所有核心邏輯均是通過 exporter 來完成的

從之前的圖片可以看到 這里的exporter 來自于 @seleniumhq/side-utils 這個(gè)項(xiàng)目

side-utils.png

通過這個(gè)簡介可以看到，它是作為代碼轉(zhuǎn)換套件來使用的，所有selenium的腳本轉(zhuǎn)換都由他來完成中間解釋

到這里我們可以了解到。

如果需要讓我們的自動(dòng)化代碼，提供多語言轉(zhuǎn)換，我們可以選擇直接使用import exporter from '@seleniumhq/code-export' 模塊來同時(shí)翻譯為多種語言腳本。

那么轉(zhuǎn)換前的原始數(shù)據(jù)是什么樣的?
怎么自動(dòng)生成原生數(shù)據(jù)然后通過插件轉(zhuǎn)換?
原始數(shù)據(jù)生成有哪些規(guī)則限制?
后續(xù)內(nèi)容隨緣更新~