【UI 自動化測試平臺解決方案】使用 Selenium IDE 錄製 UI 自動化測試腳本UI 自動化錄製：Selenium IDESeleniumSelenium IDE

UI 自動化錄製：Selenium IDE

通過 Selenium IDE 錄製並重播功能，可以快速創建UI 自動化測試用例。

可以直接在界面中點擊執行。

也支持在命令行運行測試腳本：

$ selenium-side-runner test_baidu_search_kotlin.side
info:    Running test_baidu_search_kotlin.side
 PASS  ./Default Suite.test.js (13.358s)
  Default Suite
    ✓ test_baidu_search_kotlin (6455ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        14.32s
Ran all test suites.

其中，自動生成的 UI 自動化腳本遵守 side 協議，源代碼如下：

{
  "id": "bf38521a-185f-4fac-96d9-9849bcfed67a",
  "version": "1.1",
  "name": "test_baidu_search_kotlin",
  "url": "https://www.baidu.com",
  "tests": [{
    "id": "13348789-5cc7-4efc-b4d7-447d363d4e27",
    "name": "test_baidu_search_kotlin",
    "commands": [{
      "id": "190f2b69-93e0-44c8-a146-dd07fccd81d6",
      "comment": "",
      "command": "open",
      "target": "/",
      "targets": [],
      "value": ""
    }, {
      "id": "c58579d7-1ac0-41c5-b0a1-a2220a4b7e21",
      "comment": "",
      "command": "setWindowSize",
      "target": "1024x768",
      "targets": [],
      "value": ""
    }, {
      "id": "a5c4f658-67c2-450f-8748-efaf395eb9d7",
      "comment": "",
      "command": "click",
      "target": "id=kw",
      "targets": [
        ["id=kw", "id"],
        ["name=wd", "name"],
        ["css=#kw", "css"],
        ["css=#kw", "css:finder"],
        ["xpath=//input[@id='kw']", "xpath:attributes"],
        ["xpath=//form[@id='form']/span/input", "xpath:idRelative"],
        ["xpath=//span/input", "xpath:position"]
      ],
      "value": ""
    }, {
      "id": "94db205c-4c00-4294-84a6-867023cff7aa",
      "comment": "",
      "command": "type",
      "target": "id=kw",
      "targets": [
        ["id=kw", "id"],
        ["name=wd", "name"],
        ["css=#kw", "css"],
        ["css=#kw", "css:finder"],
        ["xpath=//input[@id='kw']", "xpath:attributes"],
        ["xpath=//form[@id='form']/span/input", "xpath:idRelative"],
        ["xpath=//span/input", "xpath:position"]
      ],
      "value": "Kotlin"
    }, {
      "id": "45d01b04-83d5-4061-b45b-5c5ce8cd4862",
      "comment": "",
      "command": "click",
      "target": "id=su",
      "targets": [
        ["id=su", "id"],
        ["css=#su", "css"],
        ["css=#su", "css:finder"],
        ["xpath=//input[@id='su']", "xpath:attributes"],
        ["xpath=//form[@id='form']/span[2]/input", "xpath:idRelative"],
        ["xpath=//span[2]/input", "xpath:position"]
      ],
      "value": ""
    }, {
      "id": "0f9404b8-9e41-4eaf-b745-ac17852c4611",
      "comment": "",
      "command": "click",
      "target": "linkText=下一頁>",
      "targets": [
        ["linkText=下一頁>", "linkText"],
        ["css=a.n", "css"],
        ["css=.n", "css:finder"],
        ["xpath=//a[contains(text(),'下一頁>')]", "xpath:link"],
        ["xpath=//div[@id='page']/a[10]", "xpath:idRelative"],
        ["xpath=//a[contains(@href, '/s?wd=Kotlin&pn=10&oq=Kotlin&ie=utf-8&rsv_idx=1&rsv_pq=ab7b6533000175b9&rsv_t=85f9vvadTbnvhSCdmyXQNALtVLIk%2BOip77jUSRjWINpQKTIevhgZfC9ULFE&rsv_page=1')]", "xpath:href"],
        ["xpath=//a[10]", "xpath:position"]
      ],
      "value": ""
    }, {
      "id": "5f93e1a6-7e91-461d-87a0-d818e57cdd16",
      "comment": "",
      "command": "assertElementPresent",
      "target": "linkText=下一頁>",
      "targets": [
        ["linkText=下一頁>", "linkText"],
        ["css=.n:nth-child(12)", "css:finder"],
        ["xpath=//a[contains(text(),'下一頁>')]", "xpath:link"],
        ["xpath=//div[@id='page']/a[11]", "xpath:idRelative"],
        ["xpath=//a[contains(@href, '/s?wd=Kotlin&pn=20&oq=Kotlin&ie=utf-8&rsv_idx=1&rsv_pq=df4436e3000184b2&rsv_t=a2a4%2FwXMhAsPfnG0ZW%2BSpmFy%2BDEpskgOeSt87c9ZSmJToNpylnzqEGt2S%2F0&rsv_page=1')]", "xpath:href"],
        ["xpath=//a[11]", "xpath:position"]
      ],
      "value": ""
    }]
  }],
  "suites": [{
    "id": "9b20a57d-2c21-43d4-9225-d05c60d5efbd",
    "name": "Default Suite",
    "persistSession": false,
    "parallel": false,
    "timeout": 300,
    "tests": ["13348789-5cc7-4efc-b4d7-447d363d4e27"]
  }],
  "urls": ["https://www.baidu.com/"],
  "plugins": []
}

我們可以很輕易從上面的 side 協議中解析、自動化生成出對應的Selenium Java、Node、Python、Ruby、C#、 PHP 等自動化測試工程。

Selenium IDE history

Jason-Huggins

Selenium was originally developed by Jason Huggins in 2004 as an internal tool at ThoughtWorks. Huggins was later joined by other programmers and testers at ThoughtWorks, before Paul Hammant joined the team and steered the development of the second mode of operation that would later become “Selenium Remote Control” (RC). The tool was open sourced that year.

In 2005 Dan Fabulich and Nelson Sproul (with help from Pat Lightbody) made an offer to accept a series of patches that would transform Selenium-RC into what it became best known for. In the same meeting, the steering of Selenium as a project would continue as a committee, with Huggins and Hammant being the ThoughtWorks representatives.

In 2006, Selenium IDE was donated to Selenium Project by Shinya Kasatani of Japan. He created Selenium as a Firefox extension that can automate the browser through a record-and-playback feature. He came up with this idea to further increase the speed in creating test cases.

In 2007, Huggins joined Google. Together with others like Jennifer Bevan, he continued with the development and stabilization of Selenium RC. At the same time, Simon Stewart at ThoughtWorks developed a superior browser automation tool called WebDriver. In 2009, after a meeting between the developers at the Google Test Automation Conference, it was decided to merge the two projects and call the new project Selenium WebDriver, or Selenium 2.0.

philippe-hanrigou

In 2008, Philippe Hanrigou (then at ThoughtWorks) made “Selenium Grid”, which provides a hub allowing the running of multiple Selenium tests concurrently on any number of local or remote systems, thus minimizing test execution time. Grid offered, as open source, a similar capability to the internal/private Google cloud for Selenium RC. Pat Lightbody had already made a private cloud for “HostedQA” which he went on to sell to Gomez, Inc.

2. What is Selenium IDE? Why is Selenium IDE so successful?

Selenium IDE is a portable software-testing tool for web applications. It is open-source Firefox add-on, web developers and testers can download and use it without charge.

Originally, Selenium IDE was supposed to be a rapid prototyping tool, which did not provide iteration or conditional statements for test scripts. But it can offer different extension points for users to enhance, via its own plugin system. Thanks to various plugins were introduced over the time, Selenium IDE now becomes a comprehensive functional automated testing tool.

Not only supporting record & playback function, Selenium IDE also offers other features: scripting, debugging, reporting, etc. With the full set of most common functions, Selenium IDE is a complete tool for testers to save their time working on the testing project.

---

Selenium

https://github.com/SeleniumHQ/selenium

Selenium 可能是網頁應用中最流行的開源自動化測試框架。在2千年的時候就出現了，至今有十多年的發展歷史，Selenium 成爲許多 Web 自動化測試人員的選擇，尤其是那些有高級編程和腳本技能的人。

Selenium 支持多系統環境(Windows，Mac，Linux)以及多種瀏覽器(Chrome，FireFox，IE 以及無頭瀏覽器(沒有界面))。它的腳本可以由各種各樣的編程語言編寫，比如 Java，Groovy，Python，C#，PHP，Ruby 以及 Perl。

因爲 Selenium 的靈活性，測試人員可以寫各種複雜的、高級的測試腳本來應對各種複雜的問題，它需要高級的編程技能和付出來構建滿足自己需求的自動化測試框架和庫。

Selenium 2.0的主要新特性是WebDriver API的集成。WebDriver旨在提供一個更簡單、更簡潔的編程接口，以解決Selenium-RC API的一些限制。Selenium-WebDriver是爲了更好地支持動態web頁面而開發的，頁面的元素在沒有頁面本身被重新加載的情況下可能會發生變化。WebDriver的目標是提供一個設計良好的面向對象的API，爲現代高級web應用程序測試問題提供改進的支持。

Selenium RC（Selenium 3.0版本移除了該模塊，以後還是使用 WebDriver 進行腳本的編寫） 由Clent Libraies 和 Selenium Server組成：

Selenium Libraies 用於編寫測試腳本，支持多種不同的主流開發語言，用來控制Selenium Server.

Selenium Server 則負責控制瀏覽器的行爲，而Selenium Server 又由三部分組成：

Selenium Core：被Selenium Server 嵌入到瀏覽器頁面中，是一堆的JavaScript 函數的集合，通過這些JavaScript函數來實現對瀏覽器的操作。

Launcher：用於啓動瀏覽器，把Selenium Core加載到瀏覽器頁面當中，並把瀏覽器的代理設置Selenium Server 的Http Proxy。

Http Proxy：Selenium Server的http代理。 鏈接：https://www.jianshu.com/p/81ce4bf0d0c0

image.png

Selenium 4.0即將在今年聖誕節發佈，在不久之前的Selenium官方交流會上，Simon Stewart(Selenium主創成員之一)公佈了一些Selenium 4.0主要的新變化。那麼跟着曹老師一起來看一下，即將來到的Selenium 4.0會有哪些不一樣的地方。

一、W3C WebDriver 標準化

Selenium 4 WebDriver將完全成爲W3C標準。在Selenium以外WebDriver API也慢慢起到了重大作用，被用於更多的自動化工具中。例如，通過一些工具比如Appium和iOS Driver大量地在運用在移動端測試中。W3C標準將支持兼容通過不同的軟件實現WebDriver API。

讓我們看一個例子，到現在爲止的Selenium Grid是如何與Driver Executables相連接的。

採用新的協議

image.png

在一個Selenium 3.x的測試中，終端(通過JSON報文協議)與瀏覽器在端節點連接。這要求API進行編碼與譯碼。而在Selenium 4中，測試將直接連接，不需要任何編譯或譯碼API的請求(通過W3C協議)，通過Java綁定將實現向前兼容，但是重點關注與於W3C協議。JSON報文協議將不再被使用。

二、Selenium 4 IDE TNG

image.png

Chrome將支持Selenium IDE。衆所周知，Selenium IDE是一個錄製與回訪工具。它將會有更豐富更高級的功能，例如：

• 新的插件系統 – 任何瀏覽器供應商將可以輕鬆的添加新的Selenium IDE插件。你可以用你自己的定位策略添加Selenium IDE插件。
• 新的命令行啓動器 – 它將完全基於node.js，不再是老的基於HTML的啓動器。它將有以下功能：

WebDriver 回放 – 新的Selenium IDE啓動器將完全基於WebDriver。 並行執行 – 新的命令行啓動器將支持併發測試用例執行，並且將提供一些有用信息例如測試花費時間，通過/失敗測試用例數量等。

三、改良的Selenium Grid

用過Seleinum Grid工作的都知道，它的啓動與配置都非常困難。Selenium Grid支持測試用例在不同的瀏覽器、操作系統、主機執行，提供併發執行功能。

Selenium Grid有兩個主要的元素：Hub和Node Hub扮演一個服務器的角色，在網絡上以一箇中心點控制所有的測試主機。在Selenium Grid中只有一個Hub，它用來分配測試執行給每一個具體有自己配對功能的Node。

Node 是一臺實際執行測試用例的測試主機。

image.png

典型的處理Selenium Grid設置啓動時，通常會使測試員在node連接到hub是面對一些困難。

在Selenium 4中，Grid的體驗將變得簡單而順暢。它將不再需要單獨的啓動hub與node。我們只要啓動了Selenium服務，Grid就會同時扮演Hub和Node的角色。 就在移除了所有安全線程的bug，以及更好的支持Docker這方面而言，Selenium 4將會採用一個更穩定的Selenium Grid。

四、更好的Selenium Grid 用戶界面

Selenium 4的Grid將有一個更友好的用戶界面，包括一些相關的信息，如sessions、running、capacity、etc等

五、更好的可視化

最近可視化、日誌記錄和調試將不再侷限於開發運維。作爲版本發佈的一部分，爲了提供給自動化工程師一個更好的調試把控，這個版本改善了需求的跟蹤已經日誌的記錄功能。

六、更新的文檔

文檔在任何成功的項目中都起到了關鍵作用。Selenium的文檔自從2.0開始就沒有更新過了。在最後一次更新中，Selenium的文檔同樣將被更新和詳細化。

七、Nutshell中的Selenium 4

更新到最新版本的Selenium不需要改變任何的編碼。啓動Nodes和Hubs將變得順暢，並且整個Grid的體驗將變得更效率。對於自動化工程師來說，最新版本將不會有挑戰，並且現有的自動化框架在極小的變化後任然可以正常工作。

Selenium IDE

https://github.com/SeleniumHQ/selenium-ide

[WIP] An integrated development environment for Selenium scripts

Introduction

This project is a work in progress, a complete rewrite of the old Selenium IDE. The older IDE was a Firefox extension that relied heavily on APIs that are no longer supported by newer versions of Firefox. In this project, the IDE is developed as a modern browser extension, supporting both Chrome and Firefox and other modern browsers (in theory).

As this is an early stage and many things aren't clear, it's quite challenging to collaborate and coordinate the efforts - so please be patient.

We are using SideeX as a start point. The SideeX team was kind enough to let us use their work.

Installation

Pre-packaged

• Chrome extension
• Firefox extension

Prerequisites

• git has to be in $PATH for the installation to pass
• yarn npm might work as well (untested)
• peru

Building

peru requires a POSIX machine to work, for the time being you can only properly build the extension on macOS and Linux.

• Install the dependencies peru sync yarn or if using Node 10 yarn --ignore-engines
• Build the extension yarn build and then yarn build:webdriver and then yarn build:ext:prod or yarn build:ext for faster development build (also includes beta features)
• Install as developer on Google Chrome or Firefox

Manifest located in <Project Directory>/packages/selenium-ide/build/manifest.json

What now?

Here's a draft of the general tasks ahead. Feel free to pitch in and announce which you wish to take upon yourself:

• Extension UI - SeIDE users should feel right at home
• Selectors accuracy - an option is ranking selectors - we can optimize selectors correctness and test stability by collecting as many attributes as we can per user event. The most likely properties will be used for the selectors, with fallback to the others.
• Intelligent editing
• Export to selenium code in different languages
• Playback in a way that's consistent with web drivers
• Open for extensions

Questions or want to chat?

If you have questions, check out our FAQ.

You can also find us on on the #selenium IRC channel, which is also available on Slack.

Selenium SIDE Runner

Runs exported Selenium IDE tests in command line

Installation

Node.js is required to use selenium-side-runner. The project guarantees support for the active LTS major version (e.g. 8 & 10).

yarn global add selenium-side-runner or npm install -g selenium-side-runner

Usage

selenium-side-runner project.side project2.side *.side

Passing capabilities

selenium-side-runner -c "browserName=chrome platform=MAC"

Passing nested capabilities

selenium-side-runner -c "chromeOptions.binary='/Applications/Google Chrome.app/Contents/MacOS/Google Chrome'"

Chrome specific list capabilities

selenium-side-runner -c "chromeOptions.args=[disable-infobars]"

Running on remote WebDriver server

selenium-side-runner --server http://localhost:4444/wd/hub

Filter tests

Will only run tests matching the filter selenium-side-runner --filter mytest

Changing the base URL

Change the base URL that the tests were recorded with, note that it will not affect tests that used absolute URLs. selenium-side-runner --base-url https://www.seleniumhq.org

.side.yml

All of the configuration can be written in the .side.yml file, the runner will load it from the current working directory automatically. You can disable that behavior with --no-sideyml.

Example usage

capabilities:
  browserName: "firefox"
baseUrl: "https://www.seleniumhq.org"
server: "http://localhost:4444/wd/hub"

Advanced features

Running on multiple workers

Running tests faster through the use of multiple workers selenium-side-runner -w 4 The runner will automatically set the number of workers to the amount of cores available, for most cases this is the best result. Note: unless you specified that a suite is parallel, it will still run the contained tests sequentially, though the runner will run suites in parallel by default. To mark a suite's tests as parallel, set that in the suite's settings in the IDE.

FAQ

I'm getting an error similar to Unknown locator ${vars.something}

When running your projects make sure that the command is aware of the locator strategy before variables are evaluated. For example click | id=${myButton} vs click | ${idOfMyButton}. Always use the first one, since the strategy is hardcoded in the command, the second would yield an error.

But it works in the IDE.

That is because the IDE calculates locator strategies differently than the runner, it is a known current issue.

https://github.com/SeleniumHQ/selenium-ide/tree/master/packages/selenium-side-runner

Selenium Grid 是什麼？

Selenium Grid 是一個可以方便的讓你腳本運行在不同的平臺以及不同的瀏覽器上的一個框架。Selenium Grid 分1和2兩個版本，其中Selenium Grid 2的發佈還晚於Selenium 2.0，也就是說Selenium Grid 2 並不是和Selenium 2.0 一起發佈的，但是Selenium Grid 2基本上支持Selenium 2.0的所有功能。

image.png

如上圖，Selenium Grid 由一個Hub節點和若干個Node節點組成。 其中Hub節點主要用於管理各個Node節點的註冊及其狀態，並接收Selenium Scripts腳本,然後轉發給各個Node節點去執行，所以Hub本身節點是不執行腳本的，Hub是做腳本分發，真正執行腳本都是放於Node節點上。既然Hub 會分發腳本，那麼免去了一個一個Node機器上去拷貝你腳本的麻煩啦。

鏈接：https://www.jianshu.com/p/017adc59ca1b

katalon studio

Katalon Studio 是一個在網頁應用、移動和網頁服務方面功能強大的自動化測試解決方案。基於 Selenium 和 Appium 框架，Katalon Studio 集成了這些框架在軟件自動化方面的優點。

這個工具支持不同層次的測試技能集。非程序員也可以快速上手一個自動化測試項目(如使用間諜對象記錄測試腳本)，同時也節省了程序員和高級測試人員構建新庫和維護腳本的時間。

Katalon Studio 可以集成到 CI/CD 過程中，而且兼容流行的質量處理工具，包括 qTest，JIRA，Jenkins 和 Git。它提供了一個很好的功能叫Katalon 分析，通過指標和圖表向用戶提供全面的測試報告。

https://github.com/katalon-studio

https://docs.katalon.com/katalon-studio/docs/index.html

https://docs.katalon.com/katalon-recorder/docs/overview.html

Robot framework

Robot Framework 是一個開源的自動化測試框架，它實現了關鍵字測試驅動來實現測試驅動開發(ATDD)。Robot Framework 爲不同的自動化測試需求提供了不同的框架。它的測試能力可以通過 Python 和 Java 測試庫得到擴展。Selenium WebDriver 是 Robot Framework 中內置的流行庫。

Robot Framework 不僅僅是網頁測試工具，同樣可以用來做 Android 和 iOS 的自動化測試。對於關鍵字測試驅動熟悉的測試員可以輕鬆上手 Robot Framework。