数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 Protractor 检查文本是否存在于元素中？
我们将学习如何使用 Protractor 检查文本是否存在于元素中。Protractor 是一个用于 Angular 和 AngularJS 应用程序的端到端测试框架。它使用 WebDriverJS 并运行用 Jasmine 或 Mocha 编写的测试，从而可以对 Web 应用程序进行自动化浏览器测试。Protractor 可以模拟用户与应用程序的交互，测试预期的行为并报告测试结果。它还包含一些专为 Angular 设计的功能，例如能够在执行测试之前等待 Angular 特定元素加载。
注意 - 要使用 Protractor，请确保已完成 Protractor 的安装和设置。用户可能需要将执行策略设置为“RemoteSigned”
或者如果在不执行此操作的情况下无法工作，则设置为“Unrestricted”。
命令
Set-ExecutionPolicy RemoteSigned Or Set-ExecutionPolicy Unrestricted
我们将看到两种不同的场景来检查文本是否存在于元素中。
按钮中的文本
淡入元素中的文本
按钮中的文本
使用 Protractor，我们可以检查按钮中是否存在任何文本内容。
语法
用户可以按照以下语法来检查文本是否存在于元素中。
// Wait for the button to be present
browser.wait(EC.presenceOf(button), 5000);
// Check if the text content is as expected
expect(button.getText()).toEqual('Click me');
它将等待按钮出现，然后检查按钮中是否存在文本。
示例
在以下示例中，我们创建了 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
此文件包含一个带有“Click me”文本的按钮。
<html> <head> </head> <body> <h2>Check whether text is present in button</h2> <button id = "myButton" > Click me </button> </body> </html>
test.js
test.js 文件检查网页上是否存在带有特定文本的按钮。我们禁用等待 Angular 渲染更新，因为它可能不是 Angular 应用程序。然后我们使用 button.getText() 方法检查按钮是否包含文本“Click me”，并使用 expect() 方法将其与预期值进行比较。
describe('Protractor Demo App', function() {
it( 'should have a button with specific text' , async function() {
// Disable waiting for Angular render update
browser.waitForAngularEnabled( false );
// Get the HTML file that has to be tested
browser.get('../tests/test.html');
let EC = protractor.ExpectedConditions;
// Wait for the button to be present
let button = element(by.buttonText( 'Click me' ));
browser.wait(EC.presenceOf(button), 5000);
// Verify the button text
expect(button.getText()).toEqual( 'Click me' );
});
});
运行配置文件的命令
protractor conf.js(file path)
输出
我们可以看到所有测试都通过了，并且没有错误。
淡入元素中的文本
当我们有一个使用 CSS transition 属性淡入的元素时。使用 Protractor，我们可以检查该元素中是否存在文本。
示例
我们采取了另一个示例。conf.js 文件将保持不变。测试脚本等待具有 ID“fade-in”的特定 HTML 元素可见，检索其文本内容，并检查它是否与预期文本匹配。HTML 文件包含 CSS 样式和一个 JavaScript 函数，该函数在一段时间内淡入元素的文本。
test.html
HTML 文件包含一个隐藏的文本元素，该元素在页面加载时使用 JavaScript 淡入。
<html>
<head>
<style>
#fade-in {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
</style>
<script type="text/javascript">
let opacity = 0;
let intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
setInterval(show, 200);
}
function show() {
let element = document.getElementById("fade-in");
opacity = Number(window.getComputedStyle(element)
.getPropertyValue("opacity"));
if (opacity < 1) {
opacity = opacity + 0.1;
element.style.opacity = opacity
} else {
clearInterval(intervalID);
}
}
</script>
</head>
<body>
<h2>Check whether text is present in an element</h2>
<p id = "fade-in" > This text fades in </p>
</body>
</html>
test.js
这是我们的 test.js 文件。它等待元素可见，检索其文本内容，并检查它是否与预期文本“This text fades in”匹配。它还禁用等待 Angular 渲染更新并导航到要测试的 HTML 文件。
describe('Protractor Demo App', function() {
it('should have faded in', function() {
// Disable waiting for Angular render update
browser.waitForAngularEnabled(false);
// Navigate to the HTML file that has to be tested
browser.get('../tests/test.html');
// Get the element that fades in
let fadeInElement = element(by.id('fade-in'));
// Wait for the element to become visible
browser.wait(function() {
return fadeInElement.isDisplayed().then(function(isDisplayed) {
return isDisplayed;
});
}, 5000);
// Get the text content of the fading-in element
let fadeInText = fadeInElement.getText();
// Check if the text content is as expected
expect(fadeInText).toEqual('This text fades in');
});
});
输出
我们已经学习了如何检查元素中是否存在任何文本内容。在第一个示例中，我们检查了按钮中是否存在文本。然后，在另一个示例中，我们在淡入元素中获取了文本。在这两种情况下，我们都可以检查这些元素中文本的可用性。
398 次查看
