如何在非angularjs网站上使用Protractor?


82

我发现了针对AngularJS Web应用程序制作的Protractor框架。

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

我写了我的第一个测试,量角器触发此消息:

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

Answers:


75

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

量角器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();

2
只是一个愚蠢的问题,by.id变成了By.id
2014年

7
@Val-global.by = global.By =量角器。(源- github.com/angular/protractor/commit/...
埃坦同伴

如何按类和非角度站点的其他方式查找元素?
Easwaramoorthy K,

@EaswaramoorthyK by.className。参考文档
Murali KG

130

另一种方法是browser.ignoreSynchronization = true browser.get(...)之前设置。量角器不会等待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();

5
我喜欢这种方法,以使代码在整个测试服中保持一致。
2014年

4
当与非角度量角器打交道时,这绝对是最好的方法。有一篇有关此内容的博客文章,介绍了更多内容。对于那些寻访E2E,这里还有nightwatch.js实习生casperjswebdriver的
西罗科斯塔

1
@Andrei pageObjects怎么样。当我在功能块之外声明元素并尝试运行它时,向我显示NoSuchElementError代码段:this.buttonOnLeftSide = 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); buttonOnLeftSide.click(); };
尼克

只要把它放在这里,以防有人遇到像我一样的问题。请注意这种方法,这很好,但是如果您想快速失败。尽管测试失败,但是您的测试在某些情况/环境中可能会永远运行。
琳·范

我单击提交按钮后,我有jasmine.DEFAULT_TIMEOUT_INTERVAL。任何的想法?
ji-ruh,2016年

16

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

它的行为是越野车
Muneem Habib

2

要在非角度站点上进行测试,应删除同步。为此,请使用以下命令:

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

2

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

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

在第二种方法中,假设您没有角度脚本。
Sameera De Silva

1

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

我尝试了许多处理异步行为的方法,包括使用browser.isElementPresent的browser.wait,但没有一个令人满意。

诀窍是使用onPropare中的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


1
不应该是browser.waitForAngularEnabled(false)而不是true吗?
onluiz


1

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

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


0

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

browser.ignoreSynchronization = true;

对于角向应用-

browser.ignoreSynchronization = false;

0

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

Tech Stack我的哪个项目:-

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

-5

代替Protractor,您可以使用e2e测试Testcafe
优点:

  • ES2016语法
  • 无需其他依赖项,配置和浏览器插件
  • 灵活的选择器
  • 设置简单

6
亲爱的@mlosev,这不能直接回答问题。问题是“如何使用保护程序...”而不是“我应该使用哪个库而不是保护程序” :-)
Abdelkrim
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.