Question

我正在尝试从API响应中读取数据。 Chrome Inspect中的html会显示该值，但数字会更改为4或5。我需要赛普拉斯读取数据，并根据该值执行特定条件。

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调用之后立即运行此测试，则可能更喜欢使用下面说明的方法。

还有一种替代的方式，proposed by 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
      }
    });
  }
);

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"]')，因为它会带来麻烦，请参阅文档{{3} }。

出于相同的原因，也请使用should()代替.then()。

如何读取赛普拉斯的数据值？

2 个答案: