Question

我对量角器很陌生，并且想知道为什么在使用selenium webdriver manager在Protractor中运行测试时，我的按钮没有被点击。

按钮：

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

当我使用以下选择器时在chrome中：[ng-reflect-router-link =“add”]找到所需的元素。

我的量角器-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

};

我的要素类很简单

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

我的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"));

应该工作

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

使用this：element（by.className（＆＃34; preview-toggle＆＃34;））;它肯定会工作

Answer 6

感谢您的帮助，至少我让选择器在Firefox和phantomjs中工作。我使用以下代码来处理类选择，并且组件被微调器阻止：

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;

问题是我的chrome驱动程序找不到dom节点，因为selenium webdriver在chrome中崩溃，但这是另一个需要解决的问题。： - ）

量角器css选择器无法识别元素

6 个答案: