我想等到两个元素中的第二个出现后再对其执行操作。目前,我有这个:
cy.get('[data-test="insert-item"]').click();
cy.get('[data-test="textarea"]').eq(1).type('Hello').type('{enter}');
目前这失败了。我假设这是因为赛普拉斯将收集所有出现的textarea
,然后在它实际呈现在页面上之前尝试选择第二个(因为创建它的异步请求)。如果我cy.wait(2000);
在这两行之间添加,它将通过。
有什么方法可以不使用来执行此操作cy.wait(2000)
,以便它专门等待第二个项目出现?
您可以使用将移到eq()
选择器中:nth(1)
,这将使索引成为cy.get()
重试机制的一部分
cy.get('[data-test="textarea"]:nth(1)')
.type('Hello').type('{enter}')
或者,您可以在索引列表之前声明所选元素的长度。
cy.get('[data-test="textarea"]')
.should('have.length', 2)
.eq(1)
.type('Hello').type('{enter}')
演示版
/// <reference types="@cypress/fiddle" />
const waitForAdd = {
html: `
<div id="parent">
<textarea data-test="textarea">1</textarea>
<button data-test="insert-item" onclick = "myFunction()"></button>
</div>
<script>
const myFunction = () => {
setTimeout(() => {
const parent = document.querySelector('div#parent');
let ta = document.createElement("textarea");
ta.setAttribute('data-test', 'textarea');
parent.appendChild(ta);
}, 500)
}
</script>
`,
test: `
cy.get('[data-test="insert-item"]').click();
cy.get('[data-test="textarea"]:nth(1)')
.type('Hello').type('{enter}')
cy.get('[data-test="textarea"]:nth(1)')
.invoke('val')
.should('eq', 'Hello\\n')
cy.get('[data-test="insert-item"]').click();
cy.get('[data-test="textarea"]')
.should('have.length', 3)
.eq(2)
.type('Hello again').type('{enter}')
cy.get('[data-test="textarea"]')
.eq(2)
.invoke('val')
.should('eq', 'Hello again\\n')
`
}
it('tests hello', () => {
cy.runExample(waitForAdd)
})
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句