Using Protractor to get element titles in the DOM

Question

I'm setting up page objects to get some basic element data from the DOM.

For example, in my index.page.js page object I would like to access the title element from .panel-top-two > .row > h1 as follows:

$('div.panels.panel-top-two > .row > h1').text()

Can I use jQuery in my page object file, or do I need to stick with Protractor Locators ? I'm a bit new using Protractor, so I'm looking for some direction.

Here's a sample page objects file that I export. Is this.getFirstPanelText a valid function ? :

module.exports = function () {
    this.button = element(by.id('myButton'));
    this.message = element(by.binding('messageText'));
    this.domain = "http://localhost:64174";

    this.get = function () {
        browser.get(this.domain + '/myPage.html');
    };

  this.getFirstPanelText = function () {
        return $('div.panels.panel-top-one > .row > h1').text();
    };
    this.clickButton = function () {
        this.button.click();
    };

    this.getTitle = function () {
        return browser.getTitle();
    };

    this.getMessageText = function () {
        return this.message.getText();
    };
};

Thanks for your answers.

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

To answer your question right off the bat: No, you cannot use jQuery.

And now about this.getFirstPanelText:

It's partly a valid function, the $ is fine but the text() is not. If you are asking because you have seen the $ used in other Protractor questions, it's important to note that is not jQuery. It is part of Protractor, just coincidentally the same syntax as the element locator function for jQuery. So do not try to use jQuery functions in your code, it will throw an error.

The $() is simply shorthand for element(by.css())

You can refer to my answer on another question for a longer description of the $ usage.

edited May 23 '17 at 12:32

Community

1
1

answered Sep 20 '16 at 21:19

Gunderson

3,263
2
16
34

You're exactly right. I'm using $ as jquery, which I see is wrong here. So if I need some custom selection, do I drop back to Document.getElementBy... () ? – bob.mazzo Sep 20 '16 at 21:25
No you shouldn't have to use document.getElementBy. Protractor should have sufficient locators to cover everything. The locators used inside your `$` should still be valid. If you can post the HTML I could add a few examples – Gunderson Sep 20 '16 at 21:29
Thx, i can.follow up in the morning more specifically. – bob.mazzo Sep 20 '16 at 21:40
2

@Gunderson @bob.mazzo There is a `noGlobals` option in protractor config file! – Ram Pasala Sep 21 '16 at 10:40

score 2 · Answer 2 · answered Sep 21 '16 at 10:40

There is a noGlobals option provided in config by protractor , if you set it to true. You can use your jquery style code as well! It should not conflict with protractor's globals.

But I too agree with @Gunderson and would advise not to mix up jquery code with protractor as I do not see any reason for it!

exports.config = {

seleniumAddress: env.seleniumAddress,

framework: 'jasmine',

specs: [
'noGlobals/noGlobals_spec.js'
],

noGlobals: true,
};

For reference pls check the noGlobal conf file

Using Protractor to get element titles in the DOM

2 Answers2