数据结构
网络
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+ 次查看
