Protractor test always passes, if the spec is inside a loop

Question

PROBLEM:

• With the below code in the CODE section, the expect block inside the loop forEach is always passing.

• Example scenario and its respective test report screenshot

  expect('bt bt-primary').toContain('btn');

MY REQUIREMENT:

• I need to get the list of all buttons in any given page and i should be able to test for the custom CSS behaviour's through E2E test cases.
• This test code should be reusable across different pages test files.
• Have disabled selenium promise manager to use the async/await method.
• While i was trying to achieve this, I encountered the following issue.

CODE:

describe('Login form', () => {
    it('should navigate to page containing login form', async () => {
      await expect(browser.getCurrentUrl()).toEqual(
        'http://localhost:4200/#/login'
      );
    });

    it('should contain buttons with bootstrap classes', async () => {
      const buttons = await page.getAllButtons();
      buttons.forEach(async (button) => {
        const classAttribute = await button.getAttribute('class');
        expect(classAttribute).toContain('btn');
      });
    });
  });

QUESTION:

Can someone help me on how to solve this issue? I need to get list of elements and test it in a loop page by page.

Answer 1

For each just fires of these commands and doesn't wait until their resolution

Use for loop instead

it('should contain buttons with bootstrap classes', async () => {
      const buttons = page.getAllButtons();
      for (let i = 0; i<buttons.length; i++) {
        const classAttribute = await buttons.get(i).getAttribute('class');
        expect(classAttribute).toContain('btn');
      } 
    });