What is the best way to interact with a button that has a similar class attribute in Protractor?

Question

What is the best way to interact with a button that has a similar class attribute in Protractor?

There are multiple buttons in my code that have different classes assigned to them:

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

My task is to click on all buttons with the class "btn btn-block" but avoid clicking on the button with the class "btn btn-block btn-primary". I have attempted the following:

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

However, Protractor still clicks on both buttons. I also tried using the className locator, but Protractor is unable to find the element.

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

typescript protractor e2e-testing

Answer 1

Answer №1

If you're looking for an efficient solution, using regex checks could be the neatest approach.

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

Essentially, this code will iterate through each element with the .btn-block class, ensuring that it exactly matches btn btn-block, and if it does, it will trigger a click on that element.

Answer 2

If you're looking for an efficient solution, using regex checks could be the neatest approach.

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

Essentially, this code will iterate through each element with the .btn-block class, ensuring that it exactly matches btn btn-block, and if it does, it will trigger a click on that element.

Answer 3

Answer №2

To solve this problem, simply utilize the each() method to interact with each button that does not have the 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();
        }
    });
})

Answer 4

To solve this problem, simply utilize the each() method to interact with each button that does not have the 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();
        }
    });
})

Answer 5

Answer №3

Here is the code snippet I utilized:

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

It successfully executed as expected.

Answer 6

Here is the code snippet I utilized:

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

It successfully executed as expected.

What is the best way to interact with a button that has a similar class attribute in Protractor?

Answer №1

Answer №2

Answer №3

Similar questions

UI not reflecting updated form validation after changes made

Using Typescript with Vue.js: Defining string array type for @Prop

What would be the counterpart of setLocale in Yup for the zod library?

The 'Subscription' type does not contain the properties _isScalar, source, operator, lift, and several others that are found in the 'Observable<any>' type

Typeorm encountered an error when attempting to assign the unknown type to an entity

State in Angular stubbornly refuses to switch despite condition changes

A guide on exporting table data to PDF and enabling printing features in Angular 7

Angular httpClient: Adjusting date format within json object

"Upon submitting a form in React JS, the components will automatically trigger a

Is there a possibility of Typescript expressions `A` existing where the concept of truthiness is not the same as when applying `!!A`?

Convert an enum value to a String representation

Leverage the power of the MEAN stack with Angular 2 to seamlessly retrieve data from multiple APIs

Testing Angular 2 components with material icons and images

The 'xxx' type does not have an index signature, so the element is implicitly assigned an 'any' type

Facing difficulty in accessing mongoose schema static method in TypeScript

Using React and TypeScript to pass member variables

Error: Can't access the 'http' property because it's undefined in Angular 2

Setting property values in Typescript by initializing them from other properties when reading objects from a subscription response

The two-way binding does not connect the property and event halves to the same target

Efficient configuration for pnpm monorepo with TypeScript, vite, and rollup