如何使用 cypress 测试 Material-UI 工具提示？

Question

我们经常使用 tooltips，我想使用工具提示文本来查找元素。这第一次工作正常，因为工具提示文本就在元素的标题中。但是在将鼠标悬停在标题属性上时，它会被删除，并且会在页面底部添加一个新的工具提示元素。在元素上发出点击后，鼠标停留在它上面，下次我找不到它的标题。

没有鼠标悬停：

<span class="" title="Save changes">
   ...
</span>

鼠标悬停在：

<span class="" aria-describedby="mui-97465">
   ...
</span>
...
<div role="tooltip" class="MuiTooltip-popper" id="mui-97465" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(3063px, 116px, 0px);" x-placement="bottom">
    <div class="MuiTooltip-tooltip MuiTooltip-tooltipPlacementBottom" style="opacity: 1; transform: none; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 133ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;">
       Save changes
    </div>
</div>

我尝试构建自己的命令，但这也不起作用：

Cypress.Commands.add("findByTooltip", (text) => {
  cy.get("body")
    .then(($body) => {
      $body.find(`[title="${text}"]`).length > 0;
    })
    .then((byTitle) => {
      byTitle
        ? cy.findByTitle(text)
        : cy
            .findByRole("tooltip")
            .contains(text)
            .its("id")
            .then((id) => cy.get(`[aria-describedby=${id}]`));
    });
});

有人做过这样的事吗？

Answer 1

这部分缺少一个 return 值

.then(($body) => {
  $body.find(`[title="${text}"]`).length > 0;
})

所以要么

.then(($body) => {
  return $body.find(`[title="${text}"]`).length > 0;
})

或删除“隐含 return”的括号

.then(($body) => $body.find(`[title="${text}"]`).length > 0 )

我不确定 title="Save Changes" 是否在页面 DOM 上，至少一个 MUI 示例缺少该属性。

我会选择 aria-label

.then(($body) => $body.find(`[aria-label="${text}"]`).length > 0 )

要显示工具提示，您需要某种悬停。最靠谱的好像是cypress-real-events

cy.get((`[aria-label="${text}"]`)).realHover();
cy.findByRole("tooltip")
  .contains(text)
  .its("id")
  .then((id) => cy.get(`[aria-describedby=${id}]`))

如何使用 cypress 测试 Material-UI 工具提示？

How can I test the Material-UI tooltip with cypress?

material-ui

cypress