时间戳

首页 > 解决方案 > 赛普拉斯有没有办法进行反向“getBySel”或类似的事情？

javascript - 赛普拉斯有没有办法进行反向“getBySel”或类似的事情？

问题描述

赛普拉斯有许多方法可以在 DOM 中更深入地搜索匹配元素。从某个 div 中，我可以查询它的子元素以获取匹配的元素、选择器、属性等。

对于元素的父母，有没有办法反过来做呢？举一个简单的例子，假设我有 4 个筹码，所有筹码都有不同的文字。这是一个芯片：

<div data-test="chip">
  <div className="left">
    <p><span className="truncate">Chip 1</span></p>
  </div>
  <div className="right">
    <i onClick={handleRemove} data-test="remove-chip">X</i>
  </div>
</div>

如果我想使用赛普拉斯移除一个芯片，我需要能够告诉它点击哪个“X”。最简单的方法是选择所有筹码，在文本上匹配，然后进行反向“get”搜索以匹配上，data-test=chip这样我们只选择 1 个筹码而不是全部 4 个。

cy.getBySel('list-of-chips')
  .contains('Chip 1')
  .reverseGetBySel('chip') // does this exist??
  .find('[data-test="remove-chip"]')
  .click();

该parentsUntil运算符不适用于此，因为它还返回所有父母的数组。我希望它做相反的事情，而不是在提供的选择器之前返回所有父母，我希望选择器位于父母链的末端。希望这是有道理的。

标签： javascriptcypress

解决方案

这最终对我有用：

Cypress.Commands.add(
  'reverseFindBySel',
  {
    prevSubject: true, // must be chained off get or find
  },
  (subject, selector, ...args) => {
    return cy.wrap(subject).parents(`[data-test=${selector}]`, ...args);
  }
);

推荐阅读