赛普拉斯如何暂时逃离 cy.within()答案

【问题标题】：Cypress how to temporarily escape from a cy.within()赛普拉斯如何暂时逃离 cy.within()
【发布时间】：2021-01-27 23:16:00
【问题描述】：

我正在努力在 cypress 上编写自动测试器代码。由于 web 应用程序是 vue.js 项目，因此页面由 src 中的组件组成。因此，在 cypress 中，我决定将所有后续命令的范围限定在组件根目录中，而不是文档根目录（html）。这样 cy.get 或 cy.find 将在组件根 dom 中查询。

但我经常需要查询当前作用域组件之外的一些元素。例如：当我有自定义选择在组件外部呈现下拉菜单时，在赛普拉斯中，在 cy.within 内部，无法选择下拉选项，因为它在组件根外部呈现。

所以我尝试暂时逃离范围以选择下拉菜单，然后再次返回范围以执行下一个命令。

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.within 来确定大多数命令的范围。任何解决方案都会有所帮助。

【问题讨论】：

这可能会有所帮助：github.com/cypress-io/cypress/issues/6666

标签： javascript automated-tests cypress

【解决方案1】：

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>

嵌套内部

您可以使用相同的突破模式嵌套.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>

【讨论】：

谢谢，嵌套 .within 运行良好，我测试够了。
酷，嵌套在里面使用效果很好。从一个内部进入任何元素（可以是父级）的方式确实是创新。我知道这可能是发现某些东西的新方法。

【解决方案2】：

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>

【讨论】：

【解决方案3】：

您可以使用别名，然后使用 @ 句柄调用它：

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();
  });

【讨论】：

感谢您的回答。但我想要的是逃避范围。正如我在问题描述中所说，大多数命令都是有范围的，因此为外部所有潜在元素使用别名真的很痛苦。如果我可以逃脱范围以查询外部的任何元素。而且我不确定这段代码是否正常工作。 .select-address-dropdown 最初不存在，只有点击 .select-address 时才会呈现。