CODEWITHSUNDEEP
javascriptangularjsprotractor
MethDamon
MethDamon

Reputation: 55

Protractor test chrome doesn't click on item while safari does

My test passes without problems in safari while in chrome this particular bit doesn't seem to work:

 it('should click the first source and get to the source preview page', function () {
    var grid_icon = element(by.css('.fa-th'));
    var sources = element.all(by.repeater('source in shownSources'));

    sources.get(0).element(by.tagName('a')).click();
    browser.pause();
    // Check url
    expect(browser.getCurrentUrl()).toContain('/source/');
});

After clicking on the hyperlink it should change to a url containing "/source/". This works perfectly fine in Safari but in Chrome it fails

My protractor config file:

exports.config = {
framework: 'jasmine2',
seleniumServerJar: '../node_modules/protractor/selenium/selenium-server-standalone-2.45.0.jar',
seleniumPort: 4444,
troubleshoot: false,
basePath: '../',
specs: ['protractor/***/**/*.js'],
baseUrl: 'http://localhost:9000',
capabilities: {
    browserName: 'chrome'
},
onPrepare: function() {
    browser.manage().window().maximize();
}
};

Edit: My initial problem seems to not occur anymore. But the test still behaves very strange. This bit here works perfectly fine in Safari:

it('should add all sources to the list and show the cart icon on the source in inventory', function () {
    browser.get('/sources');
    var ordersources = element.all(by.repeater('orderSource in orderSources'));
    var sources = element.all(by.repeater('source in shownSources'));

    sources.get(0).element(by.css('a')).click();
    var add_to_cart_btn = element(by.binding('addBtnText'));
    add_to_cart_btn.click();
    browser.get('/sources');

    sources.get(1).element(by.css('a')).click();
    var add_to_cart_btn = element(by.binding('addBtnText'));
    add_to_cart_btn.click();
    browser.get('/sources');

    browser.pause();

    sources.get(2).element(by.css('a')).click();
    var add_to_cart_btn = element(by.binding('addBtnText'));
    add_to_cart_btn.click();
    browser.get('/sources');

    expect(ordersources.count()).toBe(3);

    sources.each(function (field) {
        var isInCart_symbol = field.element(by.css('.fa-cart-arrow-down'));
        expect(isInCart_symbol.getAttribute('aria-hidden')).toBe('false');
    });
});

In Chrome however the 'a' item isn't found the second time and the browser.sleep() is never executed and the next 'it' begins to run.

EDIT: I got it to work by using a another html element by the class attribute.

element.(by.css('.example'))

Upvotes: 1

Views: 453

Answers (2)

finspin
finspin

Reputation: 4061

The reason why your link isn't found the second time is because you reload the page with browser.get(). After the reload, the sources handle is lost and webdriver doesn't know what element to operate on.

You either need to declare sources variable again after the page reload or avoid reloading the page.

Upvotes: 1

BarretV
BarretV

Reputation: 1197

I'm assumming that when you say it fails, the expect is failing? Here are 3 possible things you could try.

// Wait Till Url Contains
function WaitTillUrlContains(text, time, errMessage){
  if(typeof(time) ==='undefined') time = 5000;
  browser.getCurrentUrl().then(function (currentUrl) {
    browser.wait(function () {
       return browser.getCurrentUrl().then(function (newUrl) {
          var test = newUrl;
          if( test.indexOf(text) >= 0){
            // Found word
            return true;
          }

       });
    }, time , errMessage);
  });
};

(1) add a wait before the expect.

it('should click the first source and get to the source preview page', function () {
    var grid_icon = element(by.css('.fa-th'));
    var sources = element.all(by.repeater('source in shownSources'));

    sources.get(0).element(by.tagName('a')).click();

    // Check url
    WaitTillUrlContains("/source/", 5000, "✗ Failed to wait for page to load");
    expect(browser.getCurrentUrl()).toContain('/source/');
});

(2) do a .then() function after the click

it('should click the first source and get to the source preview page', function () {
    var grid_icon = element(by.css('.fa-th'));
    var sources = element.all(by.repeater('source in shownSources'));

    sources.get(0).element(by.tagName('a')).click().then(function(){

        // Check url
        WaitTillUrlContains("/source/", 5000, "✗ Failed to wait for page to load");
        expect(browser.getCurrentUrl()).toContain('/source/');
    });
});

(3) do a .then() function after getting the element then do the click

it('should click the first source and get to the source preview page', function () {
    var grid_icon = element(by.css('.fa-th'));
    var sources = element.all(by.repeater('source in shownSources'));

    sources.get(0).element(by.tagName('a')).then(function(elem){

        elem.click();
        // Check url
        WaitTillUrlContains("/source/", 5000, "✗ Failed to wait for page to load");
        expect(browser.getCurrentUrl()).toContain('/source/');
    });
});

Upvotes: 1

Related Questions