如何在赛普拉斯的阵列中找到第三个 object

Question

对于我的这个方法

static getTemplateItemName() {
  const x = this.templateItem.find('.template-name').contains('Basic elements').scrollIntoView({ensureScrollable: false});
  cy.get('.template-cover').eq(2).within(() =>
    cy.get('.btn-link-primary').contains('Preview').click({force: true});
};

我想删除.eq(2) 并提供一些更软的代码，它也可以使用其他模板名称。 你能建议我们怎么做吗

这是我的 HTML：

<div _ngcontent-nbr-c91="" class="template-cover">
  <div _ngcontent-nbr-c91="" class="template-description">
    <div _ngcontent-nbr-c91="" class="template-name">
      <p _ngcontent-nbr-c91="" class="text-xs">Basic elements</p> 
    </div>
    <div _ngcontent-nbr-c91="" class="template-actions ng-star-inserted">
      <button _ngcontent-nbr-c91="" class="btn btn-link-primary">Preview</button>
      <button _ngcontent-nbr-c91="" class="btn btn-outline-primary"> Select </button>
    </div>
    <!---->
  </div>
</div>

谢谢

Answer 1

因此，您可以使用parent而不是eq(2)来访问您的模板封面元素，然后在其中使用您可以单击预览按钮。 像这样的东西：

cy.contains('p', 'Basic elements')
  .parent() //template-name
  .parent() //template-description
  .parent() //template-cover
  .within(() => {
    cy.contains('button', 'Preview').click({force: true})
  })

Answer 2

如果您预览和 Select 按钮仅对您正在寻找的带有template-cover的 div 是唯一的，那么您可以轻松访问。

// make sure we are in correct template
cy.contains('.template-cover', 'Preview')
  .should('be.visible')
  .contains('button', 'Preview')
  .should('be.visible')
  // your element might be covered by another element for you to use force:true
  .click({force:true})
  

如果按钮不是模板独有的，那么我们可以通过模板名称 go。

// make sure we are in correct template
cy.contains('.template-cover', 'Basic elements')
  .should('be.visible')
  .contains('button', 'Preview')
  .should('be.visible')
  // your element might be covered by another element for you to use force:true
  .click({force:true})