資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 Protractor 檢查元素是否可見？
我們將學習如何使用 Protractor 來檢查元素是否可見。Protractor 是一個用於 Angular 和 AngularJS 應用程式的端到端測試框架。它使用 Selenium WebDriver 自動化瀏覽器互動，並提供高階 API 以 JavaScript 或 TypeScript 編寫測試。它使用 Jasmine 作為測試框架。它提供了許多功能，例如與 AngularJS 應用程式的自動同步、頁面物件模型支援等等。
注意 - 要使用 Protractor，請確保已完成 Protractor 的安裝和設定。使用者可能需要將執行策略設定為“RemoteSigned”
或者如果在不執行此操作的情況下無法工作，則設定為“Unrestricted”。
命令
Set-ExecutionPolicy RemoteSigned Or Set-ExecutionPolicy Unrestricted
我們將看到兩種不同的場景來檢查元素是否可見。
檢查元素是否存在且可見
等待元素可見
檢查元素是否存在且可見
isPresent() 和 isDisplayed() 方法用於在 Protractor 中檢查 Web 元素的可見性。如果元素存在於 DOM 中，無論其可見性如何，isPresent() 方法都會返回 true 的布林值，否則返回 false。如果元素存在於 DOM 中並且在頁面上可見，則 isDisplayed() 方法返回 true 的布林值，否則返回 false。
語法
使用者可以按照以下語法來檢查元素是否存在且可見。
// Check if present expect(myElement.isPresent()).toBe(true); // check if visible expect(myElement.isDisplayed()).toBe(true);
它將檢查頁面上元素的存在性和可見性。
示例
在下面的示例中，我們建立了 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>
<head>
</head>
<body>
<h2>Check if element is present and visible using Protractor</h2>
<p>This is an example page.</p>
<div id = "my-element" >
<p>This is the element to check.</p>
</div>
</body>
</html>
test.js
test.js 檔案用於定義 Protractor 將執行的測試。它包含測試用例，這些測試用例由 describe 和 it 塊組成。describe 塊定義測試套件的名稱，it 塊定義特定的測試用例。在 it 塊中，使用 Protractor 的 API 定義測試邏輯。每個 it 塊按順序執行，Protractor 報告每個測試用例的結果。這是我們的 test.js 檔案。
describe('Example Test Suite', function() {
it('should check if an element is present and visible', function() {
browser.waitForAngularEnabled(false)
// Load the webpage
browser.get('../tests/test.html');
// Find the element to check
let myElement = element(by.css('#my-element'));
// Check if the element is present and visible
// Check that the element is present on the page
expect(myElement.isPresent()).toBe(true);
// Check that the element is visible on the page
expect(myElement.isDisplayed()).toBe(true);
}) ;
}) ;
執行配置檔案的命令
protractor conf.js(file path)
輸出
我們可以看到所有測試都已透過，並且沒有錯誤。
等待元素可見
在使用 browser.wait 檢查元素之前，我們將等待元素變得可見。透過使用此函式，我們可以確保測試指令碼在嘗試與元素互動之前等待元素變得可見。這有助於防止錯誤並確保測試更可靠。
示例
我們舉了另一個例子。conf.js 檔案將保持不變。自定義函式 waitForElementToBeVisible() 使用 Protractor 的 ExpectedConditions 物件來定義等待條件。在這種情況下，條件是 visibilityOf，這意味著該函式將等待直到元素在頁面上可見。browser.wait 方法用於等待條件滿足，該函式返回一個承諾，當元素變得可見時解析。
test.html
此 HTML 檔案包含按鈕和隱藏元素。
<html>
<head>
</head>
<body>
<h2>Wait for element to be visible and then check</h2>
<button onclick = "document.getElementById('hiddenElement').style.display = 'block'"> Show Element </button>
<div id = "hiddenElement" style = "display: none"> This is a hidden element </div>
</body>
</html>
test.js
此程式碼測試元素在網頁上是否可見。它首先停用 Angular 等待，然後載入網頁並等待帶有文字“顯示元素”的按鈕變得可見。waitForElementToBeVisible 函式使用 ExpectedConditions 物件等待元素變得可見並返回一個承諾。
describe('Test Suite', function() {
it('should check if an element is visible', function() {
browser.waitForAngularEnabled(false)
// Load the webpage
browser.get('../tests/test.html');
// Wait for the button to become visible
waitForElementToBeVisible(by.buttonText('Show Element')).then(function() {
// Click the button to show the element
element(by.buttonText('Show Element')).click();
// Wait for the element to become visible
waitForElementToBeVisible(by.id('hiddenElement')).then(function() {
// Expect the element to be visible
expect(element(by.id('hiddenElement')).isDisplayed()).toBeTruthy();
}) ;
}) ;
}) ;
}) ;
// Function to wait for an element to become visible
function waitForElementToBeVisible(elementFinder) {
let EC = protractor.ExpectedConditions;
return browser.wait(EC.visibilityOf(element(elementFinder)), 5000);
}
輸出
我們已經學習瞭如何使用 Protractor 的兩種方法 isPresent() 和 isDisplayed() 來檢查元素是否可見。我們還看到了檢查元素是否存在且可見或在檢查元素之前等待元素變得可見的語法和示例。使用者可以根據自己的需求使用任何方法。
1K+ 次檢視
