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 !
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);
}