Cypress中验证筛选器计数与页面总职位数相等的问题排查

问题背景与需求 #

提供两段DOM结构如下：

<li
  class="facet sector multiselect selected"
  data-bind="click: function(data, e) { $parent.sectors.setParentSector.call($parent, data, e); }, attr: { 'class' : 'facet sector multiselect' + (Selected() ? ' selected' : '') + (Disabled() ? ' disabled' : '')}"
>
  <a
    href="***parentsector=financial-services"
    data-bind="text: SectorName(), attr: { href: Url() }"
    >Financial Services</a
  >
  <span class="count" data-bind="text: '(' + JobCount() + ')'">(62)</span>
</li>
<div class="col-md-12">
  <div class="page-counter">1 - 25 of 62 jobs</div>
</div>

需求：验证第一个元素中的计数(62)与页面计数器里的总职位数（即1 - 25 of 62中的62）相等。

问题现象 #

编写的Cypress代码未生效：

it("Verify job count of filter applied should be equal to total jobs appear in webpage  ", () => {
  let count;

  cy.searchKeyword(fdata); //ignore this code as it is not relevant to this context.

  cy.get(":nth-child(7) > .count").click();
  cy.get(".selected > .count").then(($el) => {
    count = $el.text;
    cy.log(count);
  });

  cy.get(":nth-child(1) > .row-top > .row > .col-md-12 > .page-counter")
    .contains("${count}")
    .should("be.true");
});

错误排查与修正 #

1. 异步变量获取逻辑错误 #

Cypress是异步执行模型，count变量在.then()回调外无法拿到正确的异步结果。后续的cy.get(...).contains()执行时，count还没被赋值，导致匹配失败。

2. DOM文本提取错误 #

$el.text是jQuery对象的属性引用，正确获取元素文本应该调用$el.text()方法（带括号），否则拿到的是函数本身而非文本内容。

3. 字符串模板语法错误 #

"${count}"用双引号无法解析模板变量，需要换成反引号`${count}`；另外原DOM中过滤项的计数带括号(62)，但页面计数器里是纯数字62，直接匹配会失败，需要先提取纯数字再对比。

4. 断言逻辑无效 #

.contains(...)后加.should("be.true")没有实际意义，应该直接断言内容匹配，或者提取两个元素的数字后做相等对比。

修正后的代码 #

it("Verify job count of filter applied equals total jobs on webpage", () => {
  cy.searchKeyword(fdata);

  cy.get(":nth-child(7) > .count").click();
  
  // 获取过滤项计数，提取纯数字
  cy.get(".selected > .count").then(($countEl) => {
    const filterCount = $countEl.text().replace(/[()]/g, "");
    
    // 提取页面计数器的总职位数并对比
    cy.get(".page-counter").then(($counterEl) => {
      const totalCount = $counterEl.text().match(/of (\d+) jobs/)[1];
      expect(totalCount).to.equal(filterCount);
    });
  });
});

也可以用Cypress的别名方式更简洁地实现：

it("Verify job count of filter applied equals total jobs on webpage", () => {
  cy.searchKeyword(fdata);

  cy.get(":nth-child(7) > .count").click();
  
  // 存储过滤项的纯数字计数
  cy.get(".selected > .count")
    .invoke("text")
    .then(text => text.replace(/[()]/g, ""))
    .as("filterCount");

  // 提取页面计数器数字并对比
  cy.get(".page-counter")
    .invoke("text")
    .then(text => text.match(/of (\d+) jobs/)[1])
    .then(totalCount => {
      cy.get("@filterCount").should("equal", totalCount);
    });
});

内容的提问来源于stack exchange，提问作者Danish Shabbir