Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to use protractor to wait for new tab to be created ?

  • Last Updated : 31 Oct, 2021

Introduction: Protractor is an end-to-end test framework developed for AngularJS applications, however, it also works for non-Angular JS applications. It runs tests against the application interacting with it as a real user would, running in a real browser. In this article, we are going to use Protractor to check how we can wait for a new tab to be created?

Prerequisite: Installation and Setup of Protractor

Approach: We are going to create a basic test program in which we are going to check how we can wait for a new tab to be created? All the Protractor tests will have a file that will contain the configuration and this will be the initial file that will initiate the test.

Below is the step-by-step implementation of the above approach.

Step 1: We have to first create a conf.js file consisting of the configuration to be used with 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://";
  },
};

Step 2: We will create the HTML file called test.html which will create a new tab.

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>

Step 3: We will create the test.js file. In this file, we are going to access the above HTML file and then going wait for the new tab to be created. The browser is a global created by Protractor, which is used for browser-level commands such as navigation with browser.get() method. The describe and its syntax are from the Jasmine framework where describe is a description of your test while it defines the steps for the test.

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"
    );
  });
});

Step 4: Finally, we will run the configuration file using the command given below. This will run the configuration file and the test will be run as shown in the output below.

protractor conf.js

Output:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!