如何从柏树中的单个元素查询多个事物

Question

我正在尝试在 cypress 中测试 popup/modal 的内容。我的第一直觉是重复命令来获取模态元素，如下所示：

it('filter modal/popup', () => {
    cy.get('.some-button').click();
    cy.get('.some-modal').contains('abc').should('be.visible');
    cy.get('.some-modal').contains('def').should('be.visible');
    cy.getByCyTag('.some-modal').contains('xyz').should('be.visible');
});

不过，“身为程序员”，查询'folder-tree-filter-modal'三次甚至更多次，让我有点不适应。由于您不能将 cypress 对象存储在变量中，因为它们会产生结果，因此我尝试使用 cypress 的 then() 基于承诺的语法，但这看起来也并没有好多少：

it('filter modal/popup', () => {
    cy.get('.some-button').click();
    cy.get('.some-modal').then((modal) => {
        cy.wrap(modal).should('be.visible');
        cy.wrap(modal).contains('abc').should('be.visible');
        cy.wrap(modal).contains('def').should('be.visible');
        cy.wrap(modal).contains('xyz').should('be.visible');
    });
});

我是想多了还是有更好的方法？

Answer 1

假设 cy.getByCyTag('file-tree-facette-search') 翻译成类似 cy.get('file-tree-facette-search') 的内容，那么您使用 each 命令进行循环，例如：

const values = ['abc', 'def', 'xyz']
cy.getByCyTag('file-tree-facette-search').each(($ele, index) => {
  cy.getByCyTag('folder-tree-filter-modal')
    .contains(values[index])
    .should('be.visible')
})

或者您可以直接应用传统的 forEach 如果它适用于您的用例，如下所示：

const values = ['abc', 'def', 'xyz']
values.forEach((val) => {
  cy.getByCyTag('folder-tree-filter-modal').contains(val).should('be.visible')
})

Answer 2

我想我一直在寻找的是 add aliases 柏树查询的能力。

这允许做这样的事情：

cy.getByCyTag('folder-tree-filter-modal').as('modal');
    cy.get('@modal').should('be.visible');
    cy.get('@modal').contains('Darstellungsoptionen').should('be.visible');
    cy.get('@modal').contains('Nur Dateien mit Treffer anzeigen').should('be.visible');
    cy.get('@modal').contains('Genauigkeiten').should('be.visible');
    cy.get('#modal-facette-search .modal__inner').scrollTo('bottom');
    cy.get('@modal').contains('Dateitypen').should('be.visible');
    cy.get('#modal-facette-search .modal__inner').scrollTo('bottom');
    cy.get('@modal').get('.modal--active .modal__close').click();
    cy.get('@modal').should('not.be.visible');

这只是将命令链接到同一个对象，而无需重新键入整个选择器。

Answer 3

您需要使用 .within() 命令。所有后续的 cy 命令都将在一个元素内查询。

it('filter modal/popup', () => {
    cy.get('.some-button').click();
    cy.get('.some-modal').within( ()=> {
      cy.contains('abc').should('be.visible');
      cy.contains('def').should('be.visible');
      cy.contains('xyz').should('be.visible');
    });
});

如何从柏树中的单个元素查询多个事物

How to query multiple things from a single element in cypress

cypress