資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 Protractor 測試元素標籤名稱？
我們將學習如何使用 Protractor 來測試元素的標籤名稱。Protractor 是一個用於 Angular 和 AngularJS 應用程式的端到端測試框架。Protractor 基於 WebDriverJS 構建，WebDriverJS 是 WebDriver API 的 JavaScript 實現，並支援 Chrome、Firefox 和 Safari 等多種瀏覽器。它在開發者和測試人員中很受歡迎，因為它提供了一種簡單有效的方法來測試 Angular 應用程式，而無需編寫複雜的程式碼。
學習如何使用 Protractor 測試元素標籤名稱是 Web 應用程式自動化測試的關鍵方面。透過測試標籤名稱，我們可以確保頁面上的元素構建正確並按預期工作。這有助於在開發過程的早期發現錯誤和缺陷，從而建立更健壯和可靠的 Web 應用程式。
我們將透過兩個不同的示例來測試元素的標籤名稱，以便您可以清楚地理解該主題。
測試單個元素的標籤名稱
測試多個元素的標籤名稱
測試單個元素的標籤名稱
假設我們有一個 ID 為“btn”的按鈕。我們可以使用 ID 查詢該按鈕，然後使用 Protractor 測試其標籤名稱。
語法
使用者可以按照以下語法使用 Protractor 測試單個元素的標籤名稱。
expect(elementFinder.getTagName()).toEqual(expectedTagName);
這裡 elementFinder 是 Protractor ElementFinder 物件，表示您要測試的 HTML 元素。而 expectedTagName 是一個字串，表示 HTML 元素的預期標籤名稱。
示例
在下面的示例中，我們建立了 3 個檔案 - conf.js、test.html 和 test.js。
我們在 conf 資料夾中有一個 conf.js 檔案，tests 資料夾包含 test.html 和 test.js。
conf.js
此檔案是 Protractor 的配置檔案。它將瀏覽器功能設定為 Chrome，指定 Jasmine 框架，並指定測試指令碼檔案的位置。它還設定了預設超時間隔和測試的基本 URL。onPrepare 函式用於設定瀏覽器的重置 URL。
exports.config = {
directConnect: true,
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},
// Framework to use. Jasmine is recommended.
framework: 'jasmine',
/* Spec patterns are relative to the current working directory when protractor is called */
specs: ['../tests/test.js'],
// Options to be passed to Jasmine.
jasmineNodeOpts: {
defaultTimeoutInterval: 30000
} ,
// Define the baseUrl for the file
baseUrl: "file://" + __dirname + "/",
onPrepare: function () {
browser.resetUrl = "file://";
}
} ;
test.html
此 HTML 頁面包含一個 ID 為“btn”的按鈕元素。
<html> <head> </head> <body> <h2>Test the tag name of single element</h2> <button id = "btn"> Click Me </button> </body> </html>
test.js
此 test.js 檔案測試網頁上元素的標籤名稱。beforeEach 停用等待 Angular 渲染更新並載入我們的測試 HTML 檔案。在 it 塊中，選擇 ID 為“btn”的元素，然後使用 getTagName() 方法檢索所選元素的標籤名稱。expect() 函式用於將檢索到的標籤名稱與預期值進行比較，在本例中為“button”。此測試驗證 ID 為“btn”的元素的標籤名稱是否等於“button”。
describe('Testing the name of tag of an element', function() {
beforeEach(function() {
// Disable waiting for Angular render update
browser.waitForAngularEnabled(false);
// Load the web page
browser.get('../tests/test.html');
});
it('should check the tag name of button element', function() {
// Get the element by ID
let buttonTag = element(by.id('btn') );
// verify if the tag name is equal to 'button'
expect(buttonTag.getTagName()).toEqual('button');
});
});
執行配置檔案的命令
protractor conf.js(file path)
輸出
我們可以看到所有測試都通過了，沒有錯誤。
測試多個元素的標籤名稱
假設我們有多個具有不同 ID 和相同類的 div 元素。然後，我們不需要使用 ID 為每個元素檢查標籤名稱。我們可以簡單地使用 Protractor 中的類檢查多個元素的標籤名稱。
示例
這是一個使用 Protractor 測試標籤名稱的示例，其中有多個元素具有相同的標籤。
test.html
此 HTML 頁面包含三個 div 元素，它們具有唯一的 ID 和相同的“collection”類。
<html>
<head>
</head>
<body>
<h2>Test the tag names of multiple elements</h2>
<div id = 'firstDiv' class = "collection" >
<p> It is first div element </p>
</div>
<div id = 'secondDiv' class = "collection" >
<p> It is second div element </p>
</div>
<div id = 'thirdDiv' class = "collection" >
<p> It is third div element </p>
</div>
</body>
</html>
test.js
此 Protractor 測試檔案測試網頁中類名為“collection”的 div 元素的標籤名稱。它載入網頁，使用“element.all”方法和 CSS 選擇器查詢所有類名為“collection”的 div 元素，然後使用“getTagName”方法和“expect”語句驗證每個 div 元素的標籤名稱是否等於“div”。
describe('Testing tag names of elements', function() {
beforeEach(function() {
browser.waitForAngularEnabled(false);
// Load the web page
browser.get('../tests/test.html') ;
});
it('should check the tag names of all div elements', function() {
// Find all div elements with class name 'collection'
let divTags = element.all(by.css('.collection'));
/* For each div element, verify that the tag name is 'div' */
divTags.each(function(element) {
expect(element.getTagName()).toEqual('div');
} );
} );
} );
輸出
總之，透過使用 Protractor 測試元素的標籤名稱，我們可以輕鬆地捕獲錯誤和缺陷，並檢查網頁是否構建正確並正常工作。透過提供的示例，我們可以瞭解如何使用 Protractor 測試單個和多個元素的標籤名稱，使其成為 Web 應用程式開發和測試中必不可少的工具。
283 次瀏覽
