在 Cypress 测试中搜索一个或另一个选择器

Question

我需要测试如下内容。

如果

div.table-row.table-row-hover

存在，则必须包含指定的文本。

如果

div.table-row.table-row-hover

不存在，则一定存在另一个被

i[class="far fa-empty-set"]

选择的元素。

我的代码不起作用，它失败了，因为找不到

div.table-row.table-row-hover

。

it.only("Test", () => {

  const query = "ExampleText"; 
  cy.get('div[class="ng-search-input"]').type(`${query}{enter}`);
  cy.get("div.table-row.table-row-hover").then(($elements) => {
    if ($elements.length > 0) {
      let textFound = false;
      $elements.each(($el) => {
        const text = Cypress.$($el).text().toLowerCase(); 
        if (text.includes(query.toLowerCase())) {
          textFound = true;
        }
      });
      expect(textFound).to.be.true;
    } else {
      cy.get('i[class="far fa-empty-set"]').should("exist");
    }
  });
});

Answer 1

要了解您是否有一个选择器或另一个选择器，最简单的方法是编写一个“多重选择器”。

请参阅此页面 https://api.jquery.com/multiple-selector/ 获取文档。

const tableRowSelector = 'div.table-row.table-row-hover'
const emptySetSelector = 'i[class="far fa-empty-set"]'
const multiSelector = `${tableRowSelector}, ${emptySetSelector}`

cy.get(multiSelector).then($el => {
  if ($el.selector === tableRowSelector) {
    cy.contains(tableRowSelector, query, {matchCase:false})
  } else {
    cy.get('i[class="far fa-empty-set"]')
  }
})

问题 #1 - “空集”是默认值吗？

如果

i[class="far fa-empty-set"]

是搜索之前的默认值，则不会起作用，因为搜索存在时间滞后。

此时需要拦截并等待API调用

cy.intercept(<search-url>).as('search')

cy.get('div[class="ng-search-input"]').type(`${query}{enter}`)
cy.wait('@search')

const tableRowSelector = 'div.table-row.table-row-hover'
const emptySetSelector = 'i[class="far fa-empty-set"]'
const multiSelector = `${tableRowSelector}, ${emptySetSelector}`

cy.get(multiSelector).then($el => {
  if ($el.selector === tableRowSelector) {
    cy.contains(tableRowSelector, query, {matchCase:false})
  } else {
    cy.get('i[class="far fa-empty-set"]')
  }
})

问题 #2 - 这只是测试的一半

无论满足哪个条件，您都只是测试其中一个条件。

如果你想要
专业测试，你必须处理这两个条件。

为此，请向

cy.intercept()

 添加一个夹具以设置每个条件。

it('test when search query is found', () => {
  cy.intercept(<search-url>, 'query-found-results.json').as('search')
  cy.get('div[class="ng-search-input"]').type(`${query}{enter}`)
  cy.wait('@search')
  cy.contains('div.table-row.table-row-hover', query, {matchCase:false})
})

it('test when search query is not found', () => {
  cy.intercept(<search-url>, 'query-not-found.json').as('search')
  cy.get('div[class="ng-search-input"]').type(`${query}{enter}`)
  cy.wait('@search')
  cy.get('i[class="far fa-empty-set"]')
})