資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
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等多種瀏覽器。
測試元素是否包含特定類非常重要，因為它允許我們檢查是否按預期將某種樣式或行為應用於該元素。這在特定類的存在或不存在會觸發某些樣式或行為的場景中尤其有用。通過了解如何使用Protractor測試類的存在，我們可以編寫更有效率的測試，以幫助確保Web應用程式的質量。
我們將透過兩個不同的示例來演示如何使用Protractor測試元素是否包含某個類。
測試元素是否包含特定類
使用class屬性測試產品是否售罄
測試元素是否包含特定類
我們可以使用Protractor檢查元素的類屬性是否包含某個字串。
語法
使用者可以按照以下語法使用Protractor來測試元素的類屬性是否包含特定字串。
/* Check that the 'class' attribute of the element contains a certain string */
expect(element(by.css('your css selector') )
.getAttribute('class'))
.toContain('your string');
如果類包含給定的字串，則測試將透過；否則，測試將失敗。
示例
在下面的示例中，我們建立了三個檔案：conf.js、test.html和test.js。
conf.js檔案位於conf資料夾中，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為“myDiv”的<div>元素。該<div>元素有兩個類：“Web”和“page”。
<html> <head> </head> <body> <h2>Test if an element has specific class </h2> <div id = "myDiv" class = "Web page"> </div> </body> </html>
test.js
此test.js檔案測試網頁上ID為'myDiv'的特定元素的class屬性是否包含字串'Web'。此外，它在載入網頁之前停用AngularJS同步，以確保可以正確測試頁面上任何非Angular元素。
describe('Test Page', function() {
it(' should contain string "Web" in class ', function() {
// Disable AngularJS synchronization
browser.waitForAngularEnabled(false);
// Load the webpage
browser.get('../tests/test.html');
// Find the element with ID 'myDiv'
let myDiv = element(by.id('myDiv'));
/* Check that the 'class' attribute of the element contains the string 'Web' */
expect(myDiv.getAttribute('class')).toContain('Web');
});
});
執行配置檔案的命令
protractor conf.js(file path)
輸出
我們可以看到所有測試都通過了，沒有錯誤。
使用class屬性測試產品是否售罄
假設您有一個網頁顯示不同型別的產品，並且您想測試特定產品是否已標記為“售罄”，方法是檢查其元素上是否具有“sold-out”類。您可以使用Protractor來自動執行此測試過程。
示例
這是一個使用Protractor測試具有特定data-id的產品元素是否具有sold-out類的示例。如果發現產品缺貨，則測試透過；否則測試失敗。
test.html
此HTML頁面包含兩種產品：芒果汁和橙汁。芒果汁產品的“缺貨”span元素具有“sold-out”類，而橙汁產品有貨，沒有“sold-out”類。
<html>
<head>
<meta charset = "UTF-8">
</head>
<body>
<h2>Test if particular product has class sold-out</h2>
<div class = "product" data-id = "123">
<h3> Mango juice </h3>
<p> It is made of fresh Mangoes </p>
<span class = "price" > Rs. 20\- </span>
<span class = "sold-out" > Out of stock </span>
</div>
<div class = "product" data-id = "45">
<h3> Orange juice </h3>
<p> It is made of fresh Oranges </p>
<span class = "price" > Rs. 15\- </span>
</div>
</body>
</html>
test.js
此測試檔案測試具有特定ID的產品在缺貨時是否具有'sold-out'類。它透過載入包含產品資訊的網頁，查詢具有指定data ID的產品元素，等待其可見，等待1秒，查詢產品元素內的'sold-out'類元素，然後檢查其'class'屬性是否包含字串'sold-out'來實現。如果包含，則測試透過；如果不包含，則測試失敗。
describe('Product page', function() {
it('should display sold-out message for out of stock product' , function() {
browser.waitForAngularEnabled(false);
browser.get('../tests/hasClass2.html');
// Find the product element with data-id="123"
var product = element(by.css('.product[data-id="123"]'));
// Wait for the product element to be visible
browser.wait(ExpectedConditions.visibilityOf(product), 5000);
// Wait for 1 second before checking for the class
browser.sleep(1000);
/* Find the element with class 'sold-out' inside the product element */
product.element(by.className('sold-out')).getAttribute('class').then(function(className) {
/* Check that the 'class' attribute of the element contains the string 'sold-out' */
expect(className).toContain('sold-out');
} );
} );
} );
輸出
我們演示了兩個使用Protractor測試元素是否包含類的示例。一個簡單的示例，另一個示例顯示了測試類是否存在如何有用。
482 次瀏覽
