如何使用Protractor等待新标签页创建？

流行的端到端测试框架Protractor在真实的浏览器中对Web应用程序执行测试，模拟用户交互。它与Angular和AngularJS应用程序一起使用。当用户在在线应用程序中点击链接或按钮时，可能会打开一个新的标签页或窗口。这是一个典型的场景。在这种情况下，在对新标签页进行任何其他更改之前，等待新标签页的创建至关重要。

我们可以结合浏览器的`wait()`功能使用浏览器来等待Protractor打开新的标签页。`browser.getAllWindowHandles()`方法返回当前会话中所有窗口句柄的列表。我们可以使用此函数通过观察窗口句柄数量的增加来查看是否已打开新的标签页。

`browser.wait()`方法可以延迟运行测试，直到满足特定条件。在这种情况下，我们可以监视窗口句柄数量的增加，这表示已打开新的标签页。如果在分配的时间内未满足条件，则`wait`函数将引发错误。

此方法使我们能够确保我们的测试在执行任何其他操作之前等待新标签页的创建，从而使测试准确可靠。

使用Protractor等待创建新标签页的步骤

这些方法将帮助我们确保Protractor测试在采取任何进一步操作之前等待新标签页的创建，从而使测试准确可靠。

  • 步骤 1 - 识别导致打开新标签页的组件，例如按钮或链接。

  • 步骤 2 - 使用`element()`函数定位元素，并使用`click()`方法模拟点击事件。

  • 步骤 3 - 使用浏览器等待新标签页打开。使用`browser.wait()`函数。在`browser.wait()`函数中使用`browser.getAllWindowHandles()`函数获取当前会话中所有窗口句柄的列表。

  • 步骤 4 - 使用预期的窗口句柄数量检查窗口句柄列表的长度。如果窗口句柄列表的长度增加，则表示已打开新的标签页。

  • 步骤 5 - 新标签页创建后，使用`browser.switchTo().window()`函数将焦点切换到新标签页，并执行任何其他步骤。

  • 步骤 6 - 如果新标签页未在分配的时间内打开，`browser.wait()`函数将抛出错误，测试将失败。

使用`browser.wait()`函数

Protractor 使用 `browser.wait()` 函数延迟测试的启动，直到满足特定条件。它接受一个返回 Promise 或布尔值的函数作为第一个参数，以及一个毫秒级的超时时间作为第二个参数。该函数会重复轮询该条件，直到满足该条件或达到超时时间，这将抛出错误。此函数可用于等待异步事件，例如加载页面或打开新标签页。

示例

在这个例子中，我们将使用Protractor等待一个新标签页的创建。首先，我们需要使用所需信息配置`conf.js`文件，然后我们需要在`test-file1.js`文件中进行编码，在这个例子中，它是测试用例文件。在这个文件中，我们描述步骤并为每个步骤编写自动化代码，最后，我们声明要测试的`index.html`文件。在这个HTML文件中，我们有一个按钮，点击它会弹出一个新标签页。

conf.js

// An example configuration file.
exports.config = {
   directConnect: true,
   
   // 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-file1.js'],
   SELENIUM_PROMISE_MANAGER: false,
   
   // Options to be passed to Jasmine.
   jasmineNodeOpts: {
      defaultTimeoutInterval: 30000
   }
};

test-file1.js

describe("Protractor Test App", function () {
   it("Test 1",
   async function () {
      var EC = protractor.ExpectedConditions;
      // Disable the wait for an Angular render update
      await browser.waitForAngularEnabled(false);
      
      // Get the HTML file that must be checked
      await browser.get("http://127.0.0.1:5500/index.html");
      
      // To open a new tab, click on the element
      var myBtnElement = element(by.id("myBtn"));
      await myBtnElement.click();
      
      // Waits for the creation of a new tab
      await browser.wait(
         async function () {
            var myHandler =
            await browser.driver.getAllWindowHandles();

            await browser.switchTo()
            .window(await myHandler.pop());
            var url = await browser.getCurrentUrl();
            return await url.match(
            "http://127.0.0.1:5500/index2.html");
         },
         10000,
         "Too much time to load!"
      );
   });
});

index.html

<html>
<body>
   <h4>Use <i>protractor</i> to wait for new tab to be created</h4>
   <p>Click the below button to open a new tab</p>
   <button id="myBtn" onclick="openNewTab()">Open New Tab</button>
   <script>
      function openNewTab() {
         window.open('http://127.0.0.1:5500/index2.html', '_blank')
      }
   </script>
</body>
</html>

输出

Protractor是一个方便的自动化测试工具。这是它的一个用例。

更新于：2023年4月6日

428 次浏览

启动您的职业生涯

完成课程获得认证

开始
广告