如何根據父級傳遞的道具對頁面上呈現的條件表進行兩種不同的測試？

Question

我有一個檢查頁面上表格的柏樹測試，但是有兩個不同的表格可以根據表格類型條件呈現。 如果表的類型是product ，一個表將呈現，如果類型是equipment ，另一個表將呈現。

我如何編寫此 cypress 測試來檢查頁面上是否存在該特定表，然后運行一組特定的檢查，反之亦然？

測試說明：

條件是selectedIssueKind是Product還是Equipment 。 下一頁將包含具有不同列標題和信息的表格。

我的想法是讓測試檢查數據類，然后對該數據類表進行測試。 所以：

if ('[data-cy=product-issue-tracker-table]') { product table tests} else {equipment table tests}

但是，如果我點擊一個設備問題，我會得到一個錯誤，它找不到Part ID ，但那是因為它試圖檢查錯誤的表（產品），所以我的 if ('[data-cy=product-issue-tracker-table]')檢查，似乎不起作用。

非常感謝使用條件語句的任何提示！ 如果您需要更多信息，請告訴我！

干杯!

賽普拉斯測試

it.only('Issue Tracker table exists, column headers are correct and there is data', () => {
    if ('[data-cy=product-issue-tracker-table]') {
      cy.get('[data-cy=issue-tracker-table] table').contains('th', 'Issue ID')
      cy.get('[data-cy=issue-tracker-table] table').contains('th', 'Part ID')
      cy.get('[data-cy=issue-tracker-table] table').contains(
        'th',
        'Station Name'
      )
      cy.get('[data-cy=issue-tracker-table] table').contains(
        'th',
        'Description'
      )
      cy.get('[data-cy=issue-tracker-table] table').contains('th', 'SN')
      cy.get('[data-cy=issue-tracker-table] table').contains('th', 'Timestamp')
      cy.contains('td', /\w/g).should('be.visible')
    } else {
      cy.get('[data-cy=issue-tracker-table] table').contains('th', 'Issue ID')
      cy.get('[data-cy=issue-tracker-table] table').contains('th', 'Part')
      cy.get('[data-cy=issue-tracker-table] table').contains(
        'th',
        'Station Name'
      )
      cy.get('[data-cy=issue-tracker-table] table').contains(
        'th',
        'Description'
      )
      cy.get('[data-cy=issue-tracker-table] table').contains('th', 'Start Time')
      cy.get('[data-cy=issue-tracker-table] table').contains('th', 'End Time')
      cy.contains('td', /\w/g).should('be.visible')
    }
  })

HTML

<div data-cy="issue-tracker-table">
  <div class="vgt-wrap issue-tracker-table-style cursor-pointer mb-12" data-cy="product-issue-tracker-table" pagination="[object Object]">
    <!--v-if--><div class="vgt-inner-wrap"><!--v-if--><!--v-if--><!--v-if-->
    <div class="vgt-fixed-header"><!--v-if-->
    </div>
    <div class="vgt-responsive">
      <table id="vgt-table" class="vgt-table condensed">
        <colgroup>
          <col id="col-0">
          <col id="col-1">
          <col id="col-2">
          <col id="col-3">
          <col id="col-4">
          <col id="col-5">
          <col id="col-6">
            
       </colgroup>
        <!-- Table header -->
        <thead>
          <tr><!--v-if--><!--v-if-->
            <th scope="col" class="vgt-left-align" aria-sort="descending" aria-controls="col-0" style="min-width: auto; width: auto;">
              <span>Issue ID</span>
              <!--v-if-->
            </th>
            <th scope="col" class="vgt-left-align" aria-sort="descending" aria-controls="col-1" style="min-width: auto; width: auto;">
              <span>Part ID</span>
              <!--v-if-->
            </th>
            <th scope="col" class="vgt-left-align" aria-sort="descending" aria-controls="col-2" style="min-width: auto; width: auto;">
              <span>Station Name</span><!--v-if-->
            </th>
            <th scope="col" class="vgt-left-align" aria-sort="descending" aria-controls="col-3" style="min-width: auto; width: auto;">
              <span>Description</span><!--v-if-->
            </th>
            <th scope="col" class="vgt-left-align" aria-sort="descending" aria-controls="col-4" style="min-width: auto; width: auto;">
              <span>SN</span>
              <!--v-if-->
            </th>
            <th scope="col" class="vgt-left-align" aria-sort="descending" aria-controls="col-5" style="min-width: auto; width: auto;">
              <span>Timestamp</span>
              <!--v-if-->
            </th>
            <th scope="col" class="vgt-left-align" aria-sort="descending" aria-controls="col-6" style="min-width: auto; width: auto;">
              <span></span>
              <!--v-if-->
            </th>
              
            </tr><!--v-if-->
        </thead><!-- Table body starts here -->
        <tbody><!-- if group row header is at the top --><!--v-if--><!-- normal rows here. we loop over all rows -->
          <tr class="">
            <!--v-if--><!--v-if-->
            <td class="vgt-left-align">
              <span>1</span>
                
            </td>
            <td class="vgt-left-align">
              <span></span>
                
            </td>
            <td class="vgt-left-align">
              <span></span>
                
            </td>
            <td class="vgt-left-align">
              <span> Connect to DUT by SSH</span>
                
            </td>
            <td class="vgt-left-align">
              <span></span>
                
            </td>
            <td class="vgt-left-align">
              <span>Mar 28 2022 - 10:01 AM</span>
                
            </td>
            <td class="vgt-left-align"><!--v-if--><!--v-if-->
              <div data-cy="issue-tracker-view-data-button">
                <button class="primary-button">View Data</button>
                  
              </div><!--v-if-->
            </td>
              
            </tr><!-- if group row header is at the bottom --><!--v-if-->
        </tbody><!--v-if-->
      </table>
        
      </div><!--v-if--><!--v-if-->
    </div>
      
    </div><!--v-if--><!-- Issue Data Modals --><!--v-if--><!--v-if--><!-- Issue Data Modals --><!-- Add New Analysis section -->
  <div class="flex">
    <span class="tab font-normal text-card-orange bg-card-orange bg-opacity-20 py-1 px-4 mb-3 mr-9 rounded-full w-max">Analysis Records</span>
    <!--v-if--><!--v-if-->
    <div data-cy="add-new-analysis-button">
      <button class="primary-button">Add New Analysis</button>
        
      </div><!--v-if--></div>
        
 </div>

Answer 1

所以，這種不確定的測試不是一個很好的做法。 理想的情況是確定您正在測試一張表或另一張表。

條件是 selectedIssueKind 是產品還是設備。 下一頁將包含具有不同列標題和信息的表格。

根據該描述，我認為我們可以輕松地將其分成兩個（或更多）測試。

// pseudo-code
describe('table tests', () => {
  beforeEach(() => {
    // shared setup
  })

  it('tests the product table', () => {
    // in the product test, we'll select the `selectedIssueKind` of product
    // unclear from the HTML/Cypress how you're doing that, so very vague line below
    cy.get('product').click();
    // code to test the product table
  });

  it('tests the equipment table', () => {
    // in the equipment test, we'll select the `selectedIssueKind` of equipment
    // same as above, very vague example
    cy.get('equipment').click();
    // code to test the equipment table
  });
});

此外，如果您的規范中的每個測試都需要一個selectedIssueKind ，您可以將該邏輯移至您的beforeEach()中，在您的it()中設置一個環境變量，而不是在每個測試中重復該操作。

// psuedo-code

describe('test', () => {
  beforeEach(() => {
    // other setup
    // grab the cypress environment variable as your selector
    cy.get(Cypress.env('selectedIssueKind')).click();
  })

  it('product test', { env: selectedIssueKind: 'product' } }, () => {
    // code
  });

  it('equipment test', { env: selectedIssueKind: 'equipment' } }, () => {
    // code
  });
});

Answer 2

測試中有一些重復，可以通過獲取表頭數組來減少。

您可能測試的不僅僅是標頭，但這給了您想法。

const headers = ['Issue ID', ...]  // add all the common headers

cy.get('[data-cy="issue-tracker-table"]')
  .then($table => {
    return $table.find('[data-cy=product-issue-tracker-table]').length > 0
  })
  .then(console.log)              // for checking isProduct value
  .then(isProduct => {
    if (isProduct) {
      return headers.concat(['SN', 'Timestamp'])
    } else {
      return headers.concat(['Start Time', 'End Time'])
    }
  })
  .then(console.log)              // for checking headers array
  .then(headers => {
    // One test here
    cy.get('[data-cy=issue-tracker-table] table thead th')
      .each(($th, index, $list)) => {
        // last header is empty, presume you don't want to test it
        if (index < $list.length -1 ) {       
          expect($th.text()).to.eq(headers[index])
        }
      })
  })

分解步驟也很有用，您可以通過（臨時）記錄.then()的結果來逐步檢查每個步驟。

---

我注意到<!--v-if-->表明您正在使用 Vue 應用程序。

如果你想變得非常復雜，你可以讓應用程序告訴賽普拉斯正在顯示哪種表格。 這是一個應用程序操作，它降低了異步加載的風險。

確切的代碼取決於您的 Vue 組件，但模式是

// in Vue component

if (window.Cypress) {
  window.tableType = tableType
}

// in test

cy.window()
  .then(win => {
    return win.tableType === 'Product'
  })
  .then(console.log)              // for checking isProduct value
  .then(isProduct => {
    ...

---

測試所有<td>有內容和可見性

cy.get('[data-cy=issue-tracker-table] table tbody td')
  .each($td => {
    cy.wrap($td)
      .contains(/\w/)
      .should('be.visible')
  })

---

備選步驟： tableType而不是isProduct

cy.get('[data-cy="issue-tracker-table"]')
  .then($table => {
    if ($table.find('[data-cy=product-issue-tracker-table]').length > 0) {
      return 'Product'
    } else {
      return 'Equipment'
    }
  })
  .then(console.log)              // for checking tableType value
  .then(tableType => {
    if (tableType === 'Product') {
      return headers = headers.concat(['SN', 'Timestamp'])
    } else {
      return headers = headers.concat(['Start Time', 'End Time'])
    }
  })
  .then(console.log)              // for checking headers array
  .then(headers => {
    // One test here
    cy.get('[data-cy=issue-tracker-table] table thead th')
      .each(($th, index, $list) => {
        // test header here
        if (index < $list.length -1 ) {
          expect($th.text().trim()).to.eq(headers[index])
        }
      })
  })