Access AngularJS's scope in Playwright (migration from protractor)?

Question

i'm facing a small (i hope) issue, for personal purpose i need to migrate from protractor to playwright, i add a lot of steps working well without any issues, but now i'm stuck, the migrate protactor's code using executeScript() and accessign scope.

Here is what i had in Protractor :

browser.executeScript(element => $(element).scope().$ctrl.myFunction(), finder.getWebElement());

in Playwright i tried that (with console.log to for debugging) :

const elementHandle: ElementHandle | null = await this.button.elementHandle();

await this.page.evaluate(
({ element, functionName }) => {
                    const angularElement = (window as any).angular.element(element);
                    const scope = angularElement.scope();
                    console.log("", scope); // returns undefined
                    console.log("",scope.$ctrl); // returns also undefined of course
                    scope.$ctrl[myFunction]();
                },
                { element: elementHandle, functionName }
            );

i'm completely lost, i don't see how can i achieve this, thanks in advance for your help !

Answer 1

Finally found out !

In Angular to access scope you're apparently need to be in debug mode, so In case of using Playwright I've just created a method to do it and called it in the Cucumber's "Before" Hook :

async enableDebugMode() {
        // Create a promise that will resolve when the page reloads
        const pageReloaded = new Promise((resolve) => {
            this.mainWindow.once("load", resolve);
        });

        // Check if AngularJS is loaded before enabling the debug mode
        await this.mainWindow.evaluate(() => {
            if ((window as any).angular) {
                (window as any).angular.reloadWithDebugInfo();
            }
        });

        // Wait for the page to fully load
        await pageReloaded;

        // Check if debug mode is enabled
        const isDebugModeEnabled = await this.mainWindow.evaluate(() => {
            const bodyClasses = document.body.className.split(" ");
            return bodyClasses.includes("ng-scope");
        });

        // Added that for debugging purposes
        console.log("Is Debug Mode Enabled:", isDebugModeEnabled);
    }