英文:
How to 'check for elements', 'click button', 'check elements have increased by one'? - .then() event order isn't clear
问题
我正在尝试实现标题中所提到的内容。以下是我的代码。
```js
//之前找到的添加项目按钮
cy.get('#container').then(($container) => {
const beforeLength = $container.children.length;
if (beforeLength === 0) {
addItemButton.click();
cy.get('.item').should('have.length', 1);
} else {
//我们实际上进入了else条件
addBlockButton.click();
cy.get('.item').should('have.length', beforeLength + 1);
}
})
我收到的错误是预期的 <div.item> 长度为 3，但实际上是 1。
基本上，我不确定如何提取 beforeLength，以便我可以将其与 afterLength 进行比较，特别是在 beforeLength 可能为 0 的情况下。
<details>
<summary>英文:</summary>
I am trying to achieve what I laid out in the title. Here is my code.
//Add item button found previously
cy.get('#container').then(($container) => {
const beforeLength = $container.children.length;
if ( beforeLength === 0) {
addItemButton.click();
cy.get('.item').should('have.length', 1);
} else {
//We actually enter the else condition
addBlockButton.click();
cy.get('.item').should('have.length', beforeLength + 1);
}
})
`The error I get is Expected <div.item> to have a length of 3, but got 1`
Basically, I'm not sure how I'm supposed to extract the `beforeLength` so I can compare it to the `afterLength`, particularly in scenarios where before length might be 0.
</details>
# 答案1
**得分**: 2
不确定您要朝哪个方向进行，但`$container`是一个jQuery对象，所以要获取它的子元素，您需要使用[.children()](https://api.jquery.com/children/)方法。
或者，在[原生 JavaScript](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)中，可以使用`.children`属性，但您需要使用`$container[0]`提取原生元素。
```js
cy.get('#container').then(($container) => {
const beforeLength = $container.children().length;
// or
const beforeLength = $container[0].children.length
if ( beforeLength === 0) {
addItemButton.click();
cy.get('.item').should('have.length', 1);
} else {
addBlockButton.click();
cy.get('.item').should('have.length', beforeLength + 1);
}
})
我无法解决问题"预期<div.item>的长度为3，但实际得到1"，因为我看不到任何HTML。
这似乎是beforeLength必须为2，因为错误"预期长度为3"等同于beforeLength + 1表达式，这意味着else分支处于活动状态。
这是一个完美的例子，说明为什么您需要首先设置测试前提条件，即在一个测试中设置0个项目，在另一个测试中设置> 0个项目，因此避免使用if-else结构。您现在的方式，无论如何进行测试，测试只覆盖50% - 在我看来不足够。
英文:
Not sure which way you were aiming to go, but $container is a jQuery object, so to obtain it's children you need the .children() method.
Or, in native javascript the .children property could be used but you would have to extract the native element with $container[0].
cy.get('#container').then(($container) => {
const beforeLength = $container.children().length;
// or
const beforeLength = $container[0].children.length
if ( beforeLength === 0) {
addItemButton.click();
cy.get('.item').should('have.length', 1);
} else {
addBlockButton.click();
cy.get('.item').should('have.length', beforeLength + 1);
}
})
I can't resolve to the problem The error I get is Expected <div.item> to have a length of 3, but got 1 as I can't see any HTML.
It seems like beforeLength must be 2 since the error expected to have length of 3 equates to the beforeLength + 1 expression, which would mean the else branch was active.
This is a perfect illustration of why you need to set up the test pre-conditions first, i.e set up 0 items in one test and > 0 items in another test, and therefore avoid using if - else constructs. The way you have it, the test will only have 50% coverage any way it goes - not adequate in my opinion.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论