HuddleEng / PhantomFlow

Describe and visualise user flows through tests with PhantomJS
MIT License
682 stars 60 forks source link

Is the phantomjs not working on an app that is using angular ui-view #60

Closed Jackclarify closed 7 years ago

Jackclarify commented 7 years ago

The ui-view elements are not appear when I use as below:

casper.start('https://carepilot-web-staging.herokuapp.com/login');
casper.then( function () {
            require('utils').dump(this.getElementInfo('.main-page'));
            phantomcss.screenshot( '.loginWrapper', 'Get login page' );
            this.echo('get login page...');
        } );

the require print out the div null

<div ui-view=\"\" class=\"main-page ng-scope\"></div> it should be:

<div ui-view="" class="main-page ng-scope" style="">
<div class="loginWrapper ng-scope" ng-controller="loginController as vm">
    <div class="login-panel">
        <div login-form="" ng-hide="vm.showForgotPassword || vm.showTOU"><form name="vm.loginForm" ng-submit="vm.login()" class="ng-pristine ng-valid-email ng-invalid ng-invalid-required" style="">
    <div class="panel-fields">
        <div class="logo icon-logo"></div>
        <div>
            <input type="email" name="username" id="username" class="form-control ng-pristine ng-untouched ng-empty ng-valid-email ng-invalid ng-invalid-required" ng-model="vm.username" placeholder="Email" required="" ng-class="{'error': vm.loginError &amp;&amp; username.$pristine}" style="">
            <!-- ngIf: vm.loginError -->
        </div>
        <div>
            <input type="password" name="password" id="password" class="form-control ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" ng-model="vm.password" placeholder="Password" required="" ng-class="{'error': vm.loginError &amp;&amp; password.$pristine}" style="">
            <!-- ngIf: vm.loginError -->
        </div>
        <div ng-show="vm.resetEmail" class="ng-binding ng-hide" style="">Reset Password email has been sent to </div>
    </div>

    <div class="panel-buttons">

        <button id="loginButton" type="submit" class="btn-login ng-binding ng-hide-remove" ng-show="!vm.loginError || vm.loginForm.$dirty" ng-class="{ 'btn-login-green' : vm.loginForm.$valid }">Login</button>
        <button id="errorButton" class="btn-login btn-login-red ng-hide" ng-show="vm.loginError &amp;&amp; !vm.loginForm.$dirty" disabled="disabled" style="">
            <div class="ng-binding">SORRY</div>
            <div class="ng-binding">We didn't recognize that email and password</div>
        </button>
        <button id="forgotPwdButton" type="button" class="btn-login btn-clear ng-binding" ng-click="vm.showForgotPassword=true">I forgot my password</button>
    </div>
</form>
</div>
</div>
</div>

I tried a hole day with no success, can anyone give me some suggestion? Thanks!

jamescryer commented 7 years ago

This doesn't relate to PhantomFlow. See https://github.com/Huddle/PhantomCSS/issues/191