Element not recognized by the transformer selector

Question

I am completely new to the protractor and I wonder why my button does not get a click when starting a test in Protractor using the selenium webdriver manager.

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-reflection-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 simple

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 class is test.js

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;

Answer 1

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

Must work

Answer 2

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()
});
});
});

Answer 3

, , :

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()
});
});
});
});

Answer 4

:

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

Answer 5

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

Answer 6

Thanks for the help, at least I got selectors working in Firefox and phantomjs. I used the following code to decide the class choice, and the component was blocked by a counter:

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;

The problem is that my chrome driver cannot find dom nodes because selenium webdriver crashes in chrome, but this is another problem to solve. :-)