Playwright test will only pass when debugging, but fails when running when testing angular app

Question

I have some basic playwright tests I'm writing, and they work completely as expected when I'm debugging. It's just checking that an element exists within a div. When I run the test without debugging it's coming back having not found that element. Any thoughts would be greatly appreciated.

Tests:

let someHomePage: SomeHomePage;

test.beforeEach(async ({ page }) => {
    someHomePage = new SomeHomePage(page);
    await someHomePage.goto();
});

test('This is my sample test', async ({page}) => {
    expect(await Utils.elementExistsBelowInDiv(page, 'myDivClass', 'p', 'Some text', 'h4', 'Some text')).toBeTruthy();
});

Utils class method:

static async elementExistsBelowInDiv(page: Page, className: string, elementAbove: string, textAbove: string, elementBelow: string, textBelow: string) : Promise<boolean> {
    const element = page.locator(`.${className}`).locator(`${elementAbove}:has-text("${textAbove}"):below(${elementBelow}:has-text("${textBelow}"))`);
    return await element.count() > 0;
}

When I'm debugging this code, it finds the element find and returns a count > 0. When I run the test without debugging, the test fails because toBeTruthy() returns false.

Any thoughts would be greatly appreciated.

Thanks

Answer 1

I faced some similar issues with my work. I found out that the action I am trying to do requires some loading or waiting time but the playwright does the action so fast it doesn't wait for the load. So when you use debugging the process gets the waiting time while running the test don't wait. I solved my problem using

waitUntil: 'networkidle'

you can also use this method for the wait. This will solve the problem of running the test and getting the expected result.