WebdriverIO - 處理單選按鈕

在使用 WebdriverIO 自動化測試時，我們可以處理 UI 中的單選按鈕。單選按鈕在 html 程式碼中被標識為標籤名為 input，型別為 radio。

您的電腦上將出現以下螢幕：

單選按鈕的方法

與單選按鈕一起工作的一些方法如下：

click()

它用於選擇一個單選按鈕。

語法

語法如下：

const l = $('.rad')
l.click()

isSelected()

它用於檢查型別為 radio 的元素是否被選中。它返回一個布林值（如果選中則為 true，否則為 false）。

語法

語法如下：

const l = $('.rad')
l.isSelected()

首先，請按照標題為“使用 WebdriverIO 的正向流程”一章中的步驟 1 到步驟 5 進行操作，步驟如下：

步驟 1 - 安裝 NodeJS。有關如何執行此安裝的詳細資訊，請參閱標題為“NodeJS 入門”一章。

步驟 2 - 安裝 NPM。有關如何執行此安裝的詳細資訊，請參閱標題為“NPM 安裝”一章。

步驟 3 - 安裝 VS Code。有關如何執行此安裝的詳細資訊，請參閱標題為“VS Code 安裝”一章。

步驟 4 - 建立配置檔案。有關如何執行此安裝的詳細資訊，請參閱標題為“配置檔案生成”一章。

步驟 5 - 建立一個規範檔案。有關如何執行此安裝的詳細資訊，請參閱標題為“Mocha 安裝”一章。

步驟 6 - 將以下程式碼新增到建立的 Mocha 規範檔案中。

// test suite name
describe('Tutorialspoint application', function(){
   //test case
   it('Radio Button', function(){    
   // launch url
   browser.url('https://tutorialspoint.tw/selenium/selenium_automation_practice.htm')
      //identify radio button with CSS then click
      const p = $("input[value='1']") 
      p.click()
      //verify if selected 
      console.log(p.isSelected())
   });
});

使用以下命令執行配置檔案 - wdio.conf.js 檔案：

npx wdio run wdio.conf.js 

有關如何建立配置檔案的詳細資訊，請參閱標題為“wdio.conf.js 檔案”和“配置檔案生成”的兩章。

您的電腦上將出現以下螢幕：

命令成功執行後，布林值將列印在控制檯中。這是由 isSelected() 函式返回的，該函式返回 true，因為單選按鈕在上一步中已被選中。