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

Posted 2023-02-22

【中文标题】如何在非 angularjs 网站上使用量角器？

【英文标题】：how to use Protractor on non angularjs website?

【发布时间】：2014-01-22 12:57:13

【问题描述】：

我找到了为 AngularJS Web 应用程序设计的 Protractor 框架。

如何在不使用 AngularJS 的网站上使用 Protractor？

我写了我的第一个测试，Protractor 触发了这条消息：

Error: Angular could not be found on the page https://www.stratexapp.com/ : retries looking for angular exceeded

【参考方案1】：

另一种方法是设置browser.ignoreSynchronization = true before browser.get(...)。 Protractor 不会等待 Angular 加载，您可以使用通常的 element(...) 语法。

browser.ignoreSynchronization = true;
browser.get('http://localhost:8000/login.html');

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

【讨论】：

我喜欢这种在测试套件中保持代码一致的方法。

这绝对是处理非角度量角器的最佳方法。上面有一个blog post，它解释了更多的东西。对于那些搜索E2E的人，还有nightwatch.js、intern、casperjs、webdriver

@Andrei pageObjects 怎么样。当我在功能块之外声明元素并尝试运行它时，它向我显示 NoSuchElementError 代码 sn-p: this.buttonOnLeftSide= browser.driver.findElement(by.className('leftbutton')); this.iframe='emulatorFrame'; this.clickPlusSignOnTemplateEditor= function() browser.driver.ignoreSynchronization = true; console.log('嘿'); browser.driver.switchTo().frame(this.iframe); console.log('inside iframe'); browser.sleep(3000); buttonOnLeftSide.click(); ;

把它放在这里，以防有人遇到和我一样的问题。请注意这种方法，它很好，但如果您想要 fast-fail。尽管测试失败，但在某些情况/环境下，您的测试可能会永远运行。

我在点击提交按钮后拥有 jasmine.DEFAULT_TIMEOUT_INTERVAL。有什么想法吗？

【参考方案2】：

如果您的测试需要与非角度页面交互，请直接使用 browser.driver 访问 webdriver 实例。

来自Protractor docs的示例

browser.driver.get('http://localhost:8000/login.html');

browser.driver.findElement(by.id('username')).sendKeys('Jane');
browser.driver.findElement(by.id('password')).sendKeys('1234');
browser.driver.findElement(by.id('clickme')).click();

【讨论】：

只是一个愚蠢的问题，by.id 是否已更改为 By.id？

@Val - global.by = global.By = protractor.By; （来源 - github.com/angular/protractor/commit/…）

如何按类和其他方式查找非角站点的元素？

@EaswaramoorthyK by.className 。参考docs

【参考方案3】：

现在应该使用waitForAngular 而不是弃用的ignoreSynchronization 属性。

以下 waitForAngular 指南摘自 Protractor 文档以了解超时：

如何禁用等待 Angular

如果您需要导航到不使用 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');

【讨论】：

它的行为有问题

【参考方案4】：

要在非角度站点上进行测试，您应该删除同步。为此使用以下内容：

browser.ignoreSynchronisation = true;
browser.get('url');

【参考方案5】：

忘记ignoreSynchronization!!!从量角器5.3.0开始，它不再存在于量角器中

应该改用browser.waitForAngularEnabled(false)

逐步说明如何使用它

Protractor 内置了等待角度的处理，这就是它与众不同的原因。但是，如果页面不是角度量角器，则会挂起，直到遇到超时错误，因此您需要禁用该功能才能测试非角度页面。还有一个边缘情况，当页面有角度时，但这个功能仍然会导致量角器错误。执行以下步骤，找出何时禁用量角器等待角度

确定您的页面是否为 Angular：在浏览器中打开开发控制台并在“控制台”选项卡中运行命令

getAllAngularTestabilities()

如果输出是getAllAngularTestabilities is not defined，那么你的页面不是有角度的，去最后一步禁用内置等待

在控制台中运行这些命令

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

如果其中任何一个返回true（如果有微任务或宏任务待处理），则转到最后一步。如果都是false，恭喜，你可以使用内置量角器的等待角。但是，如果您不喜欢它，我不喜欢它，请阅读最后一步以了解如何禁用它

运行上述命令。但！它返回一个promise，需要处理，最好使用await关键字

await browser.waitForAngularEnabled(false)

此命令可以在任何地方运行：在it 块中、beforeAll 或onPrepare 中的配置。只要确保，如果您使用await 来制作相应的块async

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

【参考方案6】：

在某些情况下，为避免错误需要同时添加两个值。

 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 文件中。

exports.config = 直接连接：真， 框架：'茉莉花'，

  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  
       ,

【讨论】：

在第二种方法中假设你没有角脚本。

【参考方案7】：

就我个人而言，由于 DOM 元素没有及时正确加载，我提出的解决方案没有取得任何成功。

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

诀窍是在 onPrepare 中使用 Protractor 从其方法返回的 Promises ：

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

我的灵感来自https://github.com/angular/protractor/blob/master/spec/withLoginConf.js

【讨论】：

不应该是 browser.waitForAngularEnabled(false) 而不是 true 吗？

【参考方案8】：

在您的 .js 规范文件中添加以下 sn-p

beforeAll(function() 
    browser.waitForAngularEnabled(false);
);

【参考方案9】：

在 conf.js 文件中添加以下代码

   onPrepare: function () 
       browser.ignoreSynchronization = true;      
   

【参考方案10】：

在sn-p下面添加非角度应用：

app- browser.ignoreSynchronization = true;

【参考方案11】：

在你的 config.js 文件中使用下面的 sn-p 用于非 Angular 应用程序-

browser.ignoreSynchronization = true;

对于角度应用 -

browser.ignoreSynchronization = false;

【参考方案12】：

我正在开发aurelia web-app，这是一个类似于 Angular、React 的 FE 框架。在这个我使用量角器进行自动化。

Tech Stack 我的哪个项目：-

量角器 打字稿 页面对象模式 黄瓜 柴 节点 npm VS 代码 (IDE)

主要更改仅发生在配置文件中，如果有帮助，我可以在github 中添加代码，这是我在项目中使用的配置文件，非常适合我。 在我的wordpress 也发了一些博客，希望能有所帮助。

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

【参考方案13】：

您可以使用Testcafe 代替量角器进行e2e 测试。 优点：

ES2016 语法 不需要额外的依赖、配置和浏览器插件 灵活的选择器 轻松设置

【讨论】：

亲爱的@mlosev，这并不能直接回答这个问题。问题是“如何使用保护器......”而不是“我应该使用哪个库而不是保护器”:-)