如何在柏树中定位自定义组件的属性？

Question

我对 cypress 非常陌生，我想测试如果我点击我的标签，那么视频应该会改变，但我不知道如何在我的 app-video 组件中定位视频属性：

it('button next should show next video', function() {
  cy.visit('/carousel/videos');
  cy.get('[data-cy=videoComponent]') //i want to see the current value
  cy.get('[data-cy=buttonNext]').click();
  // I want to see the next value
});

包含视频对象的属性是@Output() public currentVid: Video;

我可以定位这个并询问它的价值以检查它是否改变了吗？

<div class="body">
  <h3>B-roll & Timelapse</h3>
  <div class="container">
    <div *ngIf="videos$ | async as videos; else loadingOrError">
      <div class="vidDiv">
        <app-video [video]="currentVid" data-cy="videoComponent"></app-video>
        <div class="videoControls">
          <a
            mat-raised-button
            (click)="previous()"
            class="controls"
            data-cy="buttonPrevious"
          >
            <i class="material-icons">keyboard_arrow_left</i>
          </a>
          <a
            mat-raised-button
            (click)="next()"
            class="controls"
            data-cy="buttonNext"
          >
            <i class="material-icons">keyboard_arrow_right</i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<ng-template #loadingOrError>
  <mat-card>
    <mat-error
      *ngIf="loadingErrors$ | async as errorMessage; else loading"
      data-cy="appError"
    >
      Error loading the recipe list: {{ errorMessage }}. <br />
      Please try again later.
    </mat-error>
    <ng-template #loading>
      <mat-spinner class="spinner"></mat-spinner>
    </ng-template>
  </mat-card>
</ng-template>

Answer 1

你应该可以使用这个语法：

it('button next should show next video', function() {
  cy.visit('/carousel/videos');
  cy.get('[data-cy=videoComponent]')
    .should('have.attr', '[video]', 'currentVid')
  cy.get('[data-cy=buttonNext]').click();
  cy.get('[data-cy=videoComponent]')
    .should('have.attr', '[video]', 'nextVid')
});

这是使用 Chai 的链接器“attr(name, [value])”，此处解释：https://docs.cypress.io/guides/references/assertions.html#Chai-jQuery。