如何使用赛普拉斯获取元素类型 =“电子邮件”？答案

【问题标题】：How do I get element type="email" using Cypress?如何使用赛普拉斯获取元素类型 =“电子邮件”？
【发布时间】：2021-01-11 19:04:57
【问题描述】：

我目前正在尝试学习赛普拉斯进行自动化测试。

我想找到并点击这个元素：

<input type="email" class="form-control text-ellipsis-global GKMU5SYDM3B" id="gwt-uid-1419" data-empty="true">

我不能使用 id 或“GKMU5SYDM3B”，因为它们都是由 GWT 随机生成的。

我希望我的命令类似于：

cy.get('input').type('email').click().type('fake@email.com')
  .should('have.value', 'fake@email.com')

我试过这个并收到以下错误消息：

CypressError: cy.type() can only be called on a single element. Your subject contained 4 elements.

【问题讨论】：

我在下面给出了答案。但我有一些问题。你为什么要测试你可以在输入框中输入？也许您有充分的理由，但您没有编写该实现。您还可以访问代码吗？如果是这样，您可能希望在其中添加自己的 date-test-id 属性以使其唯一，如果其他人添加了另一个电子邮件类型的输入（例如验证电子邮件），则会导致一些问题。
您的页面上是否还有其他具有电子邮件类型的输入？是否有一些父元素，例如具有 id 或类的 div 或表单？如果是这样，您可以选择父母，然后找到孩子以尝试使其更加独特。
@Maccurt 我一直在评估多种自动化测试方法，包括 Selenium、Nightwatch 和 Cypress。在每种情况下，我都会编写一个简单的测试来登录和退出我们的 Web 客户端系统。我不负责任何代码，只负责测试，所以我必须适应那里的任何东西。
啊，是的，我知道这个角色。我们使用 Telerik（我正在尝试减少）。我也使用过量角器。根据我使用很多工具的经验，我发现 Cypress 是我迄今为止最喜欢的。量角器可能是下一个。我的目标是让我的开发人员更多地参与这项工作，他们会使用赛普拉斯。我祝你好运。你会为它在 Internet Explorer 中无法工作而感到悲伤，但我认为这些都是边缘情况。对我来说，赛普拉斯使测试变得容易，模拟 API 调用的能力改变了游戏规则。祝你好运！

标签： cypress

【解决方案1】：

这应该可行。

 cy.get("[type='email']")

 cy.get("[type='email']").type('myemail@domain.com')

我一直在做的，是先在浏览器控制台中的 JQUERY 中尝试。您不必单击它来输入内容。

如果你有一些父元素，比如一个 div，你可能也想包含它。

<div id='parent'>
    <input type="email" class="form-control text-ellipsis-global GKMU5SYDM3B" id="gwt-uid-1419" data-empty="true">
</div>

然后你会去

cy.get('#parent').find("[type='email']").type('myemail@domain.com')

【讨论】：

我担心页面上还有其他类型的电子邮件输入。如果是这样，请向我们展示更多您的 html 结构，例如父元素，我们可以使其更加独特。
我不得不点击输入元素，因为 GWT 使用这些占位符。让生活变得困难。甚至无法在 Firefox 中使用 Inspect，因为单击占位符会将其更改为不同的元素。

【解决方案2】：

实际上您想验证在电子邮件字段中输入的“电子邮件”。

首先，使用这种类型的定位器键入“电子邮件”。

cy.get("[type='email']").type('fake@email.com');

在“电子邮件”字段中输入后，您可以通过此断言进行验证。

cy.get("[type='email']").should('have.value', 'fake@email.com')

【讨论】：