如何使用 Cypress 检查斯巴达克斯商店中的所有值？

Question

我目前正在尝试测试赛普拉斯的一家商店。一项测试旨在测试价格过滤器的使用。在我的示例中，我想依次单击 4 个过滤器。然后第一步是确保已应用过滤器。但是，我在选择过滤器时失败了。只要我只选择一个，选择有效。

我怀疑这与 Cypress 的异步特性有关。你是怎么做到的？

夹具文件：

[...]

"priceRanges": [
    "-9.99",
    "0-9.99",
    "0-9.99",
    ",000-0,000"
  ],
[...]

DOM

<a
  routerlink="./"
  class="value selected"
  href="/electronics-spa/en/USD/Open-Catalogue/Cameras/Hand-held-Camcorders/c/584?query=:relevance:allCategories:584"
  data-cx-focus=",000-0,000"
  tabindex="0"
  ><span
    ><span class="label">,000-0,000</span
    ><span class="count">1</span></span
  ></a
>

这是我试过的：


  it.only('There shall be a way to filter products by price range', function () {
    const homePage = new HomePage();
    homePage.openProductCategoryLink('5'); // Camcorders
    // Stores, Price, Resolution, Brand
    cy.get('cx-facet').should('have.length', 4);
    cy.get('cx-facet').then((items) => {
      expect(items).to.have.length(4);
      cy.wrap(items[1]).children('button').should('contain.text', 'Price');

      // check for price ranges
      this.filterCriteria.priceRanges.forEach((aPriceRange: any) => {
        cy.wrap(items[1]).children().should('contain.text', aPriceRange);
        cy.log(aPriceRange);
        //  Price -9.9910-9.9930-9.991,000-0,0001
        // TODO: narrow the range and see if the filter is applied correctly
        cy.get(`a[data-cx-focus="${aPriceRange}"]`).then((linkFound) => {
          cy.log('Click on: ' + aPriceRange);
          cy.wrap(linkFound).click();
        });
      });
    });
  });

Answer 1

代码看起来不错，forEach 循环有点危险，但它应该可以工作。

如果您想单击所有复选框，这应该可以为您完成

cy.get(`a[data-cx-focus]`)   // select all four ranges by not specifying the range value
  .click({ multiple: true }) // multiple items clicked at once

顺便问一下，cy.wrap(items[1]).children('button').should('contain.text', 'Price') - 你必须先点击那个打开吗？

查看站点，我认为测试中的 forEach 循环速度太快，页面刷新跟不上。

尝试在循环中添加一个检查，比如查找 Applied Filter 标签

this.filterCriteria.priceRanges.forEach((aPriceRange: any, index: number) =>{

  cy.wrap(items[1]).children().should('contain.text', aPriceRange);
  cy.log(aPriceRange);
  //  Price -9.9910-9.9930-9.991,000-0,0001
  // TODO: narrow the range and see if the filter is applied correctly
  cy.get(`a[data-cx-focus="${aPriceRange}"]`).then((linkFound) => {
    cy.log('Click on: ' + aPriceRange);
    cy.wrap(linkFound).click();

    cy.get('cx-active-facets a')         // get the price-range tags under "Applied filter"
      .should('have.length', index + 1)  // wait for the correct number
  });
});

Answer 2

Cypress 与 lodash 捆绑在一起，这有助于 Cypress 的异步特性。您应该推动更好地添加更好的选择器，以便您的测试更易于阅读和维护

// if you don't plan on using price ranges in other test files

const priceRanges = [
    "-9.99",
    "0-9.99",
    "0-9.99",
    ",000-0,000"
  ]

it.only('There shall be a way to filter products by price range', function () {
      // sectioncode stays the same

      // check for price ranges
      Cypress._.forEach((priceRanges: any), function(pRange){
        cy.wrap(items[1]).children().should('contain.text', pRange);
        cy.log('Click on: ' + pRange);
        cy.get(`a[data-cx-focus="${pRange}"]`).check();
        

        cy.get('.items-displayed').children('.price').each( p => {
           // code to check displayed items are within price range filter          
      });
    });
  });

如何使用 Cypress 检查斯巴达克斯商店中的所有值？

How do I check all values in a Spartacus shop using Cypress?

typescript

cypress

spartacus-storefront