為什么我不能在量角器中使用querySelector？

Question

我正在使用量角器。 我知道量角器有類似Jquery的語法，但我需要一些可以在我的一些測試中基於DOM元素創建條件，變量和循環的東西。 我希望能夠使用querySelector。 只使用承諾不會讓我做我需要做的那種測試。

當我運行它時，它說：

Failed: Cannot read property 'querySelector' of undefined

要么

Failed: document is not defined

要么

Failed: window is not defined

我已經設置了一個測試來測試這個問題。 它運行在我正在查看它的隨機網頁上。 它使用量角器選擇頁腳，然后使用querySelector嘗試它。 如果我在控制台中輸入querySelector部分，它會正確運行代碼。 我也使用window.document嘗試了querySelector的變種; 這也適用於瀏覽器，但不適用於量角器。

describe("Test", function()
{
  it('This is a test to test protractor' , function()
  {
    browser.waitForAngularEnabled(false);
    browser.get("https://facebook.github.io/jest/");
    $("#footer").getAttribute("innerHTML").then( function(value)
    {
      console.log("inside value then");
      console.log(value);

    });

    var queryse = document.querySelector("#footer").innerHTML;
    // var queryse = browser.document.querySelector("#footer").innerHTML;
    // var queryse = window.document.querySelector("#footer").innerHTML;

    console.log('query selector');
    console.log(queryse);
  });

});

Answer 1

您在Protractor測試用例中運行的代碼並不真正在瀏覽器中運行，實際上它是在Node.js執行的。 您應該將其視為一個API，然后通過WebDriver與瀏覽器進行通信。 這意味着您無法在代碼中使用特定於瀏覽器的JavaScript API。 $ helper就是為了使語法簡單易懂而不了解Selenium。 這就是為什么document和window無法訪問的原因。 如果您想了解更多信息，請訪問： https ： //github.com/angular/protractor/blob/master/docs/locators.md

Answer 2

@Nhor的答案在環境方面大多是正確的，為什么你不能直接使用document和window 。 但是，對於它的價值，你絕對可以通過executeScript在DOM中找到元素。 唯一的問題是，為什么你需要這樣做？

您可以在DOM中使用的任何定位器，您可以在Protractor中使用（盡管語法可能不同）。 這是一個例子，我使用innerHTML因為這是你在你的情況下嘗試的：

describe('Protractor Demo App', function() {
  it('element test', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
    var el = browser.executeScript('return document.querySelector("h3").innerHTML');
    el.then(function (text) {
        console.log(text); // logs "Super Calculator"
    });
  });
});

最后，重要的是要注意這個el僅限於executeScript調用中的javascript函數。 它不是Protractor的ElementFinder ，你不能對其執行getText()等操作（雖然它仍然是Promise，所以你需要調用.then() ）。 您可以在el上執行控制台日志以查看該對象中的內容。