如何測驗/驗證賽普拉斯中某個部分的標題層次結構？

我想強制執行標題遵循層次結構的結構。這意味著如果您從 dom 的底部到頂部，則下一個標題必須是 <= current 或 1。

這是我的一個部分中標題的控制臺日志，例如：

Yielded:

0: h2.mt-4
1: h3.mt-16.text-base.w-64
2: h4.mt-0.font-normal.text-sm
3: h4.mt-0.font-normal.text-sm
4: h4.mt-0.font-normal.text-sm
5: h3.mt-16.text-base.w-64
6: h4.mt-0.font-normal.text-sm
7: h4.mt-0.font-normal.text-sm
8: h4.mt-0.font-normal.text-sm
9: h4.mt-0.font-normal.text-sm
10: h3.mt-16.text-base.w-64
11: h4.mt-0.font-normal.text-sm
12: h4.mt-0.font-normal.text-sm

這將是有效的^

Yielded:   

0: h2.mt-4
1: h3.mt-16.text-base.w-64
2: h4.mt-0.font-normal.text-sm
3: h4.mt-0.font-normal.text-sm
4: h4.mt-0.font-normal.text-sm
5: h3.mt-16.text-base.w-64
6: h4.mt-0.font-normal.text-sm
7: h4.mt-0.font-normal.text-sm
8: h4.mt-0.font-normal.text-sm
9: h4.mt-0.font-normal.text-sm
10: h3.mt-16.text-base.w-64
11: h1.mt-0.font-normal.text-sm
12: h1.mt-0.font-normal.text-sm

而且這不是^^^

到目前為止，我可以遍歷各個部分并獲取每個部分的標題，但是對于如何遍歷并強制執行該規則有點困難。它需要比較當前標題和陣列中的下一個標題。

到目前為止我所擁有的：

Cypress.Commands.add("checkHeadingHeirarchy", () => {
  cy.get("section").each(($section) => {
    cy.get($section).within(() => {
      cy.get("h1,h2,h3,h4,h5,h6"); //now what?...
    });
  });
});

@agoff：console.log向我們展示了第一個 $el，然后是 $list[index 1]：

This is the $el: jQuery.fn.init [h2.mt-4]
This is the $el: <h3 data-cy=?"header" class=?"mt-16 text-base w-64">?Engineering?</h3>?

@agoff：這行得通，但它很老套：

Cypress.Commands.add("checkHeadingHeirarchy", () => {
  cy.get("section").each(($section) => {
    cy.get($section).within(() => {
      cy.get("h1,h2,h3,h4,h5,h6").each(($el, index, $list) => {
        // Don't run the validation on the last item in the list
        if (index !== $list.length - 1) {
          // Get the size of the current and next header
          const currSize = getHeaderNumber($el);
          const nextSize = getHeaderNumber($list, index   1);
          try {
            expect(currSize <= nextSize || currSize   1 === nextSize).to.eql(
              true
            );
          } catch {
            console.log("Failed on current size:", currSize);
            console.log("Failed on next size:", nextSize);
            throw error;
          }
        }
      });
    });
  });
});

// helper function to get header number
const getHeaderNumber = ($el, index) => {
  console.log("Going to parse this:", $el.get(index ?? 0));
  try {
    console.log("Got this:", parseInt($el.get(index ?? 0).tagName.slice(1)));
    return parseInt($el.get(index ?? 0).tagName.slice(1));
  } catch {
    console.log("ERROR ON:", $el.get(index ?? 0));
  }
};

uj5u.com熱心網友回復：

您可以 yield 產生的元素的索引，以及整個串列。使用它，我們可以很容易地比較下一個產生的專案。

Cypress.Commands.add("checkHeadingHeirarchy", () => {
  cy.get("section").each(($section) => {
    cy.wrap($section).within(($sectionWithin) => {
      cy.get("h1,h2,h3,h4,h5,h6").each(($el, index, $list) => {
        // Don't run the validation on the last item in the list
        if (index !== $list.length - 1) {
          // Get the size of the current and next header
          const currSize = getHeaderNumber($el)
          const nextSize = getHeaderNumber($list[index   1])
          expect(currSize <= nextSize || currSize   1 === nextSize).to.eql(true);
        }
      });
    });
  });
});

// helper function to get header number
const getHeaderNumber = ($el) => {
  const tagName = $el.prop('tagName') ?? $el.get(0).tagName
  return parseInt(tagName.slice(1), 10);
}

標籤：html jQuery 单元测试 测试 柏

上一篇：在js中設定復選框的限制

下一篇：如何有條件地垂直對齊到ul中的中間li