Question

我已经为登录和注册编写了e2e测试用例，但是每当我编写仪表板组件测试用例时，它都会失败。

Dashboard.component.html:
<div class="center-login">
  <br>
  <h2><marquee>Welcome to Gipher</marquee></h2>
    <br>  
    <div id="searchBarWrap">
        <form (submit)="onSearch(searchForm)" #searchForm="ngForm" >
            <mat-form-field>
                <input matInput type="input" placeholder="Search" name="search" id="searchBar" ngModel #searchInput="ngModel" >
             </mat-form-field>
             <button mat-raised-button color="primary" type="submit"  class="center-buttons"><mat-icon>search</mat-icon></button>
</form>
</div>
<br>
<br>

<div class="row scrollStyle" style="background-color: black; color: white; border: 3px solid white" *ngIf="isSearched"> 
    <div class="col-3 col-sm-6 col-md-10 col-lg-12 topbottomheight">      
        <h2 class="display-7">Search Results:</h2>
        <div class="searchResultsDiv">     
           <mat-card class="matCards" *ngFor="let search of giphy; let i = index">                                                                
              <mat-card-header>
                  <mat-card-title>{{search.title}}</mat-card-title>
              </mat-card-header> 
              <mat-card-content class="disp-center">
                  <p>Gipher ID: {{search.id}}</p>   
            <img mat-card-image src="{{search.images.fixed_width.url}}" style="width:150px;height:100px;">
               </mat-card-content>      

              <button  mat-raised-button (click)="onClickFav(search.id,search.title,search.images.fixed_width.url)" style="border: 2px solid black">
                <mat-icon>bookmark</mat-icon>
              </button>                                                
            </mat-card>      
          </div>
          </div>
          </div>

Dashboard.po.ts:

import { browser, by, element, ElementFinder, promise, ElementArrayFinder } from 'protractor';

export class DashboardViewPage {

  // navigate to dashboard view page
  navigateToDashboardView() {
    return browser.get('/dashboard');
  }

  // to pause browser
  pauseBrowser() {
    browser.pause();
  }

  // get dashboard component
  getDashboardComponent(): ElementFinder {
    return element(by.tagName('app-dashboard'));
  }
   // get trending gipher
  getAllGipher(): ElementArrayFinder {
    return element.all(by.css('mat-card'));
  }
  // get serach input box
  getSearchInputBox() {
    return element(by.id('searchBar'));
  }
  isSearcheInputBoxPresent(): promise.Promise<boolean> {
    return this.getSearchInputBox().isPresent();
  }
   // get submit button
   getSubmitButton(): ElementFinder {
    return this.getDashboardComponent().element(by.buttonText('Search'));
  }
  // check submit button is present or not
  isSubmitButtonPresent(): promise.Promise<boolean> {
    return this.getSubmitButton().isPresent();
  }
  // click submit button
  clickSubmitButton(): promise.Promise<void> {
    return this.getSubmitButton().click();
  }

}



 dashboard.e2e-spec.ts:
import { DashboardViewPage } from './page-objects/dashboard.po';

describe('dashboard page', () => {
  let page: DashboardViewPage;
  const emptyNoteValues = ['', ''];

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

  it('should get search input box', () => {
    page.navigateToDashboardView();
    page.pauseBrowser();
    expect(page.isSearcheInputBoxPresent())
    .toBeTruthy(`<input matInput type="input" placeholder="Search" name="search" id="searchBar"> should exist in dashboard.component.html`);
  });


});

我编写了一个简单的测试用例，以检查搜索栏输入框是否存在。但是在运行e2e测试用例时出现以下错误：

 Console log:





throw e;
  ^

Error: Cannot find module '_debugger'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)      
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (C:\Users\ArindamKotal\Desktop\Demo-Workspace\arikotal-gipher-java-boilerplate\GipherUI\node_modules\protractor\built\debugger\debuggerCommons.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)
  dashboard page
    × should get search input box
      - Expected false to be truthy '<input matInput type="input" placeholder="Search" name="search" id="searchBar"> should exist in dashboard.component.html'.
          at UserContext.<anonymous> (C:\Users\ArindamKotal\Desktop\Demo-Workspace\arikotal-gipher-java-boilerplate\GipherUI\e2e\dashboard.e2e-spec.ts:15:6)
          at new ManagedPromise (C:\Users\ArindamKotal\Desktop\Demo-Workspace\arikotal-gipher-java-boilerplate\GipherUI\node_modules\selenium-webdriver\lib\promise.js:1077:7)
          at ControlFlow.promise (C:\Users\ArindamKotal\Desktop\Demo-Workspace\arikotal-gipher-java-boilerplate\GipherUI\node_modules\selenium-webdriver\lib\promise.js:2505:12)
          at TaskQueue.execute_ (C:\Users\ArindamKotal\Desktop\Demo-Workspace\arikotal-gipher-java-boilerplate\GipherUI\node_modules\selenium-webdriver\lib\promise.js:3084:14)
          at TaskQueue.executeNext_ (C:\Users\ArindamKotal\Desktop\Demo-Workspace\arikotal-gipher-java-boilerplate\GipherUI\node_modules\selenium-webdriver\lib\promise.js:3067:27)
          at asyncRun (C:\Users\ArindamKotal\Desktop\Demo-Workspace\arikotal-gipher-java-boilerplate\GipherUI\node_modules\selenium-webdriver\lib\promise.js:2974:25)     
          at C:\Users\ArindamKotal\Desktop\Demo-Workspace\arikotal-gipher-java-boilerplate\GipherUI\node_modules\selenium-webdriver\lib\promise.js:668:7

我无法找出我在哪里做错了。

未通过Angular E2E测试用例

0 个答案: