資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何使用Protractor測試元素的id？
我們將學習如何使用Protractor測試元素的ID。Protractor是一個用於Angular和AngularJS應用程式的端到端測試框架。Protractor構建在WebDriverJS之上，WebDriverJS是WebDriver API的JavaScript實現，並支援多種瀏覽器，例如Chrome、Firefox和Safari。它在開發人員和測試人員中很受歡迎，因為它提供了一種簡單有效的方法來測試Angular應用程式，無需編寫複雜的程式碼。
學習如何使用Protractor測試元素的id對於希望確保其Web應用程式正常執行的Web開發人員和質量保證(QA)測試人員非常重要。id屬性是HTML元素的唯一識別符號，它通常用於使用JavaScript或CSS訪問和操作元素。透過測試元素的id，您可以驗證是否正在定位正確的元素，並確保您的應用程式按預期執行。
我們將透過兩個不同的示例來測試元素的id，這將使您對該主題有更清晰的瞭解。
測試只有一個元素時的id
測試存在多個元素時的id
只有一個元素時測試id
假設我們有一個帶有某些id和類名的按鈕。我們可以使用類名找到該按鈕，然後使用Protractor測試該按鈕的id。
語法
使用者可以按照以下語法使用Protractor測試只有一個元素時的元素id。
expect(element(locator).getAttribute('id'))
.toEqual(expectedId);
這裡，“locator”指定元素定位策略（例如by.id、by.css、by.xpath等），expectedId是元素的預期ID值。toEqual()方法用於比較實際和預期的ID值。
示例
在下面的示例中，我們建立了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
此檔案包含一個id為“login-button”且類名為“myButton”的按鈕元素。
<html>
<head>
</head>
<body>
<h2>Test the id of one button</h2>
<div id = "login">
<p> login here </p>
<button id = "login-button" class = "myButton"> Login </button>
</div>
</body>
</html>
test.js
此test.js檔案使用Protractor測試網頁上登入按鈕的ID。beforeEach()函式停用AngularJS同步並載入網頁。it()函式驗證登入按鈕的ID是否正確。它首先使用CSS類名查詢按鈕元素，然後使用getAttribute函式檢索按鈕的ID。最後，它使用expect函式將檢索到的ID與預期值（即'login-button'）進行比較。
describe('Testing the ID of an Element with Protractor', function() {
beforeEach(function() {
// Disable AngularJS synchronization
browser.waitForAngularEnabled(false) ;
// Load the webpage
browser.get('../tests/test.html') ;
});
it('should verify the ID of the like button', function() {
// Find the element by using the CSS class name
let loginButton = element(by.css('.myButton') );
// Verify that the ID of the element is correct
expect(loginButton.getAttribute('id')).toEqual('login-button');
} );
} );
執行配置檔案的命令
protractor conf.js(file path)
輸出
我們可以看到所有測試都通過了，沒有錯誤。
測試存在多個元素時的id
可能存在多個按鈕具有不同ID的情況。在這種情況下，上述示例中描述的方法將不起作用。因此，我們將根據其索引或位置選擇一個特定的按鈕，然後測試其id。
示例
這是一個使用Protractor測試存在多個按鈕時按鈕id的示例。它是上述示例的一個稍微修改後的版本。
test.html
此HTML頁面包含兩個具有相同類名“myButton”的按鈕。但是它們的ID不同——“dislike-button”和“like-button”。
<html> <head> </head> <body> <h2>Test the id when there are more than one button</h2> <button id = "dislike-button" class = "myButton" > Dislike </button> <button id = "like-button" class = "myButton" > Like </button> </body> </html>
test.js
此Protractor測試檔案測試網頁上特定按鈕元素的ID。測試載入我們指定的網頁（包含多個按鈕），然後它使用element.all()和get()函式查詢第二個按鈕元素。然後，它獲取第二個按鈕元素的ID屬性，並使用expect函式驗證它是否與'like-button'匹配。
describe('Testing the ID of an Element with Protractor', function() {
beforeEach(function() {
browser.waitForAngularEnabled(false);
// Load the webpage
browser.get('../tests/test.html') ;
});
it('should verify the ID of the like button', function() {
// Find the second button element on the page
let likeButton = element.all(by.tagName('button')).get(1);
/* Get the ID attribute of the like button and verify it matches 'like-button' */
likeButton.getAttribute('id').then(function(value) {
expect(value).toEqual('like-button');
} );
} );
} );
輸出
總之，使用Protractor測試元素的ID對於Web開發人員和質量保證測試人員至關重要。我們已經看到了演示如何測試存在一個或多個元素時元素ID的示例。
172 次瀏覽
