Winkelmesser läuft im Docker zurück Element nicht vorhanden, aber in localhost tut

Question

Ich habe versucht, einige Winkelmesser Tests in einem Docker ausführen, aber ich habe ein Problem gefunden, das ich selbst nicht lösen kann. Winkelmesser sagt, dass das Element nicht innerhalb der Webseite in Docker existiert, aber es in localhost tut. Auch die CURL auf der Webseite macht HTML-Elemente verfügbar (wie Sie wissen, nicht der HTML-Code innerhalb von Angular-Komponenten), findet aber das Element immer noch nicht.

Zunächst einmal ist Test ordnungsgemäß auf localhost arbeiten:

/*********** TESTING **********/ 
beforeAll(function(){ 
    browser.sleep(1).then(function() { 
     console.log('Browser running ...'); 
    }); 

    browser.driver.manage().window().getSize().then(function(size) { 
     console.log('Starting browser size', size); 
    }); 

    browser.get(specifiedURL+"/app/users/#/register"); 

    browser.waitForAngular(); //We expect to wait for angular to be loaded so browser can load correctly his components   

    browser.getCurrentUrl().then(function(url){ 
     console.info("Browser redirected to "+url); 
    }); 

    browser.refresh(); //Refresh the view so it loads the content properly at the specified ngStorage-project url 
}); 

Und zwei Tests

it("should redirect to the specified page", function(){ 
    expect(browser.getCurrentUrl()).toEqual(specifiedURL+"/app/users/#/register"); 
}); 

it("should exists a surname input in the page",function(){ 
    var displaySurnameInput = element(by.id('signup-surname')); 

    browser.wait(function() { 
     return displaySurnameInput.isPresent(); 
    }, 5000); 

    expect(displaySurnameInput.getText()).toEqual(''); 
}); 

Die Konfigurationsdatei wie

let SpecReporter = require('jasmine-spec-reporter').SpecReporter; 

exports.config = { 
    framework: "jasmine2", 
    suites: { 
    login: "tests/e2e/login/**/*Spec.js" 
    }, 
    multiCapabilities: [{ 
    browserName: "chrome", 
    chromeOptions: { 
     args: [ "--headless", "--window-size=1200x800", "--disable-gpu", "--test-type", "--no-sandbox"] 
    } 
    }], 
    jasmineNodeOpts: { 
    showColors: true, 
    silent: true, 
    defaultTimeoutInterval: 360000, 
    print: function() { } 
    }, 
    onPrepare: function() { 
    jasmine.getEnv().addReporter(new SpecReporter({ 
     spec: { 
     displayStacktrace: false 
     } 
    })); 
    } 
} 

Die Docker an einen Docker verbunden ist -nginx Server auf Port 80 ausgesetzt, so können wir überprüfen, ob ein Projekt korrekt ausgeführt wird oder nicht (was es ist). Als ich laufe den Docker Befehl:

docker run -it -v /dev/shm:/dev/shm --privileged -e SCREEN_WIDTH=1920 -e SCREEN_HEIGHT=1480 -e SCREEN_DEPTH=24 --link ify-nginx:ify-nginx ify/test-runner bash 

ich die Web-Seite mit CURL zugreifen können, und es zeigt die Web-Seite HTML-Code in einem Browser auf (eigentlich das gleiche Ergebnis wie curl in localhost zurückkehrt), aber irgendwie ist Winkelmesser nicht finde innerhalb der URL das Element (Ich habe bereits versucht, das Element durch mehrere Jasmin-Funktionen zu erhalten und immer noch das gleiche Problem).

LOCALHOST PROTRACTOR_RESULT

DOCKER PROTRACTOR_RESULT

Vielen Dank!

EDIT1:

Mit dieser innerhalb Docker einen Fehler erzeugen, aber nicht in localhost

it("should exists a surname input in the page",function(){ 
    var displaySurnameInput = element(by.id('signup-surname')); 

    browser.pause(); 

    browser.wait(function() { 
     return displaySurnameInput.isPresent(); 
    }, 5000); 

    expect(displaySurnameInput.getText()).toEqual(''); 
}); 

ERROR (wie ich Neuling bin ich nicht mehr als 2 Bilder einfügen können, so dass ich fügen Sie den hier Code)

[08:33:33] I/protractor - 
module.js:487 
    throw err; 
    ^
Error: Cannot find module '_debugger' 

EDIT2:

Mit

browser.executeScript("return arguments[0].innerHTML;", $('html')).then(function (content) { console.log(content); }); 

Ich habe die html enthüllt die Komponenten gedruckt ... aber nicht die innere html (wo es die richtigen IDs und die tatsächliche Eingangselement legt)

<section ng-show="step==1" style="overflow:hidden;"> 
      <ify-input id="signup" field="name" ng-model="user.name" class="ng-pristine ng-untouched ng-valid ng-scope"><!-- ngIf: isAllowed(field) --></ify-input> 
      <a id="signup-step1" class="ify-button ng-binding" ng-click="step2()">{{ ("Next" | translate).toUpperCase() }}</a> 
    </section> 

ich kann Führen Sie einen Test durch, der nach dem Element by.model PASSIERT, aber es bezieht sich nicht auf die innere Eingabe, wie es mit by.id tun sollte.

it("should find a model.name in the dom", function(){ 
     var displayNameInput = element(by.model("user.name")); 

     browser.wait(function() { 
      return displayNameInput.isPresent(); 
     }, 5000); 

     expect(displayNameInput.getText()).toEqual(''); 
}); 

Die Frage bleibt klar, kann die innere html von Winkelkomponenten nicht bekommen

EDIT3:

ich diese Seite getestet haben https://docs.angularjs.org/examples/example-heroComponentSimple/index.html und belichtet, um die HTML, und es scheint, das Lesen zu ok der innere html der Komponente.

HTML ausgesetzt:

<body ng-app="heroApp" class="ng-scope"> 
    <!-- components match only elements --> 
<div ng-controller="MainCtrl as ctrl" class="ng-scope"> 
    <b>Hero</b><br> 
    <hero-detail hero="ctrl.hero" class="ng-isolate-scope"><span class="ng-binding">Name: Spawn</span></hero-detail> 
</div> 

Der Test:

 it("example component web random",function(){ 
     browser.get("https://docs.angularjs.org/examples/example-heroComponentSimple/index.html"); 

     browser.waitForAngular(); 

browser.executeScript("return arguments[0].innerHTML;", $('html')).then(function (content) { console.log(content); }); 

     expect(element(by.css('.ng-binding')).isPresent()).toBe(true); 
    }); 

Answer 1

Docker versuchte, eine nicht vorhandene API unter http://ify-nginx/api/ ... zu verbinden Der Aufruf erwartete eine Liste der erforderlichen Felder auf dem Registerformular generiert werden. Wenn Null zurückgegeben wird, werden Felder nicht erzeugt, per se kann der Winkelmesser nichts finden.

Wie man oben sehen kann, etwas Unheimliches passiert war hier (ngIf: isAllowed)

<ify-input id="signup" field="name" ng-model="user.name" class="ng-pristine ng-untouched ng-valid ng-scope"><!-- ngIf: isAllowed(field) --></ify-input> 

Wir haben ein, wenn in dem API-Code zu überprüfen, ob die URL 'localhost' oder den Server-IP ist, nicht ' ify-nginx '. Wenn ify-nginx erkannt wird, wird die API-Domäne dorthin umgeleitet, und der Inhalt wird nicht geladen.

Answer 2

Sie vermissen ein ";" am Ende der Rückkehr in den Browser. warten. Versuchen Sie auch, mit

return displaySurnameInput.isPresent(); 

und ist 5 Sekunden genug, um die Seite zu laden?

Sie können auch deaktivieren, um weitere Details zu den Fehlern zu erhalten, indem Sie die Berichtsbibliothek deaktivieren. Oder vielleicht hat es eine Option, um mehr Details anzuzeigen.

Wenn Sie browser.ignoreSynchronization = true verwenden; vor dem browser.wait und false nach dem warten, ändert es etwas?