Menu
I am working to write auto tester code on cypress. As web app is vue.js project, page consists of component in src. So in cypress, I decide to scope all subsequent commands to within component root instead of document root(html). So that cy.get or cy.find will query within component root dom.
But I often need to query some elements outside current scoped component. for example: when I have custom select that renders dropdown outside component, in cypress, inside cy.within there is no way to select dropdown option because it is rendered outside component root.
So I tried to escape scope temporarily to select dropdown and then come back into scope again for next commands.
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>As my web project is big scaled already, in cypress I should scope most commands using cy.within. Any solution will be help.
336
Using the Cypress command – cy. get(), you can directly get the element by passing the tag name.
end() is useful when you want to end a chain of commands and force the next command to not receive what was yielded in the previous command. Alternatively, you can always start a new chain of commands off of cy .
cy.document().its('body') will give you a subject that is outside the .within(), and it seems to go back to inner scope after (still within callback).
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
})
Tested with this html
<body>
<div class="myform">
<div>text within</div>
</div>
<div class="without">text without</div>
</body>
You can nest .within() statements using the same breakout pattern,
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
})
Tested with this html
<body>
<div class="scope1">
<div>text within scope1</div>
</div>
<div class="scope2">
<div>text within scope2</div>
</div>
</body>
cy.get('body').find('div.without'); // checking this query first (outer scope)
cy.get('div.myform').within(() => {
cy.contains('text within'); // inner scope
// This is very important.
cy.wrap(Cypress.$('html')).find('div.without'); // outer scope
cy.contains('text within'); // inner scope
})<body>
<div class="myform">
<div>text within</div>
</div>
<div class="without">text without</div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
