Angular 코드가 페이지에 포함되어 있습니까? shim, bootstrap 및 기타 항목이 필요한 것 같지만 angular.min.js 이 표시되지 않습니다.

'app': {
            deps: ['libraries/angular', 'libraries/angular-resource', 'libraries/angular-strap']
        },

위의 스니펫은 shim{} 요소 내부에 있습니다. 저와 별로 관련이 없는 것 같아서 스니펫에서 제외했습니다. 그러나 이것이 angular.js가 로드되는 방식입니다.

안녕,

예, 각도기는 현재 ng-app을 예상하므로 수동으로 부트스트랩된 사이트에는 문제가 있습니다. 이 문서에 대한 해결 방법이 곧 문서화되기를 바랍니다.

업데이트를 위한 확인 thx. 해결 방법을 찾았으면 이 문제에 게시할 수 있습니까?

응답이 느려서 죄송합니다. 다음을 수행하여 수정할 수 있어야 합니다.

describe('List SMC Charts', function() {
        var ptor= protractor.getInstance();

        beforeEach(function() {
          ptor.driver.get('#/smcChart'); // Just use the plain old webdriver here, it won't complain if Angular isn't loaded yet.
        });

        it('list, no filter', function() {
          var selectOption = ptor.findElement(ptor.By.input("selectOption"));
        });
});

ptor 변수를 어딘가에 설정했습니까? 예: var ptor = protractor.getInstance() ?

이에 대한 업데이트가 있습니까? 제안한 수정 사항이 작동하지 않습니다(각도기@0.10.0, 각도@1.0.7).

각도가 아닌 로그인 화면과 수동으로 부트스트랩된 앱이 있는 requirejs의 어색한 조합이 있습니다.

describe('User levels', function() {
    var ptor, driver;

    var findByName = function (name) {
        return driver.findElement(protractor.By.name(name));
    };

    describe('Editors', function() {
        ptor = protractor.getInstance();
        driver = ptor.driver;
        it('Can log in', function() {
            driver.get('http://localhost:8000/');
            findByName('login').sendKeys('test_editor');
            findByName('pass').sendKeys('rubbish');
            driver.findElement(protractor.By.css('button[type="submit"]')).click();
        }, 20000);

        it('Shows the homepage', function() {
            var el = ptor.findElement(protractor.By.css('h1[field="pageTitle"]'));
            expect(el.getText()).toEqual('Welcome to Home');
        }, 30000);

    });
});

그리고 내 main.js :

require([
    'angular',
    'app'
], function (angular, app) {
    'use strict';
    var body = document.body, name = app.name;
    body.setAttribute('ng-app', name);
    body.setAttribute('id', 'ng-app');
    angular.bootstrap(body, [name]);
});

로그인 부분이 작동하고 UnknownError: javascript error: angular is not defined 로 각도기 오류가 발생하기 전에 보호된 페이지가 로드되는 플래시를 볼 수 있습니다. driver.get('...') 및 ptor.get('...') 로 페이지를 다시 로드하려고 시도했지만 아무 것도 작동하지 않습니다.

모든 힌트/조언/수정 감사히 받았습니다.

@magnetised 다른 테스트를 시도하기 전에 로그인이 완료될 때까지 기다리라고 테스트에 알리는 방법이 필요합니다. Angular가 페이지에 로드되기 전에 ptor.findElement를 사용하려고 하는 것 같습니다.

'로그인 가능' 사양은 앱의 일부 조건을 확인하는 대기 문으로 끝나야 합니다. 여기에서 예제를 확인하십시오 - https://github.com/angular/protractor/blob/master/spec/login/viaConfigConf.js

@juliemr 훌륭합니다. 완벽하게 작동합니다.

각도기가 "각도가 로드될 때까지 대기"를 수행한다는 것을 이해했지만 모든 경우를 다룰 수는 없는 것 같습니다.

다시 한번 감사합니다.

나는 정확히 같은 설정을 가지고 있습니다. @juliemr 솔루션을 공유하시겠습니까? 당신의 대기 조건은 무엇입니까? 감사 해요!

@jorgenfb 저 댓글이 저를 겨냥한 것인지 궁금합니다.

내 솔루션은 앵귤러 라우터가 부팅되고 로그인 시스템이 리디렉션하는 베어 '/'에서 기본 경로(이 경우 '/#view')로 URL을 변경하기를 기다리는 것과 관련되었습니다.

모든 테스트에서 재사용할 수 있는 함수로 만들었습니다.

var waitUntilLoaded = function() {
    ptor.wait(function() {
      return ptor.driver.getCurrentUrl().then(function(url) {
        return /view/.test(url);
      });
    });
};

이것이 당신에게 효과가 있을지 모르겠지만 라우팅 구성에 따라 다릅니다.

@juliemr 감사합니다, 매력처럼 작동합니다 :)

Angular가 매우 평범하게 로드되어 실행 중임에도 불구하고 각도기가 Angular를 찾지 못하는 비슷한 문제가 있습니다(SO: http://stackoverflow.com/questions/19391813/protractor-fails-to-find-angular). 쉬운 솔루션(Angular를 찾으려고 시도하지 않고 테스트)이 우리가 가야 할 방향입니까? Angular 앱을 테스트하기 위해 특별히 제작된 Protractor의 목적을 무너뜨리는 것 같습니다.
편집: 또한 이 문제에서 제안된 솔루션이 저에게 적합하지 않다는 점에 유의해야 합니다.

더 나은 각도의 수동 부트스트랩 문서화를 위해 +1

이것은 여전히 ​​관련이 있습니까?

그 이후로 시도를 포기했고 다시 돌아가서 무언가가 변경되었는지 확인할 시간이 없기 때문에 솔직히 잘 모르겠습니다. 그 이후로 버전 변경 사항을 고려할 때 이것을 닫으려는 경우 논쟁하지 않을 것입니다. 나중에 언제든지 다시 열 수 있습니다.

저는 오늘 방금 각도기를 사용하기 시작했고 우리 앱은 require.js를 사용합니다... 수동으로 부트스트랩되는 애플리케이션을 테스트하는 것과 관련하여 업데이트가 있다면 우선 관심이 있습니다. :-)

같은 문제가 있습니다. Angular 앱 외부에 로그인 페이지가 있는 애플리케이션이 있습니다. 이전 의견의 해결 방법은 오래된 것 같습니다. 그런 종류의 시나리오를 테스트할 수 있는 방법에 대한 업데이트된 문서를 매우 원합니다.

@hankduan 네, 그렇게 생각합니다.

저는 지금 이 문제로 어려움을 겪고 있습니다. 배경은 비슷합니다. RequireJS를 통해 종속성을 관리하는 더 큰 응용 프로그램이 있습니다.

window.name='NG_DEFER_BOOTSTRAP!'; & angular.resumeBootstrap() 를 사용하여 이미 앱을 업데이트했지만 여전히 작동하지 않습니다.

이 말을, 나는 다음에 무엇을해야할지 모르겠다. 추가 조사를 위해 https://github.com/knalli/protractor-with-deferred-bootstrap 에서 테스트 케이스를 설정했습니다.

• git clone https://github.com/knalli/protractor-with-deferred-bootstrap.git
• cd protractor-with-deferred-bootstrap
• npm install
• npm run-script webdriver (셀레늄 서버)
• npm run-script server (미니 AJS 앱을 제공하는 데모 앱 서버)
• npm run-script e2e-test (각도기 실행...)

결과는

Using the selenium server at http://localhost:4444/wd/hub
Login: Click
Login: Waiting...
A Jasmine spec timed out. Resetting the WebDriver Control Flow.
The last active task was: 
unknown
F

Failures:

뒤이어

UnknownError: unknown error: [ng:btstrpd] App Already Bootstrapped with this Element '

마지막 오류는 약간 이상하고 오해의 소지가 있기까지 합니다. 테스트가 수행되었습니다(예상이 정상이고 브라우저에서 볼 수 있는 한 성공적임).

교차 확인: 데모 앱을 수동 포함을 사용하여 지연되지 않은 부트스트래핑으로 전환하면(이 변형은 no-deferred 분기에서 사용 가능) 성공적으로 작동합니다.

나는 이미 소위 "해결책"을 시도했습니다.

1. http://www.sebdangerfield.me.uk/2014/01/angularjs-protractor-app-already-bootstrapped-error/
   관련이 없거나 오해의 소지가 있습니다. --> 차이가 없습니다.
2. https://github.com/angular/protractor/issues/325#issuecomment -36738048 protractor.getInstance() 및 ignoreSynchronization 사용 --> 차이 없음
3. https://github.com/angular/protractor/issues/325#issuecomment -30701683 패치 clientSideScripts.js/waitForAngular --> 차이 없음

어제 첫 각도기 테스트를 작성했고 knalli와 같은 문제가 있었습니다.

@knalli 예제를 작성해 주셔서 감사합니다. 몇일뒤에 봐야겠다

그래서 내 각도기는 모든 작업을 테스트합니다(하나의 실패를 제외하고는 내 잘못입니다 :-P ).
이것이 도움이 되는지 여부를 알려주십시오.
내 설정은 다음과 같습니다.

각도기 버전:
버전 1.0.0-rc4
셀레늄 독립 실행형:
최신입니다
크롬 드라이버:
최신입니다

확실히 관련이 있는 파일:

구성

/*jshint expr: true*/
/*global browser: true*/
var TEST_DIR =  '../tests/';
exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub'
,  specs : [     '../tests/e2e/_protractor.js'       ]
,  capabilities: {'browserName': 'chrome'    }
,  chromeDriver: './chromedriver'  // <---- I remember not being able to get chromedriver working 
                                                    // for some reason, so I just downloaded the executable and put it
                                                    // in my config directory
,  onPrepare: function() {
    "use strict";
    browser.driver.get('http://localhost:5000/register');
    browser.driver.wait(function() {
      return browser.driver.getCurrentUrl().then(function(url) {
        return /\#\/registration/.test(url);
      });
    });
  }
    //  chromeOnly: true,
    //  baseUrl: 'http://localhost:5000/register'
,  jasmineNodeOpts: {
    showColors: true
  }
};

_각도기.js

/*jshint expr: true, undef: true */
/* global element: true, by: true, browser: true, model:true */
(function(){
  "use strict";

var RegistrationPage = function(){
  browser.driver.wait(function() {
    return browser.driver.getCurrentUrl().then(function(url) {
      return /\#\/registration/.test(url);
    });
  });
};
  var account = new RegistrationPage();

  account.elem = element.all(by.name('account_exists'));
  account.accountNumber = element(by.name('account_number'));
  account.submitAccountButton = element(by.css('#account_input button'));

  account.selectHasAccount = function(){
    account.elem.get(0).click();
    return browser.getCurrentUrl();
  };

  account.enterAccountNumber = function(keys){

    account.selectHasAccount().then(function(){
      account.accountNumber.sendKeys(keys);
      return account.submitAccountButton.click()
        .then(function(){
          return browser.getCurrentUrl();
      });
      //this wont log because already returned ^
//      console.log('need to return again');
    });
  };
  account.noAccount = function(){
    account.elem.get(1).click();
  };

describe('registration page', function() {
  it("will survive", function(){
    var registrationPage = new RegistrationPage()
    , title = browser.getTitle();
    expect(title).toBe('Web Shop | Homepage');
  });
  it('will change route on account_exists radiobox click', function(){
    var elem = element.all(by.name('account_exists'))
    , _url;
    elem.get(0).click()
    .then(function(){
      _url = browser.getCurrentUrl().then(function(_url){
        expect(_url).toBe('http://localhost:5000/register#/registration/has');
      });
    })
    .then(function(){
        elem.get(1).click().then(function(){
          _url = browser.getCurrentUrl();
          expect(_url).toBe('http://localhost:5000/register#/registration/no');
        });
      });
  });
  describe('navigate the hasAccount path:', function(){
    it('will click hasAccount which will cause a route change.', function () {
      expect(account.selectHasAccount()).toBe('http://localhost:5000/register#/registration/has');
    });
    it("will submit a valid account number", function(){
      expect(account.enterAccountNumber('1231231231')).toBe('http://localhost:5000/register#/user');
    });
  });
  it('will click noAccount which will cause a route change.', function () {
    var  _url;
    account.noAccount();
    _url = browser.getCurrentUrl();
    expect(_url).toBe('http://localhost:5000/register#/registration/no');
  });
});
})();

필요/main.js:

var pathToJQuery
if('querySelector' in document
  && 'localStorage' in window
  && 'addEventListener' in window) {
  //ie9+ and all browsers
  pathToJQuery = 'lib/jquery/dist/jquery'
} else {
  //ie8 and ie7
  pathToJQuery = 'lib/jquery-1.7.2.min'
}
requirejs.config({

      paths : {

//        Paths

          "reg": 'js/registration'
        , "com": 'js/common'
        , "init": 'js/init'
        , "regD": 'js/registration/directives'
        , "regC": 'js/registration/controllers'
        , "regS": 'js/registration/services'
        , "regM": 'js/registration/modules'
//
//        Frameworks
        ,  "angular": "lib/angular/angular"
        ,  "angular.animate" : "lib/angular-animate/angular-animate"
        ,  "jquery": pathToJQuery   //< = == v    long story; don't judge me.
        ,  "jqueryMigrate" : "lib/jquery-migrate/jquery-migrate"
        ,  "mocks": "lib/angular-mocks/angular-mocks"
        ,  "ui_router": "lib/angular-ui-router/release/angular-ui-router"
        ,  "Q": "lib/q/q"

//        Init
        ,  "apps_init" : 'js/init/apps_init'
        ,  "apps_bootstrap" : 'js/init/apps_bootstrap'
//        ,  "jquery_bootstrap" : 'js/init/jquery_bootstrap'
        ,  "registration": "js/init/registration"

//       Common

//         Registration
        ,  "registration": "js/registration/registration"
//         Controllers
        ,  "account.controller" : 'js/registration/controllers/account.controller'
        ,  "user.controller" : 'js/registration/controllers/user.controller'
//         Directives
        ,  "account.directive" : 'js/registration/directives/account.directive'
//    Services
        , "user.service" : "js/registration/services/user.service"
    }
,     shim: {
        'angular': {
            exports : 'angular'
        }
    ,   'angular.animate' : {deps: ['angular']}
    ,   'jqueryMigrate' : {deps: ['jquery']}
    ,   'ui_router' : ['angular']
    ,   'mocks': { deps: ['angular'], 'exports': 'angular.mock' }
}
});

if( pathToJQuery ===  'lib/jquery/dist/jquery' ){
  requirejs([
        'angular' , 'jquery' , 'jqueryMigrate', 'init/jquery_bootstrap', 'init/apps_bootstrap' ]
      , function(angular, jquery, jquery_bootstrap, apps_bootstrap) {
      }
  );
} else {
  requirejs([
      'angular' , 'jquery' , 'jqueryMigrate', 'init/jquery_bootstrap', 'init/apps_bootstrap' ]
    , function(angular, jquery, jqueryMigrate, jquery_bootstrap, apps_bootstrap) {
    }
  );
}
console.log("working");

잠재적으로 유용한 파일:

기본 보기(핸들바)

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org"
            xmlns:fab="http://angularjs.org"
            xmlns:ui ="http://angularjs.org"
            lang = "en" class = "no-js" >
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" media="all" href="/images/favicon.ico" />
<script type="text/javascript" src="lib/modernizr.js"></script>

<!-- Default ie theme files:-->
<!--[if lte IE 9]><script type="text/javascript">console = {}; console.log = function(){};</script><![endif]-->
<!--[if IE 8]><link type="text/css" rel="stylesheet" href="build/css/ie8/theme.css" /><![endif]-->

<!--[if IE 7]><link type="text/css" rel="stylesheet" href="build/css/ie7/theme.css" /><![endif]-->

<!-- Normal styles -->
<link type="text/css" href="css/style.css" rel="stylesheet">


<!--[if IE 8]> <link type="text/css" rel="stylesheet" href="build/css/ie8/ie_8.css"  /> <![endif]-->
<!--[if IE 7]> <link type="text/css" rel="stylesheet" href="build/css/ie7/lte_ie7.css"/> <link type="text/css" rel="stylesheet" href="build/css/ie7/ie_7.css" /><![endif]-->


<script data-main="main" src="lib/requirejs/require.js"></script>
</head >

<body class = "page-homepage language-en" >
<div id = "wrapper" >
    <div id = "page" data-currency-iso-code = "USD" >
        {{> _header}}
        <a href = "#skip-to-content" class = "skiptocontent" >Skip to content</a >
        <a href = "#skiptonavigation" class = "skiptonavigation" >Skip to navigation menu</a >
    <!--[if lte IE 10]> <p class="browsehappy" style="margin-top: 10px; ">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p><![endif]-->
    <main ng-cloak id = "content" role = "main" class = "page_main <!--[if IE7]>ng-cloak<![endif]-->" >

        </main>
    </div >
</div >
</body >

</html >

controller.js(서버 구성)

(function(){
    "use strict";

    //  node requires
    //==============================
    // express-hbs
    // express
    //
    const express = require('express')
        , portN = 5000
        , hbs = require('express-hbs')
        , app = express()
        , path = require('path')
        , Server = require('./server')
        , bodyParser = require('body-parser')
        , serveStatic = require('serve-static')
        , session = require('express-session')

    , router = express.Router()
    , logger  = require('morgan')
        , methodOverride = require('method-override')
        , errorhandler = require('errorhandler')


    //  view paths
    //==============================
    //
    //
    //
        , viewsD = __dirname + '/views/'
        , partialsD = viewsD + 'partials/'
        , layoutsD = viewsD + 'layouts/'
        , testsD =  __dirname + '/tests/'
    , publicD = __dirname + '/public/'
    , styleguideD = publicD+ '/styleguide/'
        , defaultF = layoutsD + 'default.hbs';
    //  Express setup.
    //==============================
    //
    //
    //
    app.use(express.static(publicD))
            .use(bodyParser())
            .use(logger('dev'))
            .use(methodOverride())
            .use(serveStatic(path.join(__dirname, 'public')))
            .use(errorhandler());

    app.set('view engine', 'hbs')
            .set('port', process.env.PORT || portN)
            .set('cache', false)
            .set('views', viewsD);

    app.engine('hbs', hbs.express3({
        partialsDir: partialsD,
        defaultLayout: defaultF,
        layoutsDir: layoutsD
    }));

    var indx = {};

    app.get( '/' ,function (req, res) {
        res.render(partialsD + '_home.hbs', indx);
    });

    app.get( '/register' ,function (req, res) {
        res.render(partialsD + '_register.hbs', indx);
    });

    new Server(app);

})();

서버.js

module.exports = function(app){
  "use strict";
    var http = require('http');
    http.createServer(app).listen(app.get('port'), function(){
        console.log('Express server listening on port ' + app.get('port'));
    });
};


module.exports = function (app) {
    "use strict";
    var http = require ('http');
    http.createServer (app).listen (app.get ('port'),function () {
        console.log ('Express server listening on port ' + app.get ('port'));
    }).on ('error', function (e) {
        console.log ("got error: " + e.message);
    });
};

package.json(관련 발췌문)

"dependencies": {
    "body-parser": "^1.2.1",
    "bower": "^1.3.2",
    "errorhandler": "^1.0.1",
    "express": "^4.3.1",
    "express-hbs": "^0.7.9",
    "express-session": "^1.2.0",
    "node-dev": "^2.3.0"
  },

  "scripts": {
    "start": "node --harmony $* ./node_modules/.bin/node-dev controller.js",
  },
"devDependencies": {
  "browserstack-webdriver": "^2.41.1",
  "grunt-protractor-runner": "^1.0.0",
  "method-override": "^1.0.2",
    "morgan": "^1.1.1",
    "protractor": "^0.23.1",
    "requirejs": "^2.1.11",
    "serve-static": "^1.1.0",
},
  "author": "Andrew Luhring"

파일 구조:

config/
   protractor.config.js
    chromedriver

server.js
controller.js

public/
   main.js
   js/
   lib/

tests/
   e2e/
      _protractor.js    <=== test file.

views/
  layouts/
      default.hbs

  partials/
      _head.hbs
      _register.hbs   <=== file being tested.

그것이 나의 전체 설정이라고 확신합니다. 내가 장황하게 갈 것이라고 생각했다. 도움이 되기를 바랍니다.

내가해야 할 일은 다음과 같습니다.

1. 테스트 관련 부분을 URL에 추가하여 내 부트스트랩 코드가 '정상적으로' 실행 중인지 아니면 각도기 테스트로 실행 중인지 알 수 있도록 한 다음 테스트용으로만 추가합니다.
2. document.ready에서 angular.bootstrap 호출
3. 창 이름을 'NG_DEFER_BOOTSTRAP!'으로 시작하도록 설정하십시오. angular.bootstrap을 호출하기 전에
4. 내 최상위 요소에 'ng-app' 속성 설정
5. angular를 가리키도록 window.angular를 설정하십시오.

https://github.com/mikaraento/protractor-reuse/blob/master/index.js 참조

크롬 및 파이어폭스 브라우저에서 완벽하게 실행되는 각도기 스크립트가 Internet Explorer에서 항상 실행할 수 없는 이유를 알 수 있습니까?

다른 브라우저에서는 동일한 스크립트가 완벽하게 실행되지만 Internet Explorer에서는 항상 동일하게 실행할 수 없습니다. 다음과 같이 시간 초과 예외와 같은 자주 오류가 발생합니다.
메시지: '시간 초과: 사양이 완료되기를 기다리는 30000밀리초 후에 시간 초과됨',
추적: { 스택: 정의되지 않음 } } ]
또한 Internet Explorer에서 요소가 감지되지 않는 경우도 있습니다.

기본 시간 간격을 defaultTimeou tInterval:1000000 으로 사용했지만 내 스크립트에서 Internet Explorer에서 실행하는 동안 위에서 언급한 오류가 발생합니다...

아무도 이것에 대해 나를 도울 수 있습니까?

문안 인사,
산토시 춘추

수동 부트스트래핑에만 문제가 있는 것 같지 않습니까? 아니면 이미 Chrome 및 Firefox에서 수동 부트스트랩된 앱을 실행할 수 있습니까?

@hankduan 이미 테스트 케이스를 살펴보셨나요? 우리가 도울 수 있는 것이 있습니까?

나는 각도기(https://github.com/angular/protractor/pull/1155)에서 부트스트래핑이 작동하는 방식을 변경하는 CL을 가지고 있습니다. 주요 목적은 다른 여러 문제를 수정하는 것이지만 부트스트랩 방식에 따라 수동 부트스트랩으로 수정(또는 최소한 도움)되어야 한다고 생각합니다. 그러나 테스트하기 위해 수동 부트스트랩을 설정한 적이 없으므로 이것은 이론적인 것입니다.

이 PR은 각도기 변경과 Angular 변경이 필요하기 때문에 단기간에 공개되지 않을 수 있습니다.

이 문제는 Protractor와 함께 사용하기 위해 Angular를 수동으로 부트스트랩하는 방법을 찾을 때 가장 많이 검색된 결과인 것 같습니다. 그래서 다른 솔루션을 제안하기에 여기만큼 좋은 곳이라고 생각했습니다. 이것은 전체 인터페이스가 Angular 앱인 경우에 작동합니다(위의 예와 같이 로그인 후 div에서 부트스트래핑과 같은 작업을 수행하는 대신).

Angular가 로드될 때까지 각도기의 테스트를 지연할 수 있지만 공식 Angular 문서에서는 각도기로 수동 부트스트래핑을 수행할 수 없다고 명시하고 있습니다. 나는 공식 문서가 금지하는 것처럼 보이는 해결 방법을 피하는 경향이 있습니다.

내 솔루션

저는 Grunt를 사용하여 내 코드를 단일 JS 파일로 연결/Uglify하고 있습니다. 이 파일은 index.html에서 참조하는 유일한 스크립트이며 스크립트 태그가 있습니다. script.js라고 합시다. 개발에서는 다른 Grunt 작업을 실행합니다. 이 작업은 캐싱을 방지하기 위해 타임스탬프와 함께 개별적으로 비동기식으로 나머지 JS 파일을 로드하는 데 필요한 파일만 연결합니다. 이 연결된 스크립트 세트는 내가 개발하는 동안 script.js를 대체합니다. 두 시나리오 모두 index.html에서 스크립트 태그와 함께 script.js만 로드합니다.

개발

따라서 개발에서 수동 부트스트랩을 수행해야 합니다. 프로덕션 JS에 연결하지 않은 단일 파일을 포함할 수 있기 때문에 쉽습니다. 다른 모든 JS가 로드된 후에 이 스크립트를 로드해야 합니다.

bootstrap_dev.js

        .element(document.body)
        .ready(function() {
            angular.bootstrap(document.body, ['App']);
        });

생산 / 각도기

프로덕션에서는 각도기가 마음에 들지 않기 때문에 수동으로 부트스트랩할 수 없습니다. 그리고 내 프로덕션 코드에 대해 각도기를 실행하고 있습니다. 또한 HTML에서 "ng-app" 속성을 제거하여 애플리케이션이 Development에서 조기에 부트스트랩되지 않도록 하여 일반적인 자동 부트스트랩이 발생하지 않습니다. 저는 script.js에서 다른 모든 JS보다 스크립트를 먼저 배치하여 프로덕션에서 이를 보완합니다.

bootstrap_prod.js

    window.document.body.setAttribute("ng-app", "myApp");

"myApp"을 기본 모듈의 이름으로 바꾸십시오.

결론

개발에서 위의 작업을 수행하면 스크립트를 비동기적으로 로드하고 수동 부트스트랩을 수행할 수 있습니다. 그러나 프로덕션 코드에 대해서만 각도기 테스트를 실행하는 것이 괜찮다면(스크립트 태그를 통해 단일 파일에서 로드할 수 있습니다. Angular가 로드되기 전에 ng-app 지시문을 추가하면 자동 부트스트랩이 수행됩니다. 이제 개발에서 다양한 스크립트를 비동기식으로 로드하고 프로덕션 코드에 대해 각도기 테스트를 실행합니다.

나를 위해 일하게 된 것은 내 protractor.conf.js에 다음 기능을 추가하는 것이었습니다.

onPrepare: function() 
    {
        // implicit and page load timeouts
        browser.manage().timeouts().pageLoadTimeout(40000);
        browser.manage().timeouts().implicitlyWait(25000);

        // for non-angular page
        browser.ignoreSynchronization = true;

        // sign in before all tests
     }

더 좋은 방법이 있다면 알려주세요 =]

비슷한 문제가있었습니다. 이 유용한 정보를 찾았습니다.

부팅 프로세스

앱이 프로덕션에서 부스트랩되는 방식에는 차이가 없지만 테스트에서 각도기는 다음과 같이 수행합니다.

1. 시작하기 전에 각도가 일시 중지되도록 window.name을 변경합니다. NG_DEFER_BOOTSTRAP! (이것은 각도 기능입니다!)
2. 모의 작업을 수행한 다음 angular.resumeBoostrap()을 호출하면 앱이 실제로 시작됩니다.

따라서 프로덕션 코드가 이 프로세스와 충돌하지 않는지 확인하십시오. angular는 한 번만 부스트랩될 수 있기 때문입니다. angular.boostrap() 또는 angular.resumeBoostrap()에 대한 두 번째 호출은 각도기 또는 앱을 손상시킬 것입니다. 따라서 본문에 ng-app 이 전혀 필요하지 않으며 angular.boostrap()을 직접 호출할 수 있으며 NG_DEFER_BOOTSTRAP을 사용하여 각도기에 의해 처리됩니다! 제대로.

창 이름

로딩 및 부팅 중에 window.name 이 앱 코드에 의해 변경되지 않았는지 확인하십시오. 제 경우에는 jquery 가 그렇게하고 있었는데 이유를 알 수 없습니다. 내 프로젝트에서 jquery 를 완전히 제거하고 테스트가 작동했습니다. 이것이 문제의 근원이다!

지금은 내 프로젝트에 필요하기 때문에 테스트를 중단하지 않고 jquery를 다시 가져오는 방법을 찾고 있습니다!

드디어,

우리의 문제는 한 페이지에 있는 두 가지 버전의 jQuery에 있었습니다(두 번째 버전은 외부 라이브러리에 의해 로드됨). 그것을 제거하고 페이지에 jQuery만 남겨두면 모든 것이 작동합니다.

일부 코드가 도움이 될 수 있습니다.

index.html

<body>
...
<script data-main="require.conf" type="text/javascript" src="bower_components/requirejs/require.js"></script>
</body>

requirejs 구성

...
 deps: ["proto/main"],
...

프로토.js

// We just load deps and register the module:
 define(["deps"],function(){
   angular.module('proto'...
 }

프로토/메인.js

define(["require", "exports", "proto", "angular"], 
    function (require, exports) {

    angular.bootstrap(document, ['proto']);
});

그리고 실제로 테스트 사양

var protractor = require('protractor');
var ptor;
function prepareBrowser() {

    ptor = protractor.getInstance();

    return ptor.get(ptor["baseUrl"] + '/login').then(function () {
        console.log("got");       
        return ptor.waitForAngular().then(function () {
            console.log("ngwaited");
        });
    });
}
describe('container', function () {
    beforeEach(function () {
        return prepareBrowser();
    });
    describe('form tests', function () {
        it('form is shown', function () {
            expect($('[ng-controller=LoginContr]').isDisplayed()).toBeTruthy();
        });

    });
});

산출

Using the selenium server at http://localhost:4444/wd/hub
got
ngwaited
container
  form tests
    form is shown - pass


Finished in 3.112 seconds
1 test, 1 assertion, 0 failures

만세!

ng-app 에서 angular.bootstrap() 로 전환했을 때 projotractor.conf 에 rootElement: 'div' 를 추가하는 것이 각도기를 다시 작동시키는 데 필요한 유일한 변경 사항이었습니다. 우리는 각도 1.3.0과 각도기 1.3.1을 사용하고 있습니다.

@jongunnip 넵 저도 잘 봤습니다 감사합니다!

@mikaraento 덕분에 잘 되었어요~

안녕하세요 여러분, 이 스레드와 관련된 이상한 것입니다.

나는 일반 각도 앱을 가지고 있습니다. requirejs도 없고, 각도기 2.0.0을 사용하고 있습니다.

스테이징 환경에서 시스템 테스트를 실행하면 작동합니다.
로컬에서 실행하면 다음과 같이 표시됩니다.
org.openqa.selenium.WebDriverException: unknown error: [ng:btstrpd] App Already Bootstrapped with this Element ... 메시지

grunt:server 대신 정적 리소스를 제공하도록 Nginx 서버를 구성하면 모든 것이 작동합니다.

개발 중에 livereload로 실행해도 상관없나요?

정적 서버가 다르게 작동하는 것처럼 보이고 grunt는 일부 404 또는 리디렉션을 제공하므로 웹 드라이버가 미쳐갑니다.

안녕하세요 여러분,

많은 시간을 읽고 읽은 후 내 프로젝트에 잘 맞는 하나의 솔루션을 찾았습니다( 각도기 실행 흐름 수정 ).

1. 각도기에 앱을 열 때 URL에 ?protractor-test 추가( 프로젝트 코드 )
2. 각도 부트스트랩 코드를 다음과 같이 변경합니다( 프로젝트 코드 ).

if(location.href.indexOf("protractor-test") < 0){
  // start angular app
  angular.bootstrap(document, [module.name]);
} else {
  // start angular app to protractor tests
  window.name = 'NG_DEFER_BOOTSTRAP!' + window.name;
  angular.bootstrap(document, [module.name]);
}

그리고 마침내 모두 다시 작동합니다 \o/

@juliemr 사본과 함께

저는 최근(단 1-2주) 각도기를 사용하여 Angular 응용 프로그램을 테스트하기 시작했습니다. 내 응용 프로그램에는 로그인 페이지의 본문 태그에 ng-App이 정의되어 있습니다. 내 테스트는 "Angular를 페이지 httP://(WebSite Address)에서 찾을 수 없습니다. 문제가 확실하지 않은 경우(브라우저 ignoresync 매개변수를 켜면 제대로 작동하지만 이것은 올바른 방법이 아닙니다), Juliemr이 제안한 것을 시도할 수 있지만(레거시 드라이버를 사용하여 탐색), 내 앱이 불평하는 이유를 이해하려고 합니다. body 태그에 ng-App이 있어도. 앱 기능 동작은 다음과 같습니다.. 로그인 페이지.. 일단 로그인하면 홈 페이지의 일부 링크를 클릭하면 다른 창/탭이 열립니다. 부트스트랩이 자동으로 수행되는지 확인하는 데 필요한 모든 단계를 찾는 데 도움이 될까요? bootstrap.js 파일에서 무언가를 확인해야 합니까(bootstrap 파일에 ng-app 매개변수가 표시되지 않아 확인합니다. 감사합니다.

이 문제에 대한 업데이트가 있습니까? ng-app이 없는 각도 앱에서 작동하도록 각도기를 구성하는 모범 사례 또는 방법은 무엇입니까? @erkobridee 귀하의 예를 더 자세히 설명해 주시겠습니까? 그리고 각도기가 로드가 완료될 때 각도기가 기다려야 하는 방법과 관련하여 window.name을 올바르게 처리하는 방법을 설명할 수 있습니까?

@juliemr Angular 1.5에서는 수동으로 부트스트랩하는 것이 부트스트랩에 선호되는 방법입니다. 도중에 축복받은 각도기 지원이 있습니까?

+1 이 문제가 더 높은 우선 순위를 가져야 한다고 생각합니다. 각도기가 수동 부트스트랩과 함께 작동하지 않으면 각도기를 사용하는 이점이 없습니다. Webdriver를 통해 각도기를 사용하는 요점은 각도기가 모든 각도 동기화를 처리한다는 것입니다.

같은 문제가 있습니다. 모든 업데이트?

안녕하세요, 이를 개선하기 위한 계획이나 프로세스가 있습니까?

이상하게 피드백이 없습니다. ng-app이 누락된 앱이 있고 테스트할 수 없습니다.
각도기로 그들을

2016년 7월 16일 오전 5시 1분에 "millerwx" 알림 @github.com이 작성했습니다.

안녕하세요, 이를 개선하기 위한 계획이나 프로세스가 있습니까?

—
당신이 댓글을 달았기 때문에 이것을 받는 것입니다.
이 이메일에 직접 답장하고 GitHub에서 확인하세요.
https://github.com/angular/protractor/issues/66#issuecomment -233104701,
또는 스레드 음소거
https://github.com/notifications/unsubscribe-auth/AOghFs2ff0e-88DLafNGD3iCH8uCOgVaks5qWEmIgaJpZM4A82d7
.

2016년 현재까지 이것은 여전히 ​​나에게 문제였습니다. 문제를 해결하기 위해 Magnetized 답변을 따랐습니다. 나는 단지 약간의 변화를 주었다. 대화에서 훌륭하고 범위를 벗어난 것은 리디렉션을 추적하고 앱 내부로 다시 이동하는 것입니다. *저는 Babel로 했는데 ES5로 쓰셔도 됩니다.

`describe('로그인 화면', ()=>{

var urlTimeout = 9000;

const waitForUrlRegex = (regex, urlMatcher )=>{

    return driver.wait(()=>{
        return driver.getCurrentUrl().then( (url)=>{
            return regex.test(url);
        });
    }, urlTimeout, "Expectation error: Timeout for url not matching " + urlMatcher );
};

const waitForRoute = (route)=>{
    return waitForUrlRegex( new RegExp( route + "$" ), route  );
}

const waitForUrl = (url)=>{
    return waitForUrlRegex( new RegExp( "^https?:\/\/" + url ), url );
}

it('should go to homepage and click login button', ()=>{

    driver.get( app_url, urlTimeout);

    //there is a redirect to welcome route
    expect( waitForRoute("welcome") ).toBe(true);

    const loginButton = element.all(by.className("login_button")).get(0);
    loginButton.click();
});

it( 'should enter credentials', ()=>{
    expect( waitForUrl( non_angular_login_url ) ).toBe(true);
    driver.findElement( by.name("user")).sendKeys( "username");
    driver.findElement( by.name("password")).sendKeys( "userpassword");
    driver.findElement( by.tagName("button")).click();
});

it( 'should go back to app, and continue testing', ()=>{
    expect( waitForRoute( "user-screen") ).toBe(true);
});

});`

config.on준비

onPrepare: ()=>{ require("babel-register"); global.driver = browser.driver; }

리디렉션을 조사하고 싶지 않은 경우 드라이버를 잠자기 상태로 둔 다음 각도기로 작업을 시작하면 됩니다.

`driver.get( app_url+ "/#/환영", urlTimeout);

    driver.sleep( 1000 );
    const loginButton = element.all(by.className("login_button")).get(0);
    loginButton.click();`

우리는 실제로 수동 부트스트랩을 지원합니다. 이 정보는 오래되었습니다. https://github.com/angular/protractor/issues/3857 도 처리하면 부트스트래핑이 훨씬 더 안정적이 됩니다.

@sjelin 수동 부트스트랩을 지원하는 문서화된 방법은 무엇입니까? 각도기 5.0에 대한 관련 정보를 찾을 수 없습니다.

수동 부트스트래핑 중에 동일한 문제에 직면했습니다. grunt와 함께 실행할 솔루션을 찾았습니다.
각도기 버전 2.5.1을 사용했습니다.

1. grunt 파일에서 이것을 언급하십시오.

grunt.initConfig({ protractor: { options: { configFile: "protractor.conf.js", // Default protractor config file keepAlive: true, // If false, the grunt process stops when the test fails. noColor: false, // If true, protractor will not use colors in its output. args: { // Arguments passed to the command } }, e2e: { options: { // Stops Grunt process if a test fails keepAlive: true } } } })

1. npm install grunt-protractor-runner --save-dev 설치 및 로드 작업 grunt.loadNpmTasks('grunt-protractor-runner') 추가

2. 다음 명령으로 각도기를 실행하십시오.
   grunt protractor
   또는 제품군 이름으로
   grunt protractor --suite suite_name

그것이 당신을 위해 작동하는지 알려주십시오.

이것은 나를 위해 일했습니다.
브라우저.ignoreSynchronization = true;
브라우저.get(URL);
브라우저.ignoreSynchronization = 거짓;