How to click at button with almost same class using Protractor?

0
votes

I have several buttons with two classes: 

<button _ngcontent-c39="" class="btn btn-block"></button>
<button _ngcontent-c39="" class="btn btn-block btn-primary"></button>

I need to click at all buttons with class "btn btn-block" and don't want to click at the button with the class "btn btn-block btn-primary". I already tried:

element.all(by.css('.btn.btn-block')).click();

but Protractor click at these two button. I already tried using className locator, but protractor doesn't find the element.

element.all(by.className('.btn.btn-block)).click();
3
typescriptprotractore2e-testing
Are their parent elements different? You can reference them as a child of a parent - Ben Mohorc
No, their parents are the same - paulotarcio
I think $('button[class="btn btn-block"]') should work. But I do not have time to test it. - Jeremy Kahan
It did! Thanks. - paulotarcio
great! I am glad for you. - Jeremy Kahan

3 Answers

0
votes

The cleanest way I could come up with is doing regex checks.

element(by.all('.btn-block')).each(function(element)
{
  let tmp = element.getAttribute('class');
  if(/^btn btn-block$/.test(tmp)) element.click();
}

Basically this will loop through every element that has the .btn-block class, and then check to make sure that it has EXACTLY btn btn-block and if it does, it clicks that element.

0
votes

Just use each() method and click each button that does not contain btn-primary class.

var allButtons = element.all(by.css('.btn.btn-block'));
allButtons.each((button) => {
    button.getAttribute('class').then((buttonClass) => {
        if (!buttonClass.includes('btn-primary')) {
            button.click();
        }
    });
})
0
votes

I used:

element.all('button[class="btn btn-block"]').each(function(element){
element.click();
});

and worked.