Cypress如何暂时逃离Cy.in() [英] Cypress how to temporarily escape from a cy.within()
本文介绍了Cypress如何暂时逃离Cy.in()的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在编写柏树上的自动测试器代码。 由于web app是vue.js工程，页面由src中的组件组成。 因此，在Cypress中，我决定将所有后续命令的范围限定在组件根内，而不是文档根(Html)内。 因此cy.get或cy.find将在组件根DOM内查询。
但是我经常需要查询当前作用域组件之外的一些元素。 例如：当我让客户选择在组件外部呈现下拉菜单时，在Cypress中，在Cy.in内，无法选择下拉选项，因为它呈现在组件根外部。
于是我尝试暂时逃离作用域以选择下拉列表，然后再次返回作用域以执行下一命令。
cy.get(".account-mortgage-component form").within(() => {
cy.get("input[name='postcode']").type("ng2 6dg").blur();
// click input.select-address to open dropdown
cy.get("input.select-address").click();
// then dropdown is rendered outside .account-mortgage-component. so next command can not work
cy.get(".select-address-dropdown").contains("3 Carnarvon Road, West Bridgford").click();
// I hope to escape current scope, so make above code to work. after this I should come back to scope again for next commands.
cy.root().submit();
});<div class="account-mortgage-component">
<form>
<input name="postcode" />
<div class="custom-select">
<input class="select-address" />
</div>
</form>
<div>
<div class="select-address-dropdown">
<ul>
<li>3 Carnarvon Road, West Bridgford</li>
<li>5 Carnarvon Road, West Bridgford</li>
<li>6 Carnarvon Road, West Bridgford</li>
</ul>
</div>因为我的Web项目已经很大规模了，在Cypress中我应该使用cy.inside来确定大多数命令的范围。 任何解决方案都会有所帮助。
推荐答案
cy.document().its('body')将为您提供一个位于.within()之外的主题，之后它似乎会回到内部作用域(仍在回调内)。
cy.get('body').find('div.without'); // checking this query first (outer scope)
cy.get('div.myform').within(() => {
cy.contains('text within'); // inner scope
cy.document().its('body').find('div.without'); // outer scope
cy.contains('text within'); // inner scope
})
使用此html测试
<body>
<div class="myform">
<div>text within</div>
</div>
<div class="without">text without</div>
</body>
嵌套的WIND
您可以使用相同的分段模式嵌套.within()语句
cy.get('div.scope1')
.within(() => {
cy.contains('text within scope1'); // testing in scope1
cy.document().its('body').find('div.scope2')
.within(() => {
cy.contains('text within scope2'); // switch to scope2
})
cy.contains('text within scope1'); // back to scope1
})
使用此html测试
<body>
<div class="scope1">
<div>text within scope1</div>
</div>
<div class="scope2">
<div>text within scope2</div>
</div>
</body>
这篇关于Cypress如何暂时逃离Cy.in()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
