Element not recognized by protractor css selector

Question

I am quite new to protractor and am wondering why my button doesn't get clicked when running the test in Protractor using selenium webdriver manager.

The button:

<button class="preview-toggle" icon="add" icon-only="" right="" ng-reflect-router-link="add"></button>

In chrome when I use the following selector: [ng-reflect-router-link="add"] the required element is found.

My protractor-conf.js:

exports.config = {


seleniumAddress: 'http://localhost:4444/wd/hub', // This is targetting my local running instance of the selenium webdriver

specs: [
    './features/**/*.feature'
],

capabilities: {
    browserName: 'chrome' 
},

framework: 'custom', //We need this line to use the cucumber framework

frameworkPath: require.resolve('protractor-cucumber-framework'), // actual framework 

cucumberOpts: {
    format:  'pretty',
    require: './features/step_definitions/**/*.js' // This is where we'll be writing our actual tests
},

useAllAngular2AppRoots: true

};

My feature class is a simple one

Feature: Cool_feature
  Scenario: I do something awesome
   Given I open up the application
   When I click on add
   Then I should be the best

My test.js class

test = function() {


this.Given(/^I open up the application$/, function (callback) {
    browser.get('foo.com').then(callback);
});

this.When(/^I click on add$/, function (callback) {
    // Write code here that turns the phrase above into concrete actions
    browser.element(by.css('[ng-reflect-router-link="add"]')).click().then(callback);
});

this.Then(/^I should be the best"$/, function (callback) {

});
};
module.exports=test;

you dont have to give `browser.element`. it should be`element(by.css('[ng-reflect-router-link="add"]'))` — radio_head, Nov 29 '16 at 06:52

score 1 · Answer 1 · answered Nov 29 '16 at 08:13

1

element(by.css(".preview-toggle"));

Should work

answered Nov 29 '16 at 08:13

Sanja Paskova

1,110
8
15

Thanks for the answer, I am now able to find the element. The thing is the item is only found in firefox and not in chrome. We need to test in chrome since it is optimzed for this browser. Even when I select the total body and print it in my console I don't get a value. Any suggestion? – Nov 29 '16 at 08:47
Try with waiting. It might be the test to be faster and usually as we know chrome is faster than other browsers: – Sanja Paskova Nov 29 '16 at 08:55

score 0 · Answer 2 · answered Nov 28 '16 at 21:49

0

Try to prefix your attribute selector with button:

element(by.css('button[ng-reflect-router-link=add]'));

answered Nov 28 '16 at 21:49

Fjut

1,314
12
23

score 0 · Answer 3 · answered Nov 29 '16 at 08:58

0

var el = element(by.css(".preview-toggle"));
 browser.wait(EC.presenceOf(element(by.css(".preview-toggle"))), 30000).then(function () {
        browser.wait(EC.visibilityOf(element(by.css(".preview-toggle"))), 30000).then(function () {
            browser.wait(EC.elementToBeClickable(element(by.css(".preview-toggle"))), 30000).then(function () {
                el .click()
});
});
});

answered Nov 29 '16 at 08:58

Sanja Paskova

1,110
8
15

Weird but I got the following message after the 5000 ms time out org.openqa.selenium.WebDriverException: Element is not clickable at point (1850, 128). Other element would receive the click: – Nov 29 '16 at 09:33
Good we are on a good track. You have some element that blocks your click. – Sanja Paskova Nov 29 '16 at 09:36

score 0 · Answer 4 · answered Nov 29 '16 at 09:41

You have some loading element, wait to become invisible:

browser.wait(EC.invisibilityOf(element(by.id("loading-app-content"))), 30000).then(function () {
 var el = element(by.css(".preview-toggle"));
 browser.wait(EC.presenceOf(element(by.css(".preview-toggle"))), 30000).then(function () {
    browser.wait(EC.visibilityOf(element(by.css(".preview-toggle"))), 30000).then(function () {
        browser.wait(EC.elementToBeClickable(element(by.css(".preview-toggle"))), 30000).then(function () {
            el .click()
});
});
});
});

score 0 · Answer 5 · answered Nov 29 '16 at 12:59

0

use this : element(by.className("preview-toggle")); it will work definitely

answered Nov 29 '16 at 12:59

Shiva

358
2
15

score 0 · Answer 6 · answered Nov 29 '16 at 15:05

Thanks for the help at least I got the selectors working in Firefox and in phantomjs. I used the following code, to tackle class selection and component got blocked by the spinner:

test = function() {
var EC = protractor.ExpectedConditions;
var el=  element(by.className("preview-toggle"));


this.Given(/^I open up the application$/, function (callback) {

    browser.get('foo.nl').then(callback);
});

this.When(/^I click on add$/, function (callback) {
    // Write code here that turns the phrase above into concrete actions

  //this is for waiting until loading is done
  browser.wait(EC.invisibilityOf(element(by.id("loading-app-content"))), 30000).then(function () {
        //check if the button is there
        browser.wait(EC.presenceOf(element(by.css(".preview-toggle"))), 30000).then(function () {
            //check if the element is visible and clickable then click it
            browser.wait(EC.visibilityOf(element(by.css(".preview-toggle"))), 30000).then(function () {
                browser.wait(EC.elementToBeClickable(element(by.css(".preview-toggle"))), 30000).then(function () {
                    el.click().then (callback);
                });
            });
        });
    });

});

this.Then(/^I should be the best$/, function (callback) {
    callback();
});


};
module.exports=test;

Problem is my chrome driver doesn't find the dom nodes because selenium webdriver is crashing in chrome but that is another issue to tackle. :-)

Element not recognized by protractor css selector

6 Answers6