如何使用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>
  
<body>
    <input type="text" id="text" name="name" 
        placeholder="Enter your Name" required>
  
    <script>
        setTimeout(() => {
            document.getElementsByName('name')[0]
                .placeholder = 'Test text change';
        }, 5000)
    </script>
</body>
  
</html>

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

describe('Protractor Demo App', function () {
    it("should wait for attribute's value to change to a particular value",
         async function () {
        
        var EC = protractor.ExpectedConditions;
        // Disable waiting for Angular render update
        await browser.waitForAngularEnabled(false)
    
        // Get the HTML file that has to be tested
        await browser.get('test.html');
           
        // Get the test Element
        var testElement = element(by.id('text'));
  
        // Waits for the attribute's value to change
        // to a particular value
        await browser.wait(async function() {
            return await testElement.getAttribute('placeholder') ===
            'Test text change';}, 10000, 'Takes time to load');
    });
});

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