---
title: Cross-Browser Testing (Manual Setup)
tags: Rapi Document Chinese
---

# 跨瀏覽器測試(手動設定WebDriver)
您可將Recorder錄製出的測試案例於多種瀏覽器上運行，包含桌面瀏覽器Chrome、Firefox、Edge、Safari，與Android上之瀏覽器。本文將介紹如何在同一台電腦上達成跨瀏覽器測試。
## 桌面瀏覽器
1. 安裝[Java SE](https://www.oracle.com/technetwork/java/javase/downloads/index.html)
2. 建立一個目錄，例如`selenium_server`
3. 下載[Selenium Server](https://www.selenium.dev/downloads/) (建議版本：4.8.0)
4. 將`selenium-server-{version}.jar`存放至`selenium_server`目錄
5. 下載瀏覽器Web Driver並存放至`selenium_server`目錄
>#### 下列為目前Rapi支援的瀏覽器
>- [Chrome](#Chrome)
>- [Firefox](#Firefox)
>- [Edge](#Edge)
>- [Safari](#Safari)
#### Chrome
1. 下載[chromeDriver](http://chromedriver.chromium.org/downloads)，請選擇符合電腦上瀏覽器版本
2. 解壓縮後存放至`selenium_server`目錄
#### Firefox
1. 下載[geckodriver](https://github.com/mozilla/geckodriver/releases)，請選擇符合電腦上作業系統版本
2. 解壓縮後存放至`selenium_server`目錄
#### Edge
1. 下載[msedgedriver](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/#downloads)，請選擇符合電腦上瀏覽器版本
2. 解壓縮後存放至`selenium_server`目錄
<!--
#### Edge Legacy
> 已測版本：EdgeHTML 17.17134 on Windows
1. 下載[msedgedriver](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/#downloads)，請選擇符合電腦上瀏覽器版本
:::warning
Webdriver for Edge version 18版本以上 [尚未被支援](https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/#downloads)
:::
2. 解壓縮後存放至`selenium_server`目錄 -->
#### Safari
1. 開啟命令列並執行`safaridriver --enable`，輸入您的使用者密碼
2. 開啟Safari，點選**Safari** > **Preferences** > **Advanced**以啟用**Develop**選單，勾選**Show Develop Menu**
3. 點選**Develop**選單->**Allow Remote Automation**以啟用**Remote Automation**，.
6. 開啟Recorder並點選右上方設定按鈕
7. 啟用 **Playback through WebDriver**
8. 在**WebDriver Settings**中之**Server URL**欄位填入`localhost`，在**Port**欄位填入`4444`
9. 在**browerName**欄位填入`chrome`、`firefox`、`MicrosoftEdge`或`safari`，並在其他欄位留白
10. 開啟命令列並將路徑變更為`selenium_server`目錄，執行`java -jar selenium-server-{version}.jar standalone`
11. 如果您使用的是 MAC 作業系統，請在selenium_server目錄下於命令列輸入以下指令來授予瀏覽器WebDriver權限：
- 針對Chrome瀏覽器，請執行`spctl --add --label 'Approved' chromedriver`
- 針對Firefox瀏覽器，請執行`spctl --add --label 'Approved' geckodriver`
- 針對Edge瀏覽器，請執行`spctl --add --label 'Approved' MicrosoftWebDriver`
- 針對Safari瀏覽器則無需做任何動作
12. 播放測試案例。這些被設定的瀏覽器將會被Selenium Server所啟動並運行測試案例。

## 行動瀏覽器
> 底下為目前Rapi所支援的行動裝置平台
> - [Android(Emulator)](#Android(Emulator))
> - [iOS(Simulator)](#iOS(Simulator))
### Android(Emulator)
> 第1到7步驟為建置Appium與Android Emulator，如果已有Appium與Android環境可跳到第8步驟
1. 安裝 [Appium](https://appium.io/)
2. 安裝 [Java](https://www.oracle.com/technetwork/java/javase/downloads/index.html)
3. 下載 [Android Studio](https://developer.android.com/studio)，確認有裝 Android SDK Tools
(Customize→All settings →Appearance&Behavior→System Settings→Android SDK→SDK Tools)
 
4. 使用Android Studio的 [**Android Virtual Device**](https://developer.android.com/studio/run/managing-avds) 功能來啟動一個虛擬機，並確認開啟`USB debugging`功能
5. 下載 [Chromedriver](https://chromedriver.chromium.org/downloads)，請選擇符合行動裝置上瀏覽器版本
6. 開啟Appium並點選`Edit Configurations`，於`ANDROID_HOME`輸入Android Studio的SDK Location，於`JAVE_HOME`輸入`/path/to/JAVA/jrex.x.x_x`。點選`Save and Restart`
7. Appium切換至`Advanced`設定，捲動至`Android`並於`Chromedriver Binary Path`填入Chrome Driver檔案路徑，點選`Start Server`
8. 開啟Rapi設定頁面，`WebDriver Settings`->`Add New Service`->`Appium`，`Server URL`填入`localhost`，`Port`填入`4723`。點選`Add New Browser`，於**browserName**、**platfromName**、**deviceName**、**automationName**欄位分別填入`chrome`、`android`、`<YOUR_PHONE_NAME>`、`UiAutomator2`
9. 於`Basic Setting`中啟用`Playback through WebDriver`
10. 播放測試案例

### iOS(Simulator)
1. 啟動iOS Simulator
2. Appium切換至`Advanced`設定，捲動至`iOS`並於`WebDriverAgent Port`輸入`8100`，點選`Start Server`
3. 開啟Rapi設定頁面，`WebDriver Settings`->`Add New Service`->`Appium`，`Server URL`填入`localhost`，`Port`填入`4723`。點選`Add New Browser`，於**browserName**、**platfromName**、**deviceName**、**automationName**欄位分別填入`Safari`、`iOS`、`<YOUR_PHONE_NAME>`、`XCUITest`
4. 於`Basic Setting`中啟用`Playback through WebDriver`
5. 播放測試案例