[英]How to read data value for Cypress?
I am trying to read data from API response.我正在尝试从 API 响应中读取数据。 The html in Chrome Inspect shows the value, but the number changes either to 4 or 5. I need Cypress to read the data, and based on the value, do a certain condition. Chrome Inspect 中的 html 显示值,但数字变为 4 或 5。我需要 Cypress 读取数据,并根据该值,做一定的条件。
html html
<p _ngcontent-wvl-c5="" class="availablelicenses"> 5 </p>
cypress柏
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')
}
});
The easiest way is to get text first like this:最简单的方法是首先获取文本,如下所示:
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
}
Note that both .innerText
& .querySelector(…)
work only with one element at aa time.请注意, .innerText
和.querySelector(…)
一次只能处理一个元素。 If you have more than one element, you might want to use a loop.如果您有多个元素,则可能需要使用循环。 Also, .innerText
might work inconsistently across browsers.此外, .innerText
可能在浏览器中的工作方式不一致。
Apart from that, as @eric99 correctly points out, document.querySelector
will not wait at all for element to update/appear.除此之外,正如@eric99正确指出的那样, document.querySelector
根本不会等待元素更新/出现。 So, if you run this test just after API call, you might prefer to use the method explained below.因此,如果您在 API 调用之后运行此测试,您可能更喜欢使用下面解释的方法。
There's also an alternative & slightly more involved way proposed by Cypress . 赛普拉斯还提出了一种替代且稍微复杂的方式。 Applied to your case, it would look something like this:应用于您的情况,它看起来像这样:
// 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
}
});
}
);
If possible, I recommend ditching the if statement, and performing two tests.如果可能,我建议放弃 if 语句,并执行两个测试。 This will give you better coverage by ensuring both paths are tested.通过确保测试两条路径,这将为您提供更好的覆盖范围。
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')
});
});
If you can't stub the API, you could use something similar to Igor's last suggestion, but I would stay away from document.querySelector('p[class="availablelicenses"]')
as it's going to be flakey, see this section of the docsRetry-ability .如果你不能存根 API,你可以使用类似于 Igor 的最后一个建议的东西,但我会远离document.querySelector('p[class="availablelicenses"]')
因为它会很脆弱,请参阅本节的文档重试能力。
Also, use should()
instead of .then()
for the same reason.此外,出于同样的原因,使用should()
而不是.then()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.