angular - 使用 https://localhost 测试 Cypress Crud 应用程序

Question

我是赛普拉斯的新手。我正在运行版本 7.1.0。

我要测试的 Angular 应用程序是一个 CRUD 应用程序，它使用 api 调用我的 https://localhost 服务器。遵循最佳实践，我正在尝试使用 ui 登录。

/// <reference types="Cypress" />
describe('Login without visiting Login Page', () => {
    it('should display user-profile page', () => {
        cy.request({
            method: 'POST',
            url: 'https://localhost/api.xxxx.net/public/user-service/loginReturnUserInfoAndToken',
            body: {
                email: '<valid email>',
                password: '<valid password>'
            }
        }).then(res => {
            localStorage.setItem('token', res.body.token);
            cy.log(res.body.email);
            cy.log(`token: ${localStorage.getItem('token')}`);

        }
        );
        //*/
        cy.visit('');
    });
});

但是，当我访问该站点时，它显示我没有登录。当我在 cypress 之外手动测试应用程序时，它工作正常。当我部分使用 cypress 和手动登录时，该应用程序似乎可以工作，直到我向后端发出 get 请求，然后它发送一条未登录的消息。关于如何让他在测试运行器中工作的任何想法。

下面是 app.component 和控制台读出的副本。

...

export class AppComponent implements OnInit, OnDestroy {

  title = 'titel';
  subSink: SubSink = new SubSink();
  isLoading = true;
  isLoggedIn = false;
  overlayOff = true;
  private overlayResponseHolder = true;

  constructor(
    private httpClient: C247HttpClientService,
    private userService: UserService,
    private cartService: CartService,
    private router: Router,
    private overlayService: C247OverlayService) {
  }

  ngOnInit() {
    this.httpClient.setURLPrefix('https://api.xxx.net/',
      'https://localhost/api.xxxx.net/public/');
    // this keeps track of weather or not there is a current user
    this.subSink.sink = this.userService.isLoggedIn
      .pipe(delay(1))
      .subscribe(isLoggedIn => {
        console.log('* start *')
        this.isLoggedIn = isLoggedIn;
        this.isLoading = false;
        if (isLoggedIn) {
          console.log('user is logged in');
          // console.log(this.userService.currentUser);
        } else {
          console.log('user is not logged in');
        }
        console.log('* end *');
        // console.log('subscription 1 returned from app.component.ts');
      });
    // */
    // this fires once to see if we have only 1.  There should
    // probably be a pipe(1) but this works
    this.subSink.sink = this.userService.resumeSession()
      .pipe()
      .subscribe((resp: any) => {
        console.log(`** resume session: ${resp} **`);
        this.seeToken();
        if (this.userService.currentUser.isEmpty()) {
          console.log(`resp: ${resp}, "${localStorage.getItem('token')}"`);

        } else {
          console.log('Correct');
          this.isLoggedIn = true;
          this.cartService.changeInCart.next(true);
        }
        console.log('** end subscription 2 returned from app.component.ts **');
      });
    // */
    console.log('init app.compoenent done');
  }

  private seeToken() {
    // console.log(`see token: ${localStorage.getItem('token')}`);
    console.log(`see userService "${this.httpClient.getAuthorizationToken()}"`)
  }

  ngOnDestroy() {
    this.subSink.unsubscribe();
  }

 ...

控制台转储

DevTools failed to load SourceMap: Could not load content for http://localhost:4200/__cypress/runner/popper.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
cypress_runner.js:177190 Console was cleared
app.component.ts:74 init app.compoenent done
core.js:27701 Angular is running in development mode. Call enableProdMode() to enable production mode.
app.component.ts:61 ** resume session: false **
app.component.ts:79 see userService "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJsb2NhbGhvc3QiLCJpYXQiOjE2MTk0NDg5MDIsImV4cCI6MTY4MjUyMDkwMiwidXNlcl9pZCI6IjE2OTMiLCJlbWFpbCI6Im5hQGNvbnN1bHRpbmcyNDcuaW5mbyJ9.0U9vyWJL0ANv78S9Vbskcukf98GEF00Kc5LvMBnA6BxhttqKTsDoVboPeD3Tt9YxXpxSqo59sG7EYVDVyI-1fw"
app.component.ts:64 resp: false, "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJsb2NhbGhvc3QiLCJpYXQiOjE2MTk0NDg5MDIsImV4cCI6MTY4MjUyMDkwMiwidXNlcl9pZCI6IjE2OTMiLCJlbWFpbCI6Im5hQGNvbnN1bHRpbmcyNDcuaW5mbyJ9.0U9vyWJL0ANv78S9Vbskcukf98GEF00Kc5LvMBnA6BxhttqKTsDoVboPeD3Tt9YxXpxSqo59sG7EYVDVyI-1fw"
app.component.ts:71 ** end subscription 2 returned from app.component.ts **
app.component.ts:43 * start *
app.component.ts:50 user is not logged in
app.component.ts:52 * end *
client:52 [WDS] Live Reloading enabled.

顺便说一句，我使用服务来维护应用程序中的状态。

标签： angularcypresse2e-testing