Question

版本信息

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.8
@angular/cdk                      6.1.0
@angular/cli                      6.0.8
@angular/flex-layout              6.0.0-beta.17
@angular/material                 6.1.0
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.8
@schematics/update                0.6.8
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

量角器：5.4.0 茉莉花芯：2.6.2 茉莉花规格报告：4.1.0

问题

我想做一个简单的e2e测试，以在浏览器重定向到页面后检查元素的内部文本。但是，当检查元素的内部时，浏览器只是在页面上停留10秒钟，然后给出以下错误：

1) material App should re-route to login page
  - Error: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL.
  - ScriptTimeoutError: Timed out waiting for asynchronous Angular tasks to finish after 10 seconds. This may be because the current page is not an Angular application. Please see the FAQ for more details: htt
ps://github.com/angular/protractor/blob/master/docs/timeouts.md#waiting-for-angular
  While waiting for element with locator - Locator: By(css selector, #globTitle)

Executed 1 of 1 spec (1 FAILED) in 14 secs.
[20:04:24] I/launcher - 0 instance(s) of WebDriver still running
[20:04:24] I/launcher - chrome #01 failed 1 test(s)
[20:04:24] I/launcher - overall: 1 failed spec(s)
[20:04:24] E/launcher - Process exited with error code 1
An unexpected error occured: undefined

这是我的代码： HTML ：

<div class="main-container">  
    <mat-toolbar [ngStyle]="{'background-color': topBarColor, 'color': 'white'}" class="topbar telative" style = "z-index: 0 !important;">  
        <button mat-icon-button (click)="snav.toggle()" *ngIf = "showbtn" value="sidebarclosed">
             <mat-icon>menu</mat-icon>  
         </button>  
         <span id = "globTitle">Programme Admin Dashboard</span>  
         <span style = "flex: 1 1 auto;"></span>  
         <button mat-raised-button colour = "warn" *ngIf = "showbtn" (click) = "signOut(); snav.close();" style = "margin-right: 20px;">Sign out</button>  
         <img src="assets/images/logo.png" alt="No logo available" style = "height: inherit; margin-bottom: 5px;">  
     </mat-toolbar>  
     <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 0 : 0">  
         <mat-sidenav style = "text-align: center;" #snav id="snav" class="dark-sidebar pl-xs" [mode]="mobileQuery.matches ? 'side' : 'over'" fixedTopGap="0" [opened]= false [disableClose]="mobileQuery.matches" >  
             <app-sidebar (click) = "snav.close()"></app-sidebar>  
         </mat-sidenav>  
         <mat-sidenav-content class="page-wrapper">  
             <div class="page-content">  
                 <router-outlet><app-spinner></app-spinner></router-outlet>  
             </div>  
         </mat-sidenav-content>  
         <ng-template #loadingSpinner>  
         <mat-spinner></mat-spinner>  
             <p>Fetching permissions...</p>  
         </ng-template>  
    </mat-sidenav-container>  
</div>

app.po.ts ：

import {browser, by, element, protractor} from 'protractor';  

export class AppPage {  
  navigateTo() {  
    return browser.get('/');  
  }  

  getURIChange(url: string) {  
    const ec = protractor.ExpectedConditions;  
  browser.wait(ec.urlContains(url), 2000);  
  }  
}

app.e2e-spec.ts ：（请注意，当我删除最后一行代码时，该测试就可以运行。实际上，最多element(by.css('#globTitle'))都可以正常工作。但是，如果我将其更改为element(by.css('#globTitle')).getText()，这是浏览器等待的地方，并且出现上述错误。从'./app.po'导入{AppPage};
从“量角器”导入{浏览器，元素，由}；

describe('material App', () => {  
  let page: AppPage;  

  beforeEach(() => {  
    page = new AppPage();  
  });  

  it('should re-route to login page', async () => {  
    console.log('Waiting for angular');  
  await browser.waitForAngularEnabled();  
  console.log('Angular initialized');  
  console.log('Waiting on navigation to page');  
  // page.navigateTo();  
  await browser.get('http://localhost:4201/');  
  console.log('Navigation completed, should be redirected to the login page');  
  page.getURIChange('/login');  
  expect(element(by.css('#globTitle')).getText()).toEqual('Programme Admin Dashboard');  
  });  
});

此外，我不确定这是否有帮助，但这是我的量角器配置和业力配置，以防万一。 protractor.conf.js ： const {SpecReporter} = require（'jasmine-spec-reporter'）;

exports.config = {  
  allScriptsTimeout: 10000,  
  specs: [  
    './e2e/**/*.e2e-spec.ts'  
  ],  
  capabilities: {  
    'browserName': 'chrome'  
  },  
  directConnect: true,  
  baseUrl: 'http://localhost:4200/',  
  framework: 'jasmine',  
  jasmineNodeOpts: {  
    showColors: true,  
  defaultTimeoutInterval: 10000,  
  print: function() {}  
  },  
  onPrepare() {  
    require('ts-node').register({  
      project: 'e2e/tsconfig.e2e.json'  
  });  
  jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));  
  }  
};

karma.conf.js ：

module.exports = function (config) {  
  config.set({  
    basePath: '',  
  frameworks: ['jasmine', '@angular-devkit/build-angular'],  
  plugins: [  
      require('karma-jasmine'),  
  require('karma-chrome-launcher'),  
  require('karma-jasmine-html-reporter'),  
  require('karma-coverage-istanbul-reporter'),  
  require('@angular-devkit/build-angular/plugins/karma')  
    ],  
  client:{  
      clearContext: false // leave Jasmine Spec Runner output visible in browser  
  },  
  coverageIstanbulReporter: {  
      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],  
  fixWebpackSourcePaths: true  
  },  
  angularCli: {  
      environment: 'dev'  
  },  
  reporters: ['progress', 'kjhtml'],  
  port: 9876,  
  colors: true,  
  logLevel: config.LOG_INFO,  
  autoWatch: true,  
  browsers: ['Chrome'],  
  customLaunchers: {  
      ChromeNoSandbox: {  
        base: 'Chrome',  
  flags: ['--no-sandbox']  
      }  
    },  
  singleRun: false,  
  });  
};

Answer 1

您好，您没有在步骤定义中返回回调。

所以茉莉花认为您正在做或正在等待某些动作发生。但是，一旦发生超时（即10秒钟），它将引发错误

it('should re-route to login page', async (done) => { 
  console.log('Waiting for angular'); 
  await browser.waitForAngularEnabled(); 
  console.log('Angular initialized'); 
  console.log('Waiting on navigation to page'); // page.navigateTo(); 
  await browser.get('http://localhost:4201/'); 
  console.log('Navigation completed, should be redirected to the login page'); 
  page.getURIChange('/login'); 
 Var a = element(by.css('#globTitle');
  Var b = a.getText().then((value)=>{console.log('title is'+value);
return value;}) 

expect(b).toEqual('Programme Admin Dashboard'); done() 
    });

Answer 2

尝试一下：

const el1 =  await $('#globTitle').getText();
expect(el1).toEqual('Programme Admin Dashboard');

getText（）等待一个承诺解决，因此无法像以前那样工作。

量角器元素（by.css（'id_name'））。getText（）使浏览器等待

版本信息

问题

2 个答案: