CODEWITHSUNDEEP
angularjsseleniumprotractorangular-ui-grid
C. Peck
C. Peck

Reputation: 3717

Can't find id of Angular ui-grid element with Selenium/Protractor

I have some Protractor tests that are running on an Angular application that uses ui-grid. I have some working smoke tests for the application, but I am just starting to implement tests using https://github.com/angular-ui/ui-grid/blob/master/test/e2e/gridTestUtils.spec.js to test the ui-grid components. The problem I'm having is that I need the actual id of the grid element in order to use the getGrid function.

I'm able to successfully locate the element using element(by.css("[id$='-grid-container']")), but for some reasons my attempts to get the full id out of the element have failed. Here is what I am trying:

        var grid = element(by.css("[id$='-grid-container']"));
        grid.getAttribute('id').then(function(result) {
            console.log(result);
            var myGrid = gridTestUtils.getGrid(result.toString());

            gridTestUtils.expectCellValueMatch(myGrid, 0, 0, 'Cox');
        });

The console.log(result); is not logging anything. It doesn't SEEM necessarily related to ui-grid, it's just Selenium isn't finding the id for some reason. As far as I can tell I'm using getAttribute correctly; it works with this syntax in other tests, but maybe I'm missing something. Any ideas why this isn't working?

Edit because my comment is unreadable:

Thanks for the suggestions. However, I'm still just as confused because

    var grid = element(by.css("[id$='-grid-container']"));
    console.log(grid.toString());
    grid.getAttribute('id').then(function(result) {
        console.log('======'+result);
        var myGrid = gridTestUtils.getGrid(result.toString());

        gridTestUtils.expectCellValueMatch(myGrid, 0, 0, 'Cox');
    });

gives a console output of 

[object Object]
======

so it seems like the element is being found, which I had already checked, and the console.log inside the promise is being executed.

It's like it can't find the 'id', which according to the API documentation means there is no id on the element. But that is definitely not true.

Upvotes: 1

Views: 746

Answers (2)

Ernst Zwingli
Ernst Zwingli

Reputation: 1422

Your code looks correct. However, if your console.log(result) doesn't log anything, this means you either didn't find the element or the moment you execute the getAttribute() the element is no longer present.

See in the API description, that getAttribute() always returns a value, if the element is present.

Maybe try to extend console.log('======='+result); to figure out, if that line of code gets executed (I'm pretty sure it's not executed). Also try console.log(grid.toString());, which should output [object Object], if the element is really found.

As for the ElementFinder, I'm used to use the ' and " just the other way around, so element(by.css('[id$="-grid-container"]')); or shorter $('[id$="-grid-container"]').

Let me know, if this helped and you could further determine the cause.

Round 2

Let's exclude a few things

  1. change getAttribute('id') to getAttribute('outerHTML') to see, if there is anything logged.

  2. change (result) to (resultattr) to exclude, that result is else used by a plugin, who put result as a global variable.

  3. change grid.getAttribute() to be element(by.css("[id$='-grid-container']")).getAttribute

What are the results of those actions?

Upvotes: 0

GoLGo13
GoLGo13

Reputation: 81

Not sure on the semantics, but you could try this, just to make sure that you are getting the first element, if multiple:

element.all(by.css('[id$="-grid-container"]')).first().getAttribute('id').then(function(result) {
  console.log(result);
  var myGrid = gridTestUtils.getGrid(result.toString());

  gridTestUtils.expectCellValueMatch(myGrid, 0, 0, 'Cox');
});

Upvotes: 0

Related Questions