如何使用量角器等待元素完全淡入？

简介： Protractor是为 AngularJS 应用程序开发的端到端测试框架。但是，它也适用于非 Angular JS 应用程序。它像真实用户一样对与之交互的应用程序运行测试，在真实浏览器中运行。在本文中，我们将使用Protractor来检查元素是否完全淡入。

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

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

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

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

conf.js

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 文件，其中包含要测试的元素。

测试.html

  

    
        fade-in effect on page load using 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);
            }
        }
    

  

      
    
    
        Inner text
    

  

第 3 步：我们将创建test.js文件。在这个文件中，我们将访问上面的 HTML 文件，然后等待元素完全淡入。浏览器是由Protractor创建的全局，用于浏览器级别的命令，例如使用 browser.get( ） 方法。 describe 及其语法来自 Jasmine 框架，其中 describe 是对您的测试的描述，同时它定义了测试的步骤。

Javascript

describe("Protractor Demo App", function () {
  
    it("should have a title", async function () {
      
        // 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"));
      
        // Wait for the fade in process to complete
        await browser.driver.wait(
            async function () {
            return (await element.getCssValue("opacity")) === "1";
            },
            30000,
            "Taking too long to fade in"
        );
    
        expect(hiddenDiv.isDisplayed()).toBe(true);
    });
  });

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

protractor conf.js

输出：