📜  如何使用量角器等待元素的属性更改为特定值?

📅  最后修改于: 2022-05-13 01:56:24.536000             🧑  作者: Mango

如何使用量角器等待元素的属性更改为特定值?

简介: Protractor是为 AngularJS 应用程序开发的端到端测试框架,但是,它也适用于非 Angular JS 应用程序。它像真实用户一样对与之交互的应用程序运行测试,在真实浏览器中运行。在本文中,我们将使用Protractor来检查如何等待元素的属性更改为特定值?

先决条件:Protractor的安装和设置

方法:我们将创建一个基本的测试程序,我们将在其中检查如何等待元素的属性更改为特定值?所有Protractor测试都会有一个包含配置的文件,这将是启动测试的初始文件。

以下是上述方法的分步实施。

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

Javascript
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://";
  },
};


Javascript


  

    
  
    

  


Javascript
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');
    });
});


第 2 步:我们将创建名为 test.html 的 HTML 文件,该文件将创建一个新选项卡。

Javascript



  

    
  
    

  

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

Javascript

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 步:最后,我们将使用下面给出的命令运行配置文件。这将运行配置文件并运行测试,如下面的输出所示。

protractor conf.js

输出: