WebdriverIO - 連結文字定位器

---

---

導航到網頁後，我們可以透過單擊連結與 Web 元素互動以完成自動化測試用例。連結文字定位器用於具有錨標籤的元素。

我們可以識別具有匹配文字的錨元素。在 WebdriverIO 程式碼中，我們可以選擇以下格式指定元素的連結：

$('=value of the anchor text')

或者，我們可以將此表示式儲存在變數中，如下所示：

const p = $('=value of the anchor text')

讓我們識別下面圖片中高亮的連結並單擊它：

上圖中高亮的連結具有標籤名 - a 和錨文字 - 使用條款。

首先，請按照“使用 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('Identify element with Link Text', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with link text then click
      $("=Terms of Use").click()
      console.log('Page title after click: ' + browser.getTitle())
   });
});

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

npx wdio run wdio.conf.js. 

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

您的計算機上將顯示以下螢幕：

成功執行命令後，單擊“使用條款”後頁面的標題 - Tutorialspoint 將列印在控制檯中。

部分連結文字定位器

導航到網頁後，我們可以透過單擊連結與 Web 元素互動以完成自動化測試用例。部分連結文字定位器用於具有錨標籤的元素。

我們可以識別具有匹配文字的錨元素。在 WebdriverIO 程式碼中，我們可以選擇以下格式指定元素的部分連結：

$('*=value of the anchor text which is matching')

或者，我們可以將此表示式儲存在變數中，如下所示：

const p = $('*=value of the anchor text which is matching')

部分連結文字類似於連結文字，唯一的區別在於它有助於處理錨元素的某些字元是固定的而其餘字元是動態的情況。

讓我們識別下面圖片中高亮的連結並單擊它：

上圖中高亮的連結具有標籤名 - a 和錨文字 - 使用條款。

首先，請按照“使用 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('Identify element with Partial Link Text', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with partial link text then click
      $("*=Terms of").click()
      console.log('Page title after click: ' + browser.getTitle())
   });
});

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

npx wdio run wdio.conf.js

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

您的計算機上將顯示以下螢幕：

成功執行命令後，單擊“使用條款”後頁面的標題 - Tutorialspoint 將列印在控制檯中。