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

Question

我正在使用量角器。我知道量角器具有类似 Jquery 的语法，但我需要一些可以 在我的一些测试中基于 DOM 元素创建条件、变量和循环。我希望能够使用 querySelector。只使用 promise 不会让我做我需要做的那种测试。

当我运行它时，它会说：

Failed: Cannot read property 'querySelector' of undefined

或

Failed: document is not defined

或

Failed: window is not defined

我已经设置了一个测试来测试这个问题。它运行在我正在查看的随机网页上。它使用量角器选择页脚，然后使用 querySelector 尝试它。如果我在控制台中输入 querySelector 部分，它会正确运行代码。我还尝试了 querySelector 的变体，使用 window.document；这也适用于浏览器，但不适用于量角器。

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。 $ 帮助器只是为了使语法简单易懂，而无需对 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 上进行控制台日志以查看该对象中的内容。