1

I have the following function which selects a category from a list of available categories. This function works fine in my first test. But the same function with a different valid category name in my second test fails with the following error.

Error: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator By.cssSelector(".grid-view-builder__category")

this.categoryElements = element.all(by.css('.grid-view-builder__category'));

this.selectCategory = function (categoryName) {

    var filteredCategories = this.categoryElements.filter(function (category) {
        return category.getText().then(function (text) {
            log.info(text);
            return text === categoryName;
        })
    })

    filteredCategories.first().click().then(function () {
        log.info("Select Category: " + categoryName);
    }).then(null, function (err) {
        log.error("Category: " + categoryName + " Not Found !!" + err);
    });

}

Spec File

var columnSelect = require('pages/grid/columns/columnselector-page')()

it('Add Publisher ID Column to the Grid & Verify', function () {

    var columnCountBefore = columnSelect.getColumnCount();

    columnSelect.openColumnSelector();
    columnSelect.selectCategory('Advanced');
    columnSelect.selectColumn('Publisher ID');
    columnSelect.apply();

    var columnCountAfter = columnSelect.getColumnCount();

    expect(columnCountAfter).toBeGreaterThan(columnCountBefore);

});
kvm006
  • 4,554
  • 2
  • 18
  • 22

2 Answers2

3

The problem might be in the way you are defining and using Page Objects. Here is a quick solution to try - if this would help, we'll discuss on why that is happening.

Make the categoryElements a function instead of being a property:

this.getCategoryElements = function () {
    return element.all(by.css('.grid-view-builder__category'));
};

this.selectCategory = function (categoryName) {

    var filteredCategories = this.getCategoryElements().filter(function (category) {
        return category.getText().then(function (text) {
            log.info(text);
            return text === categoryName;
        })
    })

    filteredCategories.first().click().then(function () {
        log.info("Select Category: " + categoryName);
    }).then(null, function (err) {
        log.error("Category: " + categoryName + " Not Found !!" + err);
    });

}

Or, this could be a "timing issue" - let's add an Explicit Wait via browser.wait() to wait for at least a single category to be present:

var EC = protractor.ExpectedConditions;
var category = element(by.css('.grid-view-builder__category'));

browser.wait(EC.presenceOf(category), 5000);
alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • 1
    alecxe, thanks for your response. But I am still seeing the same issue. First time it works fine, second time I am seeing "Error: Index out of bound. Trying to access element at index: 0, but there are only 0 elements that match locator By.cssSelector(".grid-view-builder__category")" – kvm006 Mar 14 '16 at 23:17
  • 1
    @VarunMukka okay, thanks, are you sure you are on the correct page when `.grid-view-builder__category` element is being located? – alecxe Mar 14 '16 at 23:18
  • Yes, I am on the correct page. The column selector bubble opens too. When I try to print the categories, it prints blank values for the second time. I have added my spec file, just for your reference – kvm006 Mar 14 '16 at 23:20
  • 1
    @VarunMukka okay, let's try this just to gather more information: comment out the first time you select a category and let this second time to be the first time you select a category - does it work in this case? – alecxe Mar 14 '16 at 23:24
  • yes, if I comment out my first test, the second test works fine with out any failures. – kvm006 Mar 14 '16 at 23:26
  • 1
    @VarunMukka how about this: instantiate the page object before you are using it in each test. Basically move `var columnSelect = require('pages/grid/columns/columnselector-page')()` to under each of the tests. Does it make any difference? Thanks. – alecxe Mar 14 '16 at 23:28
  • No luck. I also tried changing the variable name in the second test to var columnSelect1 = require('pages/grid/columns/columnselector-page')() ... but no use. Still seeing the same issue :( – kvm006 Mar 15 '16 at 00:00
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106299/discussion-between-alecxe-and-varun-mukka). – alecxe Mar 15 '16 at 00:01
  • alecxe, I tried using waitForCategories() function but its not serving the purpose. Sent u the function to you in the chat – kvm006 Mar 15 '16 at 18:19
  • browser.wait(EC.visibilityOf(category), 3000); this line worked instead of presenceOf :). Thank you so very much – kvm006 Mar 15 '16 at 18:28
0

It looks like this has nothing to do with the code posted here, only that the css selector you're using is not finding any elements

Austin
  • 1,291
  • 10
  • 19
  • thanks for your response. I have updated my css selector in the above code. But the css selector works fine for the first time – kvm006 Mar 14 '16 at 20:04