如何使用protractor来检查一个元素中是否有文本存在

Protractor是一个为AngularJS应用程序开发的端到端测试框架，然而，它也适用于非Angular JS应用程序。它针对与之交互的应用程序运行测试，就像一个真实的用户在真实的浏览器中运行一样。在这篇文章中，我们将使用Protractor来检查我们如何在一个元素中等待文本的出现？

方法：我们将创建一个基本的测试程序，其中我们将检查文本是否存在于一个元素中？所有的Protractor测试都有一个包含配置的文件，这将是启动测试的初始文件。

下面是上述方法的分步实现。

第1步：我们必须首先创建一个conf.js文件，其中包括与Protractor一起使用的配置。

exports.config = {
  
 // Define the capabilities to be passed
 // to the webdriver instance
 capabilities: {
   browserName: "chrome",
 },
  
 // Define the framework to be use
 framework: "jasmine",
   
 // Define the Spec patterns. This is relative
 // to the current working directory when
 // protractor is called
 specs: ["test.js"],
  
 SELENIUM_PROMISE_MANAGER: false,
  
 // Define the options to be used with Jasmine
 jasmineNodeOpts: {
  defaultTimeoutInterval: 30000,
 },
  
 // Define the baseUrl for the file
 baseUrl: "file://" + __dirname + "/",
  
 onPrepare: function () {
  browser.resetUrl = "file://";
 },
};

第2步：我们将创建名为**test.html的HTML文件，其中将包含要测试的元素。

<!DOCTYPE html>
<html>
<head>
    <title>
      fade-in effect on page load using JavaScript
    </title>
    <script type="text/javascript">
        var opacity = 0;
        var intervalID = 0;
        window.onload = fadeIn;
    
        function fadeIn() {
            setInterval(show, 200);
        }
    
        function show() {
            var body = document.getElementById("fade-in");
            opacity = Number(window.getComputedStyle(body)
                             .getPropertyValue("opacity"));
            if (opacity < 1) {
                opacity = opacity + 0.1;
                body.style.opacity = opacity
            } else {
                clearInterval(intervalID);
            }
        }
    </script>
</head>
<body>
  <!-- The element to be tested -->
  <div id="fade-in" 
       style="opacity: 0;">
    GFG
  </div>
</body>
</html>

第3步：我们将创建test.js文件。在这个文件中，我们将访问上述HTML文件，然后等待元素中的特定文本。浏览器是由Protractor创建的一个全局，它用于浏览器级别的命令，如用browser.get()方法进行导航。描述和它的语法来自Jasmine框架，其中describe是对你的测试的描述，而it定义了测试的步骤。

describe('Protractor Demo App', function () {
  it('should have a title', async function () {
      
      var EC = protractor.ExpectedConditions;
  
      // Disable waiting for Angular render update
      browser.waitForAngularEnabled(false)
  
      // Get the HTML file that has to be tested
      browser.get('test.html');
  
      // Get the fade in element
      let fadeIn = element(by.id('fade-in'));
  
      // Waits for the element with id 'myInput' to contain the input 'foo'.
      browser.wait(EC.textToBePresentInElementValue(fadeIn, 'GFG'), 5000);
  
      expect(fadeIn.getText()).toEqual('GFG');
  });
});

第4步：最后，我们将使用下面的命令运行配置文件。这将运行配置文件，测试将如下面的输出所显示的那样运行。