Cypress :: 如何通过选择 alt 值来点击图像？

Question

我需要选择按钮内的图像。问题是有六个相似的图像，除了它们的替代消息和来源之外，它们没有任何唯一标识符。这是我正在使用的代码。

<div class="dropup-content" style="height: auto; max-height: 1000px;">
  <button type="button">
    <img src="images/en_US.png" alt="English" style="width: 45px; height: 30px;">
  </button>
  <button type="button">
    <img src="images/nb_NO.png" alt="Norwegian" style="width: 45px; height: 30px;">
  </button>
  <button type="button">
    <img src="images/fi_FI.png" alt="Finnish" style="width: 45px; height: 30px;">
  </button>
  <button type="button">
    <img src="images/fr_FR.png" alt="French" style="width: 45px; height: 30px;">
  </button>
  <button type="button">
    <img src="images/nl_BE.png" alt="Dutch" style="width: 45px; height: 30px;">
  </button>
  <button type="button">
    <img src="images/de_DE.png" alt="German" style="width: 45px; height: 30px;">
  </button>
</div>

现在，如果我需要选择具有 alt value 的按钮Swedish，我该怎么做？例如，我可以使用以下代码获取第一个：

cy.get('.dropup-content').first().click()

然而，问题是序列每次都是随机出现的。所以我不能依赖first()ornext()方法。Cypress 有什么方法可以点击带有图像属性的按钮吗Swedish？

Answer 1

你可以这样做：

cy.get('[alt="Swedish"]').click()

Answer 2

尝试

cy.get('button[alt="Swedish"]').click()

但是，如果您可以控制如何创建这些按钮，我建议您应该data-cy向它们添加标签，然后通过以下方式访问它们

cy.get('button[data-cy="Swedish"]').click()

阅读最佳实践文档中的原因