如何使用量角器检查元素是否可见？

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"],
  
  // 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

  
  

    Inner text
  

第 3 步：我们将创建test.js文件。在这个文件中，我们将访问上面的 HTML 文件，然后检查该元素是否隐藏。浏览器是由Protractor创建的全局变量，用于浏览器级别的命令，例如使用 浏览器获取（） 方法。描述 它的语法来自 Jasmine 框架，其中describe是测试的描述，同时它定义了测试的步骤。

Javascript

describe('Protractor Demo App', function () {
  it('should have a title', function () {
  
      // Disable waiting for Angular render update
      browser.waitForAngularEnabled(false)
  
      // Get the HTML file that has to be tested
      browser.get('test.html');
  
      // Test if the element is hidden
      let hiddenDiv = element(by.id('hidden-div'));
  
      // This test will pass only when
      // element is hidden
      expect(hiddenDiv.isDisplayed()).toBe(false);
  });
});

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

protractor conf.js

输出：