英文:
Access AngularJS's scope in Playwright (migration from protractor)?
问题
I'm facing a small (I hope) issue, for personal purpose I need to migrate from Protractor to Playwright. I've added a lot of steps working well without any issues, but now I'm stuck. The migrate Protractor's code using executeScript() and accessing scope.
Here is what I had in Protractor:
browser.executeScript(element => $(element).scope().$ctrl.myFunction(), finder.getWebElement());
In Playwright, I tried this (with console.log 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 I can achieve this. Thanks in advance for your help!
英文:
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 !
答案1
得分: 0
终于找到了!
在 Angular 中访问作用域,显然需要处于调试模式,因此在使用 Playwright 时,我刚刚创建了一个方法来实现这个,并在 Cucumber 的 "Before" 钩子中调用了它:
async enableDebugMode() {
// 创建一个将在页面重新加载时解析的 Promise
const pageReloaded = new Promise((resolve) => {
this.mainWindow.once("load", resolve);
});
// 在启用调试模式之前检查是否加载了 AngularJS
await this.mainWindow.evaluate(() => {
if ((window as any).angular) {
(window as any).angular.reloadWithDebugInfo();
}
});
// 等待页面完全加载
await pageReloaded;
// 检查调试模式是否已启用
const isDebugModeEnabled = await this.mainWindow.evaluate(() => {
const bodyClasses = document.body.className.split(" ");
return bodyClasses.includes("ng-scope");
});
// 为了调试目的而添加的
console.log("Is Debug Mode Enabled:", isDebugModeEnabled);
}
英文:
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);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论