如何使用Protractor测试元素的 CSS 属性？

Protractor是为 Angular 和 AngularJS 应用程序开发的端到端测试框架。它像真实用户一样针对与其交互的应用程序运行测试，并在真实浏览器中运行。在本文中，我们将测试元素的 CSS 属性。

先决条件：安装和设置Protractor

方法：

• 我们将创建一个基本的测试程序，我们将在其中测试元素的 CSS 属性。
• 所有Protractor测试都有一个包含配置的文件，这将是启动测试的初始文件。
• 让我们创建一个名为conf.js 的文件。

  conf.js:

  exports.config = {
    
      // Capabilities to be passed to 
      // the webdriver instance
      capabilities: {
          'browserName': 'chrome'
      },
    
      // Framework to use Jasmine is 
      // recommended
      framework: 'jasmine',
    
      // Spec patterns are relative to
      // the current working directory 
      // when protractor is called
      specs: ['test.js'],
    
      // Options to be passed to Jasmine.
      jasmineNodeOpts: {
          defaultTimeoutInterval: 30000
      },
    
      // Url for the file
      baseUrl: 'file://' + __dirname + '/',
    
      onPrepare: function () {
          browser.resetUrl = 'file://';
      }
  };

• 现在让我们创建名为test.html的 HTML 文件，该文件将包含要测试的元素。

  测试.html

  
  
    
  
      
      
      
  
    
  
    
      
      
  
          Inner text
      
  
    
  
  

• 现在让我们创建我们的测试文件test.js 。在这个文件中，我们将访问一个 HTML 文件并测试元素的 CSS 属性颜色是否设置为给定值。
• Browser 是由Protractor创建的全局变量，用于浏览器级别的命令，例如使用browser.get 进行导航。
• describe及其语法来自 Jasmine 框架，其中describe是测试的描述，而它是测试的步骤。

  名为test.js的规范文件：

  测试.js：

  describe('Protractor Demo App', function () {
      it('should have a css property set', function () {
    
          // Disabling waiting for angular
          browser.waitForAngularEnabled(false)
    
          // Get our html file for testing
          browser.get('test.html');
    
          // Test if the element is with id 'sample-div'
          // has the color CSS property set
          let sampleDiv = element(by.id('sample-div'));
          expect(
              sampleDiv.getCssValue('color'))
                  .toBe("rgba(18, 52, 86, 1)");
      });
  });
  

• 最后，我们准备使用下面给出的命令运行我们的文件：

  protractor conf.js

• 这将运行配置文件，测试将运行，如下面的屏幕截图所示：

输出：