如何使用Protractor测试元素是否具有类？

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

先决条件：安装和设置Protractor

方法：

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

  配置文件：

  Javascript

  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 文件，然后检查一个元素是否具有给定的类geeksforgeeks 。
• Browser 是由Protractor创建的全局变量，用于浏览器级别的命令，例如使用browser.get 进行导航。
• describe和it语法来自 Jasmine 框架，其中describe是测试的描述，而它是测试的步骤。

  名为test.js的规范文件：

  Javascript

  describe('Protractor Demo App', function () {
      it('should have a class', function () {
        
          // Disabling waiting for angular
          browser.waitForAngularEnabled(false)
    
          // Get our html file for testing
          browser.get('test.html');
    
          // Test if the element with id 'sample-div'
          // has a class called 'geeksforgeeks'
          let sampleDiv = element(by.id('sample-div'));
            
          expect(sampleDiv.getAttribute('class'))
              .toContain("geeksforgeeks");
      });
  });
  

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

  protractor conf.js

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

输出：