AngularJS 如何使用protractor等待新标签页创建

简介： 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://"; 
  }, 
};

步骤2 : 我们将创建名为test.html的HTML文件，该文件将创建一个新的标签页。

HTML

<html> 
<body>   
  <p>Click the button to open a new tab </p> 
  <button id="gfg" onclick="NewTab()"> 
    Open Geeksforgeeks 
  </button> 
  <script> 
    function NewTab() { 
      window.open( 
        "https://www.geeksforgeeks.org", "_blank"); 
    } 
  </script> 
</body> 
</html>

步骤3： 我们将创建test.js文件。在这个文件中，我们将访问上面的HTML文件，然后等待新的选项卡被创建。浏览器是由Protractor创建的全局变量，用于浏览器级别的命令，例如使用browser.get()方法进行导航。describe和它的语法来自Jasmine框架，其中describe是您测试的描述，它定义了测试的步骤。

Javascript

describe("Protractor Demo App", function () { 
  it("should wait for new tab to be created",  
  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"); 
  
    // Click on the element to open a new tab 
    var clickElement = element(by.id("gfg")); 
  
    await clickElement.click(); 
    // Waits for the new tab to created. 
    await browser.wait( 
      async function () { 
        var handles =  
          await browser.driver.getAllWindowHandles(); 
  
        await browser.switchTo() 
          .window(await handles.pop()); 
        var url = await browser.getCurrentUrl(); 
        return await url.match( 
            "https://www.geeksforgeeks.org/"); 
      }, 
      10000, 
      "Takes time to load"
    ); 
  }); 
});

步骤4： 最后，我们将使用下面给出的命令运行配置文件。这将运行配置文件，并且测试将按照下面的输出进行运行。