如何在Playwright中访问AngularJS的作用域(从protractor迁移)?

huangapple go评论58阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年6月8日 21:52:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76432581.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定