- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个数组,其中的项目是一堆按钮元素。我想调用一个按钮,然后等待一个元素(位于 dom 中)被加载。
加载该元素后,只有我想进入下一个迭代(单击下一个按钮/元素)
在我当前的实现中,一次单击所有按钮。但我希望一次单击一个按钮。
cy.document().then(document => {
const arra = [...document.querySelectorAll('.instances__action')];
for (let i = 1; i <= arra.length; i++) {
let state = document.querySelector(
`#root > section > section > main > div > div > section.instances > div > div > div > div > div > div > table > tbody > tr:nth-child(${i}) > td:nth-child(3) > span`
).innerText;
document
.querySelector(
`#root > section > section > main > div > div > section.instances > div > div > div > div > div > div > table > tbody > tr:nth-child(${i}) > td:nth-child(7) > div > button.ant-btn.ant-btn-primary.ant-btn-sm`
)
.click();
cy.wait(2000);
cy.waitUntil(() => {
cy.get(
`#root > section > section > main > div > div > section.instances > div > div > div > div > div > div > table > tbody > tr:nth-child(${i +
1}) > td:nth-child(3) > span`
).contains('Finished');
});
}
});
});
最佳答案
@jmargolisvt 是正确的,如果您更改 .click()
操作 Cypress 命令,您应该获得正确的操作顺序。
命令执行顺序和测试循环
这样想 - 上面的测试代码作为正常的 javascript 运行,并且每个 cy.X()
命令将命令放入队列中。保证命令按队列顺序顺序运行,但不与测试代码同步。
所以,cy.wait(2000)
不会减慢 for 循环,它会暂停队列执行。
等待断言
另请注意,命令具有内置的断言等待,因此您可能不需要 cy.wait()
或cy.waitUntil()
在这种情况下。您可以使用 timeout
控制最长等待时间选项。
循环
如果将内部部分转换为命令,for 循环将正常工作,但您也可以将循环本身转换为 cy.get().each() IMO 中的命令更加简洁。
测试异步内容
最后,更喜欢cy.contains('mySelector', 'myContent')
命令 cy.get('mySelector').contains('myContent')
等待异步内容时的命令。
原因是 cy.get('mySelector').contains('myContent')
只等待元素 mySelector
,但它已经在 DOM 中了。如果内容是异步更改的,该命令将立即测试旧内容(假设为空)并导致测试失败。
const tbodySelector = '#root > section > section > main > div > div > section.instances > div > div > div > div > div > div > table > tbody';
const buttonSelector = 'td:nth-child(7) > div > button.ant-btn.ant-btn-primary.ant-btn-sm';
const spanSelector = 'td:nth-child(3) > span'
cy.get('.instances__action').each(($el, i) => {
cy.get(`${tbodySelector} > tr:nth-child(${i+1}) > ${buttonSelector}`)
.click();
cy.contains(
`${tbodySelector} > tr:nth-child(${i+1}) > ${spanSelector}`,
'Finished',
{ timeout: 2000 } // increase timeout if a longer wait is required
);
});
<小时/>
注意 jQuery 的 :nth-child(index)
选择器从索引 1 开始,但是 .each(($el, i) =>
具有从零开始的索引,因此必须使用 i+1
在这些选择器中。
这是我用来测试的模拟 DOM。在一个干净的 Cypress 项目中,将其放入文件夹 <project root>/app
中.
<table>
<tbody>
<tr class="instances__action">
<td>
<button id="myBtn1"></button>
</td>
<td>
<span id="mySpan1"></span>
</td>
</tr>
<tr class="instances__action">
<td>
<button id="myBtn2"></button>
</td>
<td>
<span id="mySpan2"></span>
</td>
</tr>
</tbody>
</table>
<script>
document.getElementById("myBtn1").addEventListener("click", function() {
setTimeout(() => {
document.getElementById("mySpan1").innerHTML = "Finished";
}, 1000)
});
document.getElementById("myBtn2").addEventListener("click", function() {
setTimeout(() => {
document.getElementById("mySpan2").innerHTML = "Finished";
}, 500)
});
</script>
请注意,上面的嵌套已被简化,因此我适本地更改了选择器内容。
测试上述 HTML 片段
it('clicks buttons and waits for finished flag', () => {
cy.visit('app/iterate-table-buttons.html')
const tbodySelector = 'tbody';
const buttonSelector = 'td:nth-child(1) > button';
const spanSelector = 'td:nth-child(2) > span'
cy.get('.instances__action').each(($el, i) => {
console.log(`starting #${i}`)
cy.get(`${tbodySelector} > tr:nth-child(${i+1}) > ${buttonSelector}`)
.then(() => console.log(`clicking #${i}`))
.click();
cy.contains(
`${tbodySelector} > tr:nth-child(${i+1}) > ${spanSelector}`,
'Finished',
{ timeout: 2000 } // increase timeout if a longer wait is required
)
.then(() => console.log(`asserting #${i}`))
});
})
柏树原木
这就是 Cypress 日志的样子。
全绿色,并且可以看到只有在完成文本出现后才会发生点击。
控制台日志
这就是控制台日志的样子。
循环在命令队列开始之前就执行完成,但这没关系,因为命令仍然按正确的顺序执行。
从 #0 开始
开始#1
点击#0
断言#0
点击#1
断言 #1
关于javascript - Cypress 等待 for 循环内加载元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60788843/
问题:Cypress npm 父项目能否导入/添加/运行其依赖项 Cypress npm 项目的 Cypress 测试? 问题的答案是这个链接有效,将一个整体的 Cypress 测试包分解成多个 Cy
我编写了端到端测试。如果我在打开柏树的情况下启动它们,它们就会一直通过。但是如果我使用这个命令:cypress run --browser chrome --headed --no-exit --sp
我想在每次测试之间传递/共享数据。在 Cypress 中实现它的最佳方法是什么? 例如: it('test 1'), () => { cy.wrap('one').as('a') con
柏树 clears all cookies和 local storage每次考试前。它是否也清除浏览器的文件缓存? 最佳答案 编辑: Cypress 在浏览器启动前自动清除浏览器缓存 Version
我正在尝试对 cypress 执行条件语句,以检查标题中的登录链接是登录还是帐户或类,然后单击它。 if 条件不起作用。 cy.get('header').then((header) => { if
我们正在尝试编写一个 cypress 测试来检查从页面发出的 xhr 请求之一。但是,我们发出的请求没有显示在命令日志中。然而,在运行 cypress open 后,它们确实出现在 bash 控制台中
我正在评估 Cypress(版本 3.4.1),并且在从 cypress 工具运行相同的测试和从终端运行它们之间遇到不一致,我在两种情况下都使用相同的浏览器(Electron 61)。有人经历过吗?
我有一个表单,允许用户输入日期范围,输出结果将仅来自该特定日期。 我可以使用 .type() 函数将日期输入到表单中。但是,我不确定如何检查结果是否在指定的范围内。 例如,如果输入的日期是 ('17/
我正在使用 Cypress ,并且想对XHR响应进行部分 stub 。我想捕获原始JSON,并对其进行部分编辑。 例如:cy.route('GET', `**/subjects`, 'fixture:
您好,我正在尝试通过 Jenkins 运行 cypress 测试,并且正在从我的本地 m/c 获取测试,而不是从 github 获取测试,并且正在执行 Windows 批处理命令"./node_mod
tl;dr:cypress 变量是否可以存储在某个可访问的位置(如 this 或类似的东西),或者如果我想访问所有这些变量,我是否必须进入无休止的回调循环一次使用? 长话短说: 我试图用 cypres
我有一个场景,在选择特定产品后,金额会反射(reflect)在文本字段中,当我们单击复选框时,金额会自动翻倍。这是我的代码: cy.getBySel('textfield').click().then
我正在使用 Cypress 测试数据表单,但卡在了一个在页面上显示警告的步骤上。 这是测试,但它不起作用。 describe('Alert is displayed with warning text
我有一个表格,我正在测试列标题是否正确。问题是 .contains() 只返回一个元素。 我可以为每个实例重复代码,但它看起来很冗长。感觉我一定在 Cypress 命令中遗漏了一些可以做得更好的东西。
我们有一个应用程序会定期轮询服务器,直到任务完成。我们触发了一个全局事件,以便 Cypress 可以捕捉并找出任务是否完成,但我们在使用 document.addEventListener 时遇到了问
是否可以告诉 Cypress 使用某种语言(例如德语)启动 Chrome,因为我有一个应用程序需要用多种语言进行测试。我在文档中的任何地方都看不到详细信息,这表明目前这是不可能的。 我试过添加 --l
我正在使用 Cypress作为我的 API 和 UI 测试自动化框架。我已经编写了多个正在运行和通过的 API 测试,但它们只是验证 response.status返回 200 .我想比较来自 GET
在运行 Cypress 脚本时,有些情况会失败。我只想运行那些失败的案例来再次运行。 如何在 Cypress 中仅运行失败的测试用例? 最佳答案 只要它没有直接集成到 Cypess 中,你就可以使用类
如何使用 Cypress 清除(取消选择)多选输入中的所有选项? 这里的文档似乎没有涵盖这种情况:https://docs.cypress.io/api/commands/select.html#Sy
我们正在使用 Cypress 使用 Create React App 测试应用程序构建,我们的 CRA 应用程序正在 .env – NODE_PATH=src/ – 中设置自定义导入路径,以便我们可以
我是一名优秀的程序员,十分优秀!