Fatal编程技术网
  • javascript/
  • Javascript 如何在非angularjs网站上使用量角器？

Javascript 如何在非angularjs网站上使用量角器？

javascript asp.net angularjs testing protractor

Javascript 如何在非angularjs网站上使用量角器？,javascript,asp.net,angularjs,testing,protractor,Javascript,Asp.net,Angularjs,Testing,Protractor,我发现了为AngularJS web应用程序设计的量角器框架 如何在不使用AngularJS的网站上使用量角器 我编写了第一个测试，量角器触发了以下消息： Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded 如果测试需要与非角度页面交互，请直接使用browser.driver访问webdriver实例 来自 另一种方法是在

我发现了为AngularJS web应用程序设计的量角器框架

如何在不使用AngularJS的网站上使用量角器

我编写了第一个测试，量角器触发了以下消息：

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded
如果测试需要与非角度页面交互，请直接使用
browser.driver
访问webdriver实例

来自

另一种方法是在browser.get（…）之前设置
browser.ignoreSynchronization=true
。量角器不会等待角度加载，您可以使用常用的元素（…）语法

代替量角器，您可以使用e2e测试
优点：

  • ES2016语法
  • 不需要额外的依赖项、配置和浏览器插件
  • 灵活选择器
  • 简易安装
若要在非角度站点上进行测试，应移除同步。对于该用途，请执行以下操作：

browser.ignoreSynchronisation = true;
browser.get('url');
就我个人而言，由于DOM元素没有及时正确加载，我没有成功地提出解决方案

我尝试了许多处理异步行为的方法，包括browser.wait和browser.isElementPresent，但没有一种是令人满意的

诀窍是使用量角器返回onPrepare方法中的承诺：

onPrepare: () => {

    browser.manage().window().maximize();

    browser.waitForAngularEnabled(true).then(function () {
        return browser.driver.get(baseUrl + '/auth/');
    }).then(function () {
        return browser.driver.findElement(by.name('login')).sendKeys('login');
    }).then(function () {
        return browser.driver.findElement(by.name('password')).sendKeys('password');
    }).then(function () {
        return browser.driver.findElement(by.name('submit')).click();
    }).then(function () {
        return true;
    });

    return browser.driver.wait(function () {
        return browser.driver.getCurrentUrl().then(function (url) {
            return /application/.test(url);
        });
    }, 10000);
},
我的灵感来自于现在应该使用waitForAngular而不是弃用的ignoreSynchronization属性

以下waitForAngular指南摘自量角器超时文件：

如何禁用等待角度设置

如果需要导航到不使用Angular的页面，可以通过设置“browser.waitForAngularEnabled（false）”关闭等待Angular。例如：

browser.waitForAngularEnabled(false);
browser.get('/non-angular-login-page.html');

element(by.id('username')).sendKeys('Jane');
element(by.id('password')).sendKeys('1234');
element(by.id('clickme')).click();

browser.waitForAngularEnabled(true);
browser.get('/page-containing-angular.html');
在.js规范文件中添加以下代码段

beforeAll(function() {
    browser.waitForAngularEnabled(false);
});
在conf.js文件中添加以下代码

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }
在某些情况下，为了避免错误，需要将这两个值相加

 browser.driver.ignoreSynchronization = true;
 browser.waitForAngularEnabled(false);
您可以将它们添加到spec.js文件中

describe('My first non angular class', function() {
    it ('My function', function() {
        browser.driver.ignoreSynchronization = true;
        browser.waitForAngularEnabled(false);
或者按照@Mridul的建议，将它们添加到config.js文件中

describe('My first non angular class', function() {
    it ('My function', function() {
        browser.driver.ignoreSynchronization = true;
        browser.waitForAngularEnabled(false);
exports.config={ directConnect：没错， 框架：“茉莉花”

  onPrepare: function () {
         browser.driver.ignoreSynchronization = true;// for non-angular set true. default value is false 
         browser.waitForAngularEnabled(false);   // for non-angular set false. default value is true  
       },
为非角度应用程序添加以下代码段：

app- browser.ignoreSynchronization = true;
在非角度应用程序的config.js文件中使用以下代码段-

browser.ignoreSynchronization = true;
用于角度应用-

browser.ignoreSynchronization = false;
我正在开发一个web应用程序，它是一个类似Angular、React的FE框架。在此，我使用量角器实现自动化

我的项目中的哪个技术堆栈：-

  • 量角器
  • 打字稿
  • 页面对象模式
  • 黄瓜
  • 柴
  • 节点
  • npm
  • VS代码（IDE）
主要的更改只发生在配置文件中，如果有帮助的话，我可以添加代码，下面是我在项目中使用的配置文件，它非常适合我。 在我的博客里也发了一些博客，希望能对大家有所帮助

const reporter = require('cucumber-html-reporter');
exports.config = {
    SELENIUM_PROMISE_MANAGER: false,
    directConnect: true,
    specs: ["./e2e/features/*/EndToEnd.feature"],
    format: 'json:cucumberReport.json',
    framework: 'custom',
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    cucumberOpts: {
        strict: true,
        format: 'json:cucumberReport.json',
        keepAlive: false,
        require: [
            './e2e/hooks/*.ts',
            './e2e/stepDefinition/*/*.ts',
        ],
       tags: '@Regression'
    },
    beforeLaunch: function () {
        require('ts-node/register')
    },
    onPrepare: async () => {
        await browser.waitForAngularEnabled(false);
        await browser.ignoreSynchronization == true;
        await browser.manage().window().maximize();
        await browser.manage().timeouts().implicitlyWait(10000);
     },
    onComplete: async () => {
         var options = {
            theme: 'bootstrap',
            jsonFile: './reports/cucumberReport.json',
            output: './reports/cucumberReport.html',
            reportSuiteAsScenarios: true,
            launchReport: false,
            screenshotsDirectory: './reports/screenshots',
            storeScreenshots: true,
            metadata: {
                "Test Environment": "SAND-DEV-1",
                "Platform": "Windows 10",
            }
        };
        reporter.generate(options);
    },
};
忘记
ignoreSynchronization
！！！它不再存在于从量角器
5.3.0开始的量角器中

应改用
browser.waitForAngularEnabled（false）

逐步说明如何使用它
量角器内置了等待角度的处理，这就是它的不同之处。但是，如果页面不是角度，量角器将挂起，直到它遇到超时错误，因此您需要禁用该功能以测试非角度页面。当页面是角度时，还有一个边缘情况，但此功能仍将使量角器变为角度出错。请执行以下步骤，以确定何时禁用量角器等待测角


  • 查看您的页面是否有角度：在浏览器和“console”选项卡运行命令的内部打开开发人员控制台
    • 
如果输出为
    getAllAngularTestabilities未定义
    ，则页面没有角度，请转到最后一步禁用内置等待
    

  • 在控制台中运行这些命令
    • 
如果其中任何一个返回
    true
    （如果有微任务或宏任务挂起），则转到最后一步。如果所有返回
    false
    ，恭喜，您可以使用内置量角器等待角度。但是如果您不喜欢它，请阅读最后一步，了解如何禁用它
    

  • 运行上述命令。但是！它返回一个承诺，需要处理，最好使用
    await
    关键字
    • 
此命令可以在任何地方运行：在
    it
    块中，在
    beforeAll
    中，或在配置的
    onPrepare
    中。只要确保，如果使用
    wait
    使相应的块
    异步
    

    beforeAll(async () => await browser.waitForAngularEnabled(false))

    

    我喜欢这种在整个测试套件中保持代码一致性的方法。这无疑是处理非角度量角器时的最佳方法。这里有一个解释更多内容的方法。对于搜索E2E的人，还有，，@Andrei，pageObjects呢。当我在功能块外声明元素并尝试运行t正在向我显示NoTouchElementError代码段：this.ButtonNonLeftSide=browser.driver.findElement（by.className（'leftbutton'）；this.iframe='emulatorFrame'；this.clickPlusSignOnTemplateEditor=function（）{browser.driver.ignoreSynchronization=true；console.log（'hey'）；browser.driver.switchTo（）.frame（this.iframe）；console.log（'inside iframe'）；browser.sleep（3000）；按钮非左侧。单击（）；}；把它放在这里，以防有人像我一样有同样的问题。请注意这种方法，它很好，但如果你想快速失败。虽然测试失败，但你可能会在某些情况下/环境中永远运行。我在单击提交按钮后有jasmine.DEFAULT\u TIMEOUT\u间隔。有什么想法吗？只是一个愚蠢的问题，has
    by.id
    ch通过.id
    ？@Val-global.By=global.By=gradutor.By；（来源-）如何通过类和非角度站点的其他方式查找元素？@EaswaramoorthyK
    By.className
    。请参考亲爱的@mlosev，这并不能直接回答问题。 
    getAllAngularTestabilities()

    getAllAngularTestabilities()[0]._ngZone.hasPendingMacrotasks
getAllAngularTestabilities()[0]._ngZone.hasPendingMicrotasks

    await browser.waitForAngularEnabled(false)

    beforeAll(async () => await browser.waitForAngularEnabled(false))