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

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

score 129 · Accepted Answer

另一种方法是在browser.get(...)browser.ignoreSynchronization = true 之前设置。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();

score 76 · Accepted Answer

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

量角器文档中的示例

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

score 17 · Accepted Answer

现在应该使用 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');

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

browser.waitForAngularEnabled(false)应改为使用

逐步说明如何使用它

Protractor has builtin handling of waiting for angular and this is what makes it different. However, if the page is not angular protractor will hang until it hits timeout error, so you need to disable that feature in order to test non-angular page. There is also an edge case, when the page is angular, but this feature will STILL make protractor error out. Perform the steps below, to find out when to disable protractor's waiting for angular

Find out if your page is Angular: open dev console in the browser and inside of 'console' tab run command

getAllAngularTestabilities()

If the output is getAllAngularTestabilities is not defined, then your page is not angular, go to the last step to disable built-in waiting

Run these commands in the console

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

If any of these return true (if there are micro or macro tasks pending), then go to the last step. If all are false, congrats, you can use the builtin protractor's waiting for angular. But if you don't like it as I don't, then read the last step to find out how to disable it

Run the above mentioned command. BUT! It returns a promise, which needs to be handled, preferably using await keyword

await browser.waitForAngularEnabled(false)

This command can be ran anywhere: in the it block, in beforeAll, or in onPrepare of your configuration. Just make sure, if you use await to make the respective block async

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

score 2 · Accepted Answer

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

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

export.config = { directConnect：true，框架：'jasmine'，

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

score 1 · Accepted Answer

就个人而言，由于 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的启发

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

   onPrepare: function () {
       browser.ignoreSynchronization = true;      
   }

score 1 · Accepted Answer

1

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

app- browser.ignoreSynchronization = true;

于 2020-01-02T05:22:40.443 回答

score 0 · Accepted Answer

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

browser.ignoreSynchronization = true;

对于角度应用 -

browser.ignoreSynchronization = false;

score 0 · Accepted Answer

我正在开发aurelia web-app，它是一个类似于 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);
    },
};

score -5 · Accepted Answer

代替 Protractor，您可以使用Testcafe进行 e2e 测试。
优点：

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

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

13 回答 13

逐步说明如何使用它

Related

Reference