如何在量角器中单击没有文本的按钮？

Question

I want to Click on the two Plus(+) button but the button is not having any text in Music Library Section

How to Click the same?

I tried the following code:

describe ('angularjs homepage', function() {
    browser.get('http://angular.github.io/peepcode-tunes/public/');
    element(by.css('[ng-click="player.playlist.add(album)"]')).click();
});

Unfortunately It is not working. Please Help

Answer 1

You are not able to click them because both of them have same class & attributes. In these cases you have 2 options:

1) You can directly use nth child concept of CSS.

describe ('angularjs homepage', function() {
browser.get('http://angular.github.io/peepcode-tunes/public/');
element(by.css('#container > section > ul > li:nth-child(1) > button')).click();  // it will click the first "+" button
element(by.css('#container > section > ul > li:nth-child(2) > button')).click();  // it will click the second "+" button
});

2) You can access them with index as @noor suggested in the above answer:

describe ('angularjs homepage', function() {
browser.get('http://angular.github.io/peepcode-tunes/public/');
element.all(by.css('.queue.add')).get(0).click();  // it will click the first "+" button
element.all(by.css('.queue.add')).get(1).click();  // it will click the second "+" button
});

I tested it and both of them work! let me know if you face issues!

Answer 2

Better use protractor.ExpectedConditions to wait until element become clickable status and then do click operation.

Code Snippet:

EC = protractor.ExpectedConditions;

describe ('angularjs homepage', function() {

it('test case name',function(){

browser.ignoreSynchronization=true;

var twoButtons=element.all(by.css('.queue.add'));
browser.get('http://angular.github.io/peepcode-tunes/public/');

/*It will click first button, chance get(1) for second button*/    
browser.wait(EC.elementToBeClickable(twoButtons.get(0)),  
                                          8000).thenCatch(function () {
                      assert.fail(' element is not click able');
              });
twoButtons.get(0).click();
});
});

Answer 3

i have checked this in java, though u don't tag java here. hope u can convert ur code to js.

in java,to click on first +, use the below:

driver.findElements(By.cssSelector(".queue.add")).get(0).click();

for second +:

driver.findElements(By.cssSelector(".queue.add")).get(1).click();

so, i think if u use the below code for js, this will work:

 element(by.css('.queue.add')).click();

if there is any way in js to take elements, first take elements and than click using element index.

Answer 4

Check the Protractor API API. Make sure you have the latest version. You can grab the plus signs multiple ways. One way would be to use webdriver.By.css

Try :

browser.findElement(by.css('.queue')).click(); 

You can also add an ID to the plus sign and grab it that way, using webdriver.By.id