WebdriverIO - 標籤名定位器

導航到網頁後，我們需要與頁面上可用的網頁元素進行互動，例如單擊連結/按鈕、在編輯框中輸入文字等等，以完成我們的自動化測試用例。

為此，我們的首要任務是識別元素。我們可以使用元素的 HTML 標籤名來識別它。在 WebdriverIO 程式碼中，我們可以使用以下格式指定元素的標籤名：

$('<element tagname>')

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

const p = $('element tagname')

讓我們識別下圖中突出顯示的元素並獲取其文字：

上圖中突出顯示的元素的標籤名為 - h1。

首先，請按照“使用 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 Tagname', function(){    
      // launch url
      browser.url('https://tutorialspoint.tw/about/about_careers.htm')
      //identify element with tagname then obtain text
      console.log($("<h1>").getText() + " - is the text.")
   });
});

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

npx wdio run wdio.conf.js 

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

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

命令成功執行後，元素“關於 Tutorials Point 的職業”的文字將列印在控制檯中。