Как прочитать значение данных для Cypress?

Question

Я пытаюсь прочитать данные из ответа API. HTML-код в Chrome Inspect показывает значение, но число меняется на 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

Если возможно, я рекомендую отказаться от оператора 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, вы можете использовать что-то похожее на последнее предложение Игоря, но я бы держался подальше отdocument.querySelector('p[class="availablelicenses"]'), поскольку это будет ненадежно, см. Этот раздел документов Способность к повторным попыткам .

Также используйте should() вместо .then() по той же причине.

Answer 2

Самый простой способ - сначала получить текст следующим образом:

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, вы можете предпочесть использовать метод, описанный ниже.

Существует также альтернативный и немного более сложный способ , предложенный Cypress . Применительно к вашему делу это будет выглядеть примерно так:

// 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
      }
    });
  }
);