如何使用量角器等待新标签创建？

简介： 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

  
  Click the button to open a new tab 
  
    Open Geeksforgeeks
  
  
    function NewTab() {
      window.open(
        "https://www.geeksforgeeks.org", "_blank");
    }
  

第 3 步：我们将创建 test.js 文件。在这个文件中，我们将访问上面的 HTML 文件，然后等待新选项卡的创建。 browser 是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 步：最后，我们将使用下面给出的命令运行配置文件。这将运行配置文件并运行测试，如下面的输出所示。

protractor conf.js

输出：