處理複選框和下拉選單

---

---

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

您的計算機上將出現以下螢幕：

使用複選框的方法

一些使用複選框的方法如下：

click()

用於選中複選框。

語法

語法如下：

let p = $('#loc')
p.click()

isSelected()

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

語法如下：

let p = $('#loc')
p.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('Checkbox', function(){    
      // launch url
      browser.url('https://the-internet.herokuapp.com/checkboxes')
      //identify checkbox with CSS then click
      const p = $("input[type='checkbox']") 
      p.click()
      //verify if checked with assertion
      expect(p).toBeSelected()
      //uncheck checkbox
      p.click()
      //verify if not checked with assertion
      expect(p).not.toBeSelected()
   });
});

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

npx wdio run wdio.conf.js

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

您的計算機上將出現以下螢幕：

命令成功執行後，所有斷言都按預期執行，並且我們得到了一個透過的測試。

處理下拉選單

在使用 WebdriverIO 自動化測試時，我們可以處理 UI 中的下拉選單。靜態下拉選單在 html 程式碼中被標識為標籤名為 select，其選項的標籤名為 option。

您的計算機上將出現以下螢幕：

靜態下拉選單的方法

一些使用靜態下拉選單的方法如下：

selectByVisibleText

此方法用於選擇與作為引數傳遞給此方法的選項的可視文字匹配的選項。

語法如下：

let p = $('#loc')
p.selectByVisibleText('By Subject')

selectByAttribute

此方法用於選擇與作為引數傳遞給此方法的任何屬性的值匹配的選項。

語法如下：

let p = $('#loc')
p.selectByAttribute('value', 'subject')

這裡，選項具有值為 subject 的屬性。

selectByIndex

此方法用於選擇與作為引數傳遞給此方法的選項的索引/位置匹配的選項。索引從 0 開始。

語法如下：

let p = $('#loc')
p.selectByIndex(1)

getValue()

此方法用於獲取下拉選單中所選選項的屬性值。

語法如下：

let p = $('#loc')
p.getValue()

首先，請按照“使用 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('Drodowns', function(){    
        // launch url
        browser.url('https://tutorialspoint.tw/tutor_connect/index.php')  
        //identify dropdown 
        const p = $("select[name='selType']") 
        //select by index
        p.selectByIndex(1)
        //get option selected
        console.log(p.getValue() + ' - option selected by index')
        //select by visible text
        p.selectByVisibleText('By Subject')
        //get option selected
        console.log(p.getValue() + ' - option selected by visible text')
         //select by value attribute
         p.selectByAttribute('value', 'name')
         //get option selected
         console.log(p.getValue() + ' - option selected by attribute value')
    });
});

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

npx wdio run wdio.conf.js

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

您的計算機上將出現以下螢幕：

命令成功執行後，首先將使用選項索引 - name 選擇的選項的值列印到控制檯。

然後，將使用選項可見文字 - subject 選擇的選項的值列印到控制檯。

最後，將使用選項屬性值 - name 選擇的選項的值列印到控制檯。