13

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.

Zang wei
  • 168
  • 1
  • 8

5 Answers5

13

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>
Richard Matsen
  • 20,671
  • 3
  • 43
  • 77
  • 1
    Thanks, nested .within is working well, I tested enough. – Zang wei Jan 28 '21 at 13:03
  • Cool, it works pretty well to use nested within. The way to within any element (can be parent) from one within is really innovation. I see It may be new way to discovery something. – Zang wei Feb 01 '21 at 03:57
2

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

});
Wilt
  • 41,477
  • 12
  • 152
  • 203
1

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();
  });
Leonardo Martinez
  • 553
  • 3
  • 7
  • 1
    Thanks for your answer. but what I want is to escape scope. As I told in question description, most commands are scoped, so it's really pain to use alias for all potential elements outside. If I can escape scope to query any element outside. And I am not sure this code is working properly. .select-address-dropdown does not exist initially, it is rendered only when to click .select-address. – Zang wei Jan 28 '21 at 06:05
1

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>
risingagain
  • 210
  • 2
  • 12
0

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')

blake.vandercar
  • 131
  • 7
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 27 '23 at 14:21