尝试使用 Cypress 中的 Vue 3 模板获取表中的第二个元素

Question

在我的 cypress 测试中，我尝试从 vue 模板访问表中的第二个元素：

<template>
  <table id="table" class="table" data-cy="table">
    <thead class="table-head" data-cy="table-head">
      <tr class="table-row" data-cy="table-row">
        <th id="table-updatable" v-show="massUpdatable" class="table-cell" data-cy="table-head-updatable">
          <input type="checkbox" data-cy="table-head-checkbox"/>
        </th>
        <th
          id="table-head-icons"
          data-cy="table-head-cell"
          class="table-cell"
          :class="orderClasses(column.order_by)"
          v-for="(column, columnKey) in props.columns"
          @click="orderTable(column.order_by)"
          :key="columnKey"
        >
          <div class="table-header" data-cy="table-header-div">
          {{ $t(column.name) }}
          <font-awesome-icon
            data-cy="table-icon-arrowUp"
            class="asc"
            :icon="['fas', 'arrow-up']"
            fixed-width
          ></font-awesome-icon>
          <font-awesome-icon
            data-cy="table-icon-arrowDown"
            class="desc"
            :icon="['fas', 'arrow-down']"
            fixed-width
          ></font-awesome-icon>
          </div>
        </th>
        <th
          data-cy="table-icon-actions"
          class="table-cell actions-cell"
          :class="'actions-amount-' + filteredActionsLength(false)"
          v-if="Object.keys(props.actions).length > 0"
        ></th>
      </tr>
    </thead>
    <tbody class="table-body" data-cy="table-body" :class="fullPage ? 'table-body-full' : ''">
      <tr
        class="table-row"
        v-for="(row, rowKey) in rows"
        :key="rowKey"
        :class="row.deleted_at ? 'archived' : ''"
      >
        <td 
          data-cy="table-data-updatable"
          v-show="massUpdatable" class="table-cell">
          <input type="checkbox" />
        </td>
        <td
          data-cy="table-data-cell"
          class="table-cell" 
          v-for="(column, columnKey) in props.columns"
          :key="columnKey"
        >
          <table-boolean-column
            data-cy="table-boolean-column"
            v-if="column.type === 'boolean'"
            :value="row[columnKey]"
          ></table-boolean-column>
          <table-event-column
            data-cy="table-event-column"
            v-else-if="column.type === 'event'"
            :value="row[columnKey]"
          >
          </table-event-column>
          <template v-if="column.type === 'date'">
            {{
              row[columnKey] !== undefined
                ? row[columnKey].toLocaleDateString() +
                  " " +
                  row[columnKey].toLocaleTimeString()
                : ""
            }}
          </template>
          <template v-else>
            {{ parseValue(row[columnKey]) }}
          </template>
        </td>
        <td
          class="table-cell actions-cell"
          :class="'actions-amount-' + filteredActionsLength(row)"
          v-if="Object.keys(props.actions).length > 0"
        >
          <template v-for="(action, actionKey) in filteredActions(row)">
            <table-button
              data-cy="table-button"
              v-if="showButtons(row) || action.action === 'showMetadata'"
              @click="executeAction(action.action, row.id)"
              :key="actionKey"
              :icon="action.icon"
              :type="action.type"
              v-on:load-data="loadData"
              :content="$t(action.tooltip)"
            >
            </table-button>
          </template>
        </td>
      </tr>
      <tr data-cy="table-row-isLoading" v-if="isLoading" class="table-row">
        <div class="loader" data-cy="loader-loading">
          {{ $t("message.loading") }}
          <font-awesome-icon
            :icon="['fad', 'spinner-third']"
            class="loading-icon"
            fixed-width
          />
        </div>
      </tr>
      <tr v-if="lastPageLoaded" data-cy="table-row-lastPage" class="table-row">
        <div class="loader" data-cy="loader-endPage">
          {{ $t("message.final") }}
          <font-awesome-icon
            :icon="['fad', 'check']"
            class="success-icon"
            fixed-width
          />
        </div>
      </tr>
    </tbody>
  </table>
</template>

我正在尝试检查 font Awesome 图标是否确实出现 我做了以下无济于事：

   it('has fa arrow icons', () => {
        cy.mount(TableList2, {
          props: { actions: true, massUpdatable: undefined, columns: true, rows: true, isLoading: false, lastPageLoaded: true, fullPage: true }
        }) 
  cy.get('[data-cy="table-head"] th[data-cy="table-head-cell"]')
      .eq(1) // Select the second <th> element (index is zero-based)
      .find('font-awesome-icon') // Find Font Awesome icons within the second <th>
      .should('have.length.gt', 0); // Assert that at least one Font Awesome icon exists

我在这里缺少什么，它希望找到它，但从未找到.. 我还想看看在升序时它是否出现，在降序时，字体默认不可见，仅在单击时可见。

Answer 1

您的选择器太具体了：

cy.get('[data-cy="table-head"] th[data-cy="table-head-cell"]')

上述查询仅产生一个

<th>

，因为只有一个带有

data-cy="table-head-cell"

。

所以

.eq(1)

失败了，如果你试图从一个列表中找到第二个。

其中任何一个都可以代替

cy.get('[data-cy="table-head"] th[data-cy="table-head-cell"]')
  .find('font-awesome-icon');
  // .should('have.length.gt', 0)   // redundant assertion

或

cy.get('[data-cy="table-head"] th')
  .eq(1)
  .find('font-awesome-icon');