Question

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

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

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

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

Answer 1

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

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

Answer 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();

Answer 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');

Answer 4

忘记ignoreSynchronization！！！它不再存在于从量角器 5.3.0

开始的量角器中

browser.waitForAngularEnabled(false) 应改为使用

分步说明如何使用它

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

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

getAllAngularTestabilities()

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

在控制台中运行这些命令

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

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

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

await browser.waitForAngularEnabled(false)

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

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

Answer 5

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

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

Answer 6

在您的.js规范文件中添加以下代码段

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

Answer 7

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

mix release

Answer 8

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

 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 = { 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  
       },

Answer 9

为非角度应用添加以下代码段：

app- browser.ignoreSynchronization = true;

Answer 10

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

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

使用Protractor从onPrepare中的方法返回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

的启发

Answer 11

将config.js文件中的以下代码段用于非角度应用程序-

browser.ignoreSynchronization = true;

以及用于角度应用-

browser.ignoreSynchronization = false;

Answer 12

我正在开发aurelia网络应用，这是一个类似于Angular和React的FE框架。在此，我使用量角器进行自动化。

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

量角器
打字稿
页面对象模式
黄瓜
柴
节点
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);
    },
};

Answer 13

您可以使用e {{}来测试Testcafe，而不是Protractor。
优点：

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

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

13 个答案:

分步说明如何使用它