See here: https://playwright.dev/docs/protractor#polyfilling-waitforangular

Edit: From maintainers

Introduction

Hi! I’m starting with Playwright and did my first projects.

I come from Protractor, that made me start easily to the Web Frontend E2E testing, but let me tell you that Playwright is fulfilling our needs incredibly and looks so promising.

We are migrating some projects we had working with Protractor to Playwright and we found it easy except for one thing. Protractor worked very well with Angular applications since it had the waitForAngular function that waits for the Angular zone (from zonejs) to be stable. That was so useful to avoid manual waits of network requests or animations.

The problem

We have solved it successfully by using the waitForFunction method and tests are working the same as with Protractor. But they have become less descriptive and they include programming logic that we would like to have as short/easy to read as it was.

Example

In a Protractor project we had something like:

expect(page.getServiceListItems().count()).toBe(0);

As Protractor waits for the Angular Zone to be stable, the initial page load and further ajax asynchronous calls are made before this verification is done, so the ServiceList is populated when we verify that the count is not 0 (data to populate ServiceList comes from an ajax call).

In the Playwright project we have solved like this:

wait(() => {
    return new Promise(async (resolve, reject) => {
        const service_list_items = await page.getServiceListItems();
        if ( service_list_items.count() > 0 ) {
            resolve(true);
            return;
        }
        reject();
    });
}, TIMEOUT_MILLIS, DEBOUNCE_MILLIS, '0 apps were listed expecting more than 0')

The wait function is something similar to the Playwright’s page.waitForFunction, it waits until the promise is resolved.

The fact is that with Protractor we had it resolved in one line and with Playwright we have to create a function to make the verification.

Feature Request

We would like to have an optional “Angular mode” that waits for the Angular zone to be stable before every webdriver action so that ensures that HTTP requests/animations/whatever thing blocking Angular zone is not happening at this time.

Links

waitForAngular at Protractor docs

We must say that this is NOT a blocking thing as we found workarounds to solve it. But we think that could help to the readability/manteinability of the Playwright projects and would make lots of people working with Protractor to make their lives easier if they are thinking of migrating to Playwright.

Thank you so much for your support and for such a nice E2E framework.

Greetings.