1 Вопрос: Как настроить атрибут самоопределяемого компонента в кипарисе?

вопрос создан в Wed, May 8, 2019 12:00 AM

Я чрезвычайно новичок в 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>
    
0
  1. Можете ли вы добавить HTML-код этого раздела страницы? Вы должны использовать это вместо необработанного (программиста) кода JavaScript.
    2019-05-09 06: 18: 39Z
1 ответ                              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')
});

Это использует цепочку 'attr (name, [value])' Chai, что объясняется здесь: https://docs.cypress.io/guides/references/assertions.html#Chai-jQuery .

    
0
2019-05-10 06: 41: 29Z
  1. Я перебираю ваш код, и это определенно шаг в правильном направлении, но объект не переименовывается, содержимое объекта меняется (новое id и новый URL), и я пытаюсь проверить, изменяется ли id объекта в currentVid
    2019-05-11 16: 49: 59Z
  2. Проверьте, у меня вообще нет опыта работы с подобными объектами в HTML. Но я думаю, что использование its() будет последним толчком. Как это работает, описано здесь: docs.cypress.io/api/commands/its .html # Синтаксис
    2019-05-13 06: 29: 53Z
источник размещен Вот