如何讀取賽普拉斯的數據值？

Question

我正在嘗試從 API 響應中讀取數據。 Chrome Inspect 中的 html 顯示值，但數字變為 4 或 5。我需要 Cypress 讀取數據，並根據該值，做一定的條件。

html

<p _ngcontent-wvl-c5="" class="availablelicenses"> 5 </p>

柏

it("number of licences", function(){
    cy.get('p[class="availablelicenses"]').as("avc");
    cy.get('p[class="totallicenses"]').as("ls");
    if (avc == ls){
      cy.get('button[id="cyAdd"]').click()
      cy.get('p[class="add-user"]').contains('All licenses are already assigned')
    }
    else {
      cy.get('button[id="cyAdd"]').click()
      cy.get('[data-cy=cyFirst').type('testName')
      cy.get('[data-cy=cyLast').type('testLast')
      cy.get('[data-cy=cyEmail').type('testEmail@mailinator.com')
    }
  });

Answer 1

最簡單的方法是首先獲取文本，如下所示：

const licensesOne = document.querySelector('p[class="availablelicenses"]').innerText;
const licensesTwo = document.querySelector('p[class="totallicenses"]').innerText;

if (licensesOne === licensesTwo) {
  // Checks to run if texts are equal
} else {
  // Checks to run if texts are different
}

請注意， .innerText和.querySelector(…)一次只能處理一個元素。 如果您有多個元素，則可能需要使用循環。 此外， .innerText可能在瀏覽器中的工作方式不一致。

除此之外，正如@eric99正確指出的那樣， document.querySelector根本不會等待元素更新/出現。 因此，如果您在 API 調用之后運行此測試，您可能更喜歡使用下面解釋的方法。

賽普拉斯還提出了一種替代且稍微復雜的方式。 應用於您的情況，它看起來像這樣：

// Gets text of element and passes it to "then" callback
cy.get(`p[class="availablelicenses"]`).invoke('text').then(
  availableLicensesText => {
    //Gets text of second element & passes it to "then" callback
    cy.get(`p[class="totallicenses"]`).invoke(`text`).then(totalLicensesText => {
      if( availableLicensesText ===  totalLicensesText){
        // Checks to run if texts are equal
      } else {
        // Checks to run if texts are different
      }
    });
  }
);

Answer 2

如果可能，我建議放棄 if 語句，並執行兩個測試。 通過確保測試兩條路徑，這將為您提供更好的覆蓋范圍。

context("number of licences", function() {

  it('when max licences not assigned, should allow licence entry', () => {

    cy.server();

    // Stubbed with mock response of same shape as real response
    cy.route('api/path/to/licence/count', {
      assigned: 4,   
      total: 5
    })

    cy.contains('p[class="availablelicenses"]', '4'); // confirms stubbed response used 
    cy.contains('p[class="totallicenses"]', '5');     

    cy.get('button[id="cyAdd"]').click()
    cy.get('[data-cy=cyFirst').type('testName')
    cy.get('[data-cy=cyLast').type('testLast')
    cy.get('[data-cy=cyEmail').type('testEmail@mailinator.com')
  });

  it('when max licences assigned, should not allow licence entry', () => {

    cy.server();

    // Stubbed with mock response of same shape as real response
    cy.route('api/path/to/licence/count', {
      assigned: 5,   
      total: 5
    })

    cy.contains('p[class="availablelicenses"]', '5'); // confirms stubbed response used 
    cy.contains('p[class="totallicenses"]', '5');     

    cy.get('button[id="cyAdd"]').click()
    cy.get('p[class="add-user"]').contains('All licenses are already assigned')
  });

});

---

如果你不能存根 API，你可以使用類似於 Igor 的最后一個建議的東西，但我會遠離document.querySelector('p[class="availablelicenses"]')因為它會很脆弱，請參閱本節的文檔重試能力。

此外，出於同樣的原因，使用should()而不是.then() 。