javascript - Why can't I use querySelector in protractor? - Stack Overflow

admin管理员组

文章数量:1393866

I am using protractor. I understand that protractor has Jquery like syntax but I need something that can create conditions, variables and loops based on DOM elements in some of my testing. I want to be able to use querySelector. Using just promises won't let me do the kind of testing I need to do.

When I run it, it says:

Failed: Cannot read property 'querySelector' of undefined

or

Failed: document is not defined

or

Failed: window is not defined

I've set up a test to test this issue. It runs off a random web page that I was looking at it. It selects the footer using protractor and then attempts it using querySelector. If I enter the querySelector portion in the console, it runs the code correctly. I've also tried variations of querySelector, using window.document; this also works in the browser but not in protractor.

describe("Test", function()
{
  it('This is a test to test protractor' , function()
  {
    browser.waitForAngularEnabled(false);
    browser.get("/");
    $("#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);
  });

});

I am using protractor. I understand that protractor has Jquery like syntax but I need something that can create conditions, variables and loops based on DOM elements in some of my testing. I want to be able to use querySelector. Using just promises won't let me do the kind of testing I need to do.

When I run it, it says:

Failed: Cannot read property 'querySelector' of undefined

or

Failed: document is not defined

or

Failed: window is not defined

I've set up a test to test this issue. It runs off a random web page that I was looking at it. It selects the footer using protractor and then attempts it using querySelector. If I enter the querySelector portion in the console, it runs the code correctly. I've also tried variations of querySelector, using window.document; this also works in the browser but not in protractor.

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

});

• javascript
• protractor

Share Improve this question Follow edited May 30, 2017 at 20:54 munchschair asked May 30, 2017 at 19:10 munchschairmunchschair 1,69344 gold badges2121 silver badges4444 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The code you're running in Protractor test case doesn't really run in browser, in fact it's executed in Node.js. You should think of it as an API that will afterwards municate with the browser through WebDriver. That means that you cannot use browser specific JavaScript API in the code. The $ helper is just there to make the syntax easy and understandable without knowing anything about Selenium. That's why document and window are inaccessible for you. If you want to read more about that: https://github./angular/protractor/blob/master/docs/locators.md

@Nhor's answer is mostly correct in terms of the environments and why you cannot use document and window directly. However, for what it's worth, you can definitely find elements in the DOM through executeScript. The only question is, why do you need to do this?

Any locator you can use in the DOM, you can use in Protractor (though the syntax might be different). Here's an example, I used innerHTML because that's what you were trying in your case:

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

Finally, it's important to note that this el is restricted to javascript functions from within that executeScript call. It is not a version of Protractor's ElementFinder, you cannot perform actions like getText() on it (though it is still a Promise, so you need to call .then()). You can do a console log on the el to see what's in that object.

本文标签： javascriptWhy can39t I use querySelector in protractorStack Overflow