Cypress how to temporarily escape from a cy.within()
Question
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.
5 answers
solution1
9 ACCPTED 2021-01-28 07:20:05
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>
Nested withins
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>
solution2
1 2021-01-29 07:08:16
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>
solution3
0 2021-01-28 05:00:30
You could use an alias and then call it with the @ handle:
cy.get(".select-address-dropdown").as('select-address-dropdown')
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();
// Here you can reference the select alias:
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();
});
solution4
0 2022-05-31 15:32:03
You can use cy.document() to yield the window.document object and then use within to scope all subsequent requests within your function to the document.
cy.get('[data-cy="subject"]').within(($subject) => {
// Here cy commands are scoped within your subject
cy.document().within(($document) => {
// Now cy commands are scoped within the document
});
// Here cy commands are again scoped within your subject
});
solution5
0 2023-01-26 05:20:37
cy.document().its('body') didn't work for me for some reason, maybe due to retryability
Cypress 12:
Cypress.Commands.addQuery('escapeWithin', () => () => cy.$$('body'))
cy.escapeWithin().find('div.without')
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.