如何使用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 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始
廣告